JavaScript(4) ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第9天

虽然前面的代码我觉得很不错，也觉得整齐，但是他还是有一个很好的改进空间，但是我还是想不出来，太菜了

那就听听月影老师的讲解和代码吧

缺点

1.不够灵活

若要用刚刚写好的代码，比如改变左右的按钮，则我们需要改变html-css-js里的代码，这样非常麻烦

解决方法：重构，插件化

首先，重新写构造函数，先看优化前和优化后的构造函数

改造前，改造后

很多代码都在构造函数里，不是一个很好的现象

所以我们要把它，插件化

具体是怎么做的呢，来看月影老师给出的代码

1.首先我们定义一个方法组registerPlugins

registerPlugins(...plugins){
    plugins.forEach(plugin => plugin(this));
  }

传入的形参是一个数组方法

在函数内部里

forEach遍历了每个方法，并且返回这个方法

到底有什么用呢？

先直接看到最后

2.看最后如何使用这个方法

slider.registerPlugins(pluginController, pluginPrevious, pluginNext);

可以看出，slider.registerPlugins(...)

是直接注册进了slider函数里

slider函数里有了这些方法，就可以使用，slider函数在前面的代码我们就接触过

所以通俗来说，就是使用registerPlugins(...)里的组件

我们再看组件里有哪些方法

3.1.registerPlugins里的方法一：pluginController

不难看出，就是控制小圆点的js（和之前的代码如出一辙）

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';
    });
  }  
}

注意：此处的slider这个形参到底是怎么来的 从前面的代码可以看出，括号里的this，就是slide的形参，那this指向的就是使用它的函数（箭头函数this指向包裹他的函数的this）👇

registerPlugins(...plugins){
    plugins.forEach(plugin => plugin(this));
  }

也就是，slider

slider.registerPlugins(pluginController, pluginPrevious, pluginNext);

3.2.registerPlugins里的其他方法

//表示上一页按钮的
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();
    });
  }  
}

然后定义完成后，就可以注册使用啦

此重构方法的好处就是，如果咱们需要舍去小圆点的功能方法，那我们在注册的时候，把装备卸下来：

slider.registerPlugins(pluginPrevious, pluginNext);

就可以实现，反之添加别的装备时，就创建方法并且注册，非常好用

既然方法可以插件化，那么html也是可以模板化的！

明天继续！