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

写好JavaScript

一定要对自己的代码上心，不能说只是解决问题，应当去寻找最优解

三个原则：

各司其则： HTML、CSS、JavaScript职能分离
组件封装：好的UI组件具备正确性、扩展性、复用性
过程抽象：应用函数式变成思想

组件封装

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

听了月影老师的课，了解到了网上的组件库是如何进行封装的。下面我将通过分析月影老师的轮播图代码，具体讲解如何进行组件封装

首先说明基本的案例，就是HTML中写入要轮播的图片，CSS写样式，JS控制行为进行图片的轮播，实现轮播的具体效果，在这个最简单最基础的案例中我学到了组件封装需要用到es6的class类，下面将实现过程的关键过程写在注释中

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');
    const previous = this.container.querySelector('.slide-list__previous');
    const next = this.container.querySelector('.slide-list__next');
  }
  //得到当前被选中的图片
  getSelectedItem(){}
  //得到当前图片的id
  getSelectedItemIndex(){}
  //切换到id为idx的图片
  slideTo(idx){}
  //下一张
  slideNext(){}
  //上一张
  slidePrevious(){}
  //轮播开始,同时清除定时上一个定时器
  start(){}
  //停止轮播，清除定时器
  stop(){}
}
//创建轮播图实例对象，并开启轮播图
const slider = new Slider('my-slider');
slider.start();

创建silider类，构造器获取到轮播容器，轮播图片，以及轮播图片切换时间间隔
获取并判断是否有小点点控制，是否有切换前/后一张图片控制，如果有则进行逻辑判断，没有的话就跳过
在类中写入具体的实现方法，实现图片轮播

注意点：在控制组件状态时可以使用自定义事件来进行触发解耦

插件化

通过上面的步骤，这样我们就完成一个对轮播图的简单封装，可是这样有很多缺点，不方便复用。像小点点，切换前后一张功能，有的轮播图有，有的就没有，所以我们想出了插件化的方案将小点点，切换前后一张，搞成插件化形式，将控制元素抽取成插件，插件与组件之间通过依赖注入的方式建立联系,下面给出关键代码，其余逻辑基本一致，插件化就是将那些个小元素抽出来，单独写成一个函数

registerPlugins(...plugins){
    plugins.forEach(plugin => plugin(this));
 }
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);

模板化

通过上面的插件化修改，使得轮播图组件得到了较大的灵活性，我们可以再次细想，平常用的组件库是不是单纯就只有一行HTML标签囊? 如果单纯就只有一行标签就可以解决轮播图的问题，是不是就很方便，很大的减少了HTML中的代码量，灵活性就极大的提升了。所以我们引出模板化的概念,我们只需要在js更改图片数目就可以实现自动修改DOM元素

render(){
    const images = this.options.images;
    const content = images.map(image => `
      <li class="slider-list__item">
        <img src="${image}"/>
      </li>    
    `.trim());

const slider = new Slider('my-slider', {images: [], cycle:3000});

至此我们的组件封装就算可以的了

总结

组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构
1. 插件化
2. 模板化
3. 抽象化（组件框架）

如何写好JavaScript之组件封装 ｜ 青训营笔记

写好JavaScript

三个原则 ：

组件封装

插件化

模板化

总结

如何写好JavaScript之组件封装｜青训营笔记

三个原则：