360星計劃學習筆記-如何學好JavaScript

liusGG發表於2018-06-08

前言

《如何學好javascript》這門課是由360技術專家月影老師講的。

說實話，我一直在糾結要不要寫關於js的文章，因為對於js來說，我的實際經驗不足，更不要說物件導向程式設計與函數語言程式設計了，對於過程抽象與行為抽象也沒有深入的理解，但想想還是覺得應該分享出來，並且我儘量原汁原味的闡述這門課的內容，儘量不加入自己主觀理解，因為對於沒有實際經驗的我來說，如果新增自己主觀的理解只能誤導讀者，好了，不費話了~

一、關燈吃麵

需求:

點選紅色按鈕
背景變成黑色
字型color由黑色變成白色
紅色按鈕變成綠色

1.1 版本1

light.onclick = function(evt) {
  if(light.style.backgroundColor !== 'green'){
    document.body.style.backgroundColor = '#000';
    document.body.style.color = '#fff';
    light.style.backgroundColor = 'green';
  }else{
    document.body.style.backgroundColor = '';
    document.body.style.color = '';
    light.style.backgroundColor = '';    
  }
}
複製程式碼

對於我來說，要是讓我完成這個需求，大概應該就寫成這樣吧^_^，

想想這樣寫好不好呢？

答案肯定是不好的。

這樣寫的問題：

用js直接去修改了元素的樣式。
並且程式碼只能看出修改了一些元素的樣式，看不出這坨程式碼需要完成哪些需求。
假設：如果以後想改需求而了，比如開燈時字型變為紅色，或者需要新增一些功能，那我就得去重新看程式碼，去改這一坨程式碼，這樣的話，維護起來就非常難。

1.2 版本2:

lightButton.onclick = function(evt) {
  if(main.className === 'light-on'){
    main.className = 'light-off';
  }else{
    main.className = 'light-on';
  }
}
複製程式碼

這回程式碼語義化就比較強了，通過js去修改className而不是用js來直接修改style，這樣寫會比較好一點。

1.3 版本3：其他思路

<input id="light" type="checkbox"></input>
<div id="main">
  <div class="pic">
    <img src="https://p4.ssl.qhimg.com/t01e932bf06236f564f.jpg">
  </div>
  <div class="content">
    <pre>
    今天回到家，
    煮了點面吃，
    一邊吃麵一邊哭，
    淚水滴落在碗裡，
    沒有開燈。
    </pre>
  </div>
  <label for="light">
    <span id="lightButton"> </span>
  <label>
</div>

<style>
html,body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#light {
  display: none;
}

#main {
  position: relative;
  padding: 20px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #000;
  transition: all .5s;
}

#light:checked + #main {
  background-color: #000;
  color: #fff;
}

.pic {
  float: left;
  margin-right: 20px;
}

.content {
  font-weight: bold;
  font-size: 1.5em;
}

#lightButton {
  border: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: absolute;
  left: 30px;
  top: 30px;
  cursor: pointer;
  background: red;
}

#light:checked+#main #lightButton {
  background: green;
}
</style>
複製程式碼

這麼寫的思路就是不使用js，而是通過input和label來關聯切換狀態。

二、複雜的UI元件的設計

這是大家最熟悉不過的輪播圖元件了，如果用程式導向的寫法，可能會出現很多bug，那麼如何實現才是最好的呢？

2.1 步驟1：整體思路

整體思路

圖片結構是一個列表型結構，所以主體用 <ul>和<li>
使用 css 絕對定位將圖片重疊在同一個位置
輪播圖切換的狀態使用修飾符（modifier）
輪播圖的切換動畫使用 css transition

2.2 步驟2： API設計

具體實現：

class Slider{
  constructor(id){
    this.container = document.getElementById(id);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
  }
  // 獲得當前元素
  getSelectedItem(){
    const selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  // 獲得當前元素的索引
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  // 切換到第index張圖片
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    const item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }
  }
  // 切換到下一張圖片
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  // 切換到上一張圖片
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
}
// 通過new來例項化
const slider = new Slider('my-slider');
setInterval(() => {
  slider.slideNext()
}, 3000)
複製程式碼

2.3 步驟3：控制流設計 (下方小圓點與左右按鈕設計)

控制結構

<a class="slide-list__next"></a>
<a class="slide-list__previous"></a>
<div class="slide-list__control">
    <span class="slide-list__control-buttons--selected"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
    <span class="slide-list__control-buttons"></span>
</div>
複製程式碼

自定義事件

    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
複製程式碼

因為下方原點與圖片自動切換的下標(index)是一致的，所以可以通過事件機制，在圖片slide時候直接給container派發一個事件，這樣的話呢，通過container去監聽這個事件，去更新控制結構上小圓點的狀態。

具體實現：

class Slider{
  constructor(id, cycle = 3000){
    this.container = document.getElementById(id);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = cycle;

    const controller = this.container.querySelector('.slide-list__control');
    if(controller){
      const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
      controller.addEventListener('mouseover', evt=>{
        const idx = Array.from(buttons).indexOf(evt.target);
        if(idx >= 0){
          this.slideTo(idx);
          this.stop();
        }
      });
      
      controller.addEventListener('mouseout', evt=>{
        this.start();
      });
      // 監聽slide事件
      this.container.addEventListener('slide', evt => {
        // 拿到slide事件傳來的index
        const idx = evt.detail.index
        const selected = controller.querySelector('.slide-list__control-buttons--selected');
        if(selected) selected.className = 'slide-list__control-buttons';
        buttons[idx].className = 'slide-list__control-buttons--selected';
      })
    }
    
    const previous = this.container.querySelector('.slide-list__previous');
    if(previous){
      previous.addEventListener('click', evt => {
        this.stop();
        this.slidePrevious();
        this.start();
        evt.preventDefault();
      });
    }
    
    const next = this.container.querySelector('.slide-list__next');
    if(next){
      next.addEventListener('click', evt => {
        this.stop();
        this.slideNext();
        this.start();
        evt.preventDefault();
      });
    }
  }
  getSelectedItem(){
    let selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    let selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    let item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }
  
    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
  }
  slideNext(){
    let currentIdx = this.getSelectedItemIndex();
    let nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    let currentIdx = this.getSelectedItemIndex();
    let previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
  start(){
    this.stop();
    this._timer = setInterval(()=>this.slideNext(), this.cycle);
  }
  stop(){
    clearInterval(this._timer);
  }
}

const slider = new Slider('my-slider');
slider.start();
複製程式碼

這個實現的建構函式會複雜一些，但是把timer定時器也封裝進去了，會有輪播的時間預設為3秒鐘，同樣的也是獲得container，items，cycle（時間）通過事件機制將控制流中的小圓點與圖片聯動起來。並且還判斷了controler是否存在，假如以後我們不需要小圓點這個功能了，我們只需要把html中相關的結構去掉，js也不會報錯，但是這裡還有一個優化的點就是slider與controler之間有著比較強的耦合度。

2.4 控制流設計原則

為什麼要用到事件機制呢？因為要降低結構之間的耦合度，如果不這樣做的話，我們需要做雙向的操控的。

舉個栗子?

比如我們要新增一個需求：顯示當前index。

只需要這樣做：

結構中新增

<div id="other">第0張</div>
複製程式碼

js中新增

document.addEventListener('slider', (evt) => {
    other.innerHTML = `第${evt.detail.index}張`
})
複製程式碼

三、這樣是不是就可以交差了呢？

其實還是有很大的改動空間的，比如上面的程式碼在建構函式的程式碼量特別多，slider與controler的耦合度比較大，如何降低它們之間的耦合度呢？

3.1 優化1：外掛/依賴注入

class Slider{
  constructor(id, cycle = 3000){
    this.container = document.getElementById(id);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = cycle;
  }
  registerPlugins(...plugins){
    plugins.forEach(plugin => plugin(this));
  }
  getSelectedItem(){
    const selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    const item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }

    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
  }
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
  addEventListener(type, handler){
    this.container.addEventListener(type, handler)
  }
  start(){
    this.stop();
    this._timer = setInterval(()=>this.slideNext(), this.cycle);
  }
  stop(){
    clearInterval(this._timer);
  }
}

function pluginController(slider){
  const controller = slider.container.querySelector('.slide-list__control');
  if(controller){
    const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
    controller.addEventListener('mouseover', evt=>{
      const idx = Array.from(buttons).indexOf(evt.target);
      if(idx >= 0){
        slider.slideTo(idx);
        slider.stop();
      }
    });

    controller.addEventListener('mouseout', evt=>{
      slider.start();
    });

    slider.addEventListener('slide', evt => {
      const idx = evt.detail.index
      const selected = controller.querySelector('.slide-list__control-buttons--selected');
      if(selected) selected.className = 'slide-list__control-buttons';
      buttons[idx].className = 'slide-list__control-buttons--selected';
    });
  }  
}
function pluginPrevious(slider){
  const previous = slider.container.querySelector('.slide-list__previous');
  if(previous){
    previous.addEventListener('click', evt => {
      slider.stop();
      slider.slidePrevious();
      slider.start();
      evt.preventDefault();
    });
  }  
}
function pluginNext(slider){
  const next = slider.container.querySelector('.slide-list__next');
  if(next){
    next.addEventListener('click', evt => {
      slider.stop();
      slider.slideNext();
      slider.start();
      evt.preventDefault();
    });
  }  
}
const slider = new Slider('my-slider');
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
複製程式碼

這樣做的好處：比如我們不想要controler這個元件了，直接刪掉外掛與html對應結構，其他的功能還是可以正常使用。

3.2 優化2：改進外掛/模板化

上面的程式碼還不是特別的優雅，當我們不想要一個功能時，需要刪除html結構與js程式碼，如果用模板化，只需要修改js即可。

render方法會傳data資料，負責構造html結構 action方法會注入component物件，負責初始化這個物件，新增事件、行為。

這樣我們的html結構只有

<div id="my-slider" class="slider-list"></div>
複製程式碼

class Slider{
  constructor(id, opts = {images:[], cycle: 3000}){
    this.container = document.getElementById(id);
    this.options = opts;
    this.container.innerHTML = this.render();
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = opts.cycle || 3000;
    this.slideTo(0);
  }
  render(){
    const images = this.options.images;
    const content = images.map(image => `
      <li class="slider-list__item">
        <img src="${image}"/>
      </li>    
    `.trim());
    
    return `<ul>${content.join('')}</ul>`;
  }
  registerPlugins(...plugins){
    plugins.forEach(plugin => {
      const pluginContainer = document.createElement('div');
      pluginContainer.className = '.slider-list__plugin';
      pluginContainer.innerHTML = plugin.render(this.options.images);
      this.container.appendChild(pluginContainer);
      
      plugin.action(this);
    });
  }
  getSelectedItem(){
    const selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    let item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }
    
    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
  }
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
  addEventListener(type, handler){
    this.container.addEventListener(type, handler);
  }
  start(){
    this.stop();
    this._timer = setInterval(()=>this.slideNext(), this.cycle);
  }
  stop(){
    clearInterval(this._timer);
  }
}

const pluginController = {
  render(images){
    return `
      <div class="slide-list__control">
        ${images.map((image, i) => `
            <span class="slide-list__control-buttons${i===0?'--selected':''}"></span>
         `).join('')}
      </div>    
    `.trim();
  },
  action(slider){
    const controller = slider.container.querySelector('.slide-list__control');
    
    if(controller){
      const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
      controller.addEventListener('mouseover', evt => {
        const idx = Array.from(buttons).indexOf(evt.target);
        if(idx >= 0){
          slider.slideTo(idx);
          slider.stop();
        }
      });

      controller.addEventListener('mouseout', evt => {
        slider.start();
      });

      slider.addEventListener('slide', evt => {
        const idx = evt.detail.index
        const selected = controller.querySelector('.slide-list__control-buttons--selected');
        if(selected) selected.className = 'slide-list__control-buttons';
        buttons[idx].className = 'slide-list__control-buttons--selected';
      });
    }    
  }
};

const pluginPrevious = {
  render(){
    return `<a class="slide-list__previous"></a>`;
  },
  action(slider){
    const previous = slider.container.querySelector('.slide-list__previous');
    if(previous){
      previous.addEventListener('click', evt => {
        slider.stop();
        slider.slidePrevious();
        slider.start();
        evt.preventDefault();
      });
    }  
  }
};

const pluginNext = {
  render(){
    return `<a class="slide-list__next"></a>`;
  },
  action(slider){
    const previous = slider.container.querySelector('.slide-list__next');
    if(previous){
      previous.addEventListener('click', evt => {
        slider.stop();
        slider.slideNext();
        slider.start();
        evt.preventDefault();
      });
    }  
  }
};

const slider = new Slider('my-slider', {images: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
     'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
     'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
     'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});

slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
複製程式碼

這樣做的好處就是我們可以隨意修改這個元件的功能，如果不想要兩邊的按鈕或者控制流的小圓點，只需要修改註冊外掛即可。

外掛化/模板化這種做法還有一個缺點就是如果我們修改外掛時，我們直接append到元件裡，可能只修改了一點點程式碼，最後導致整個dom都重新整理了，這就是為什麼現在一些主流框架採用虛擬dom的方式，通過diff演算法來區域性修改dom。

3.3 優化3：元件模型抽象

最終實現：

class Component{
  constructor(id, opts = {data:[]}){
    this.container = document.getElementById(id);
    this.options = opts;
    this.container.innerHTML = this.render(opts.data);
  }
  registerPlugins(...plugins){
    plugins.forEach(plugin => {
      const pluginContainer = document.createElement('div');
      pluginContainer.className = '.slider-list__plugin';
      pluginContainer.innerHTML = plugin.render(this.options.data);
      this.container.appendChild(pluginContainer);
      
      plugin.action(this);
    });
  }
  render(data) {
    /* abstract */
    return ''
  }
}

class Slider extends Component{
  constructor(id, opts = {data:[], cycle: 3000}){
    super(id, opts);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = opts.cycle || 3000;
    this.slideTo(0);
  }
  render(data){
    const content = data.map(image => `
      <li class="slider-list__item">
        <img src="${image}"/>
      </li>    
    `.trim());
    
    return `<ul>${content.join('')}</ul>`;
  }
  getSelectedItem(){
    const selected = this.container.querySelector('.slider-list__item--selected');
    return selected
  }
  getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
  }
  slideTo(idx){
    const selected = this.getSelectedItem();
    if(selected){ 
      selected.className = 'slider-list__item';
    }
    const item = this.items[idx];
    if(item){
      item.className = 'slider-list__item--selected';
    }

    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
  }
  slideNext(){
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
  }
  slidePrevious(){
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
  }
  addEventListener(type, handler){
    this.container.addEventListener(type, handler);
  }
  start(){
    this.stop();
    this._timer = setInterval(()=>this.slideNext(), this.cycle);
  }
  stop(){
    clearInterval(this._timer);
  }
}

const pluginController = {
  render(images){
    return `
      <div class="slide-list__control">
        ${images.map((image, i) => `
            <span class="slide-list__control-buttons${i===0?'--selected':''}"></span>
         `).join('')}
      </div>    
    `.trim();
  },
  action(slider){
    let controller = slider.container.querySelector('.slide-list__control');
    
    if(controller){
      let buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
      controller.addEventListener('mouseover', evt=>{
        var idx = Array.from(buttons).indexOf(evt.target);
        if(idx >= 0){
          slider.slideTo(idx);
          slider.stop();
        }
      });

      controller.addEventListener('mouseout', evt=>{
        slider.start();
      });

      slider.addEventListener('slide', evt => {
        const idx = evt.detail.index;
        let selected = controller.querySelector('.slide-list__control-buttons--selected');
        if(selected) selected.className = 'slide-list__control-buttons';
        buttons[idx].className = 'slide-list__control-buttons--selected';
      });
    }    
  }
};

const pluginPrevious = {
  render(){
    return `<a class="slide-list__previous"></a>`;
  },
  action(slider){
    let previous = slider.container.querySelector('.slide-list__previous');
    if(previous){
      previous.addEventListener('click', evt => {
        slider.stop();
        slider.slidePrevious();
        slider.start();
        evt.preventDefault();
      });
    }  
  }
};

const pluginNext = {
  render(){
    return `<a class="slide-list__next"></a>`;
  },
  action(slider){
    let previous = slider.container.querySelector('.slide-list__next');
    if(previous){
      previous.addEventListener('click', evt => {
        slider.stop();
        slider.slideNext();
        slider.start();
        evt.preventDefault();
      });
    }  
  }
};

const slider = new Slider('my-slider', {data: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
     'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
     'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
     'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});

slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
複製程式碼

最後

我一直覺得一篇文章過多的程式碼會讓讀者感到視覺疲勞，但實在是沒有需要修改的地方，非常建議大家一步步的敲一遍，深刻體會月影大大的javascript是多麼的優雅?~~

擴充套件：月影大大的‘漫談函數語言程式設計’

擴充套件：月影大大的‘從一道坑人的面試題說函數語言程式設計’

360前端星學習筆記-如何學好JavaScript(2)
2018-06-09
前端筆記JavaScript
360前端星計劃學習-html
2018-06-02
前端HTML
JavaScript設計模式學習筆記
2020-05-27
JavaScript設計模式筆記
JavaScript 學習筆記
2024-06-10
JavaScript筆記
JavaScript學習筆記
2021-01-05
JavaScript筆記
好程式設計師web前端培訓JavaScript學習筆記DOM
2020-05-09
程式設計師Web前端JavaScript筆記
好程式設計師web前端培訓JavaScript學習筆記--jQuery
2020-04-29
程式設計師Web前端JavaScript筆記jQuery
Linux 學習筆記--任務計劃 crontab
2020-04-09
Linux筆記
JavaScript學習筆記13
2020-10-19
JavaScript筆記
javaScript argument 學習筆記
2021-09-09
JavaScript筆記
JavaScript學習筆記（二）
2021-09-09
JavaScript筆記
JavaScript入門學習學習筆記（上）
2020-10-23
JavaScript筆記
Javascript高階程式設計學習筆記
2020-11-07
JavaScript程式設計筆記
好程式設計師web前端培訓學習筆記Vue學習筆記一
2020-04-28
程式設計師Web前端筆記Vue
好程式設計師web前端培訓分享JavaScript學習筆記Promise
2020-07-02
程式設計師Web前端JavaScript筆記Promise
好程式設計師web前端培訓分享JavaScript學習筆記cookie
2020-05-07
程式設計師Web前端JavaScript筆記Cookie
好程式設計師web前端培訓分享JavaScript學習筆記SASS
2020-05-12
程式設計師Web前端JavaScript筆記
好程式設計師web前端培訓學習筆記Vue學習筆記之二
2020-04-28
程式設計師Web前端筆記Vue
javascript學習筆記--splice、slice
2018-10-17
JavaScript筆記
學習JavaScript的原型筆記
2019-02-16
JavaScript原型筆記
JavaScript正則學習筆記
2020-11-22
JavaScript筆記
JavaScript學習筆記（八）—— 補
2019-02-09
JavaScript筆記
好程式設計師學習筆記：函式
2019-06-10
程式設計師筆記函式
360前端星計劃—深入CSS
2018-06-02
前端CSS
動態規劃學習筆記
2024-08-03
動態規劃筆記
分數規劃學習筆記
2024-06-07
筆記
好程式設計師web前端培訓分享JavaScript學習筆記之設計模式
2020-07-02
程式設計師Web前端JavaScript筆記設計模式
好程式設計師web前端培訓分享JavaScript學習筆記分支結構
2020-07-01
程式設計師Web前端JavaScript筆記
好程式設計師web前端培訓分享JavaScript學習筆記之正則
2020-05-08
程式設計師Web前端JavaScript筆記
好程式設計師web前端教程分享JavaScript學習筆記之Event事件二
2020-05-09
程式設計師Web前端JavaScript筆記事件
好程式設計師web前端培訓分享JavaScript學習筆記之陣列
2020-05-13
程式設計師Web前端JavaScript筆記陣列
JavaScript學習筆記 - 原生函式
2018-09-29
JavaScript筆記函式
javascript學習筆記，二、變數
2020-11-18
JavaScript筆記變數
JavaScript入門-學習筆記(一)
2021-01-04
JavaScript筆記
JavaScript學習筆記——基礎部分
2020-12-27
JavaScript筆記
JavaScript DOM 程式設計藝術學習筆記01
2018-05-12
JavaScript程式設計筆記
JavaScript DOM 程式設計藝術學習筆記 02
2018-05-13
JavaScript程式設計筆記
360前端星計劃-深入css（3）
2018-06-06
前端CSS