摘要：前言如何寫好這門課是由技術專家月影老師講的。控制流設計原則為什么要用到事件機制呢因為要降低結構之間的耦合度，如果不這樣做的話，我們需要做雙向的操控的。

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

這堂課的ppt

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

需求:

點擊紅色按鈕

背景變成黑色

字體color由黑色變成白色

紅色按鈕變成綠色

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直接去修改了元素的樣式。

并且代碼只能看出修改了一些元素的樣式，看不出這坨代碼需要完成哪些需求。

假設：如果以后想改需求了，比如開燈時字體變為紅色，或者需要添加一些功能，那我就得去重新看代碼，去改這一坨代碼，這樣的話，維護起來就非常難。

lightButton.onclick = function(evt) {
  if(main.className === "light-on"){
    main.className = "light-off";
  }else{
    main.className = "light-on";
  }
}

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

  

    
  
  

    
    今天回到家，
    煮了點面吃，
    一邊吃面一邊哭，
    淚水滴落在碗里，
    沒有開燈。
    
  
  
     
  

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

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

整體思路

圖片結構是一個列表型結構，所以主體用

和

• 使用 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：控制流設計 (下方小圓點與左右按鈕設計)

  控制結構

  自定義事件

      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 控制流設計原則

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

  舉個栗子