360前端星学习笔记-如何写‘好’JavaScript

摘要：前言如何写好这门课是由技术专家月影老师讲的。控制流设计原则为什么要用到事件机制呢因为要降低结构之间的耦合度，如果不这样做的话，我们需要做双向的操控的。

《如何写‘好’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 控制流设计原则

  为什么要用到事件机制呢？因为要降低结构之间的耦合度，如果不这样做的话，我们需要做双向的操控的。

  举个栗子