【青训营】- 如何写好的JS代码（上）

小铭子
498 阅读5分钟

写好JS的原则

  1. 各司其职
  2. 组件封装
  3. 过程抽象 image.png

各司其职

前端行走江湖有三大法宝：html、css、js。我们要让其发挥好自个的作用，html负责定义网页的结构，css负责展示各个元素的样式，js负责网页的行为交互。
本着各司其职的原则，我们来实现个轮播图功能：

version1

  1. 先定义html结构：
<div id="mySlider" class="slider-list">
    <ul>
      <li class="slider-list__item--selected">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F89%2F41%2F2857d8f9b35472a.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632303465&t=17efe3a5d18cb60df2a0dbf2e3008ce5" alt="">
      </li>
      <li class="slider-list__item">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Fback_pic%2F03%2F72%2F40%2F0257b93bd1c142f.jpg&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632303465&t=bb0a16e7b527c1bf7bad8d9b0e9e81b2" alt="">
      </li>
      <li class="slider-list__item">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F89%2F41%2F2857d8f9b35472a.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632303465&t=17efe3a5d18cb60df2a0dbf2e3008ce5" alt="">
      </li>
    </ul>
    <a class="slide-list__next"></a>
    <a class="slide-list__previous"></a>
    <div class="slide-list__control">
      <span class="slide-list__control-buttons slide-list__control-buttons--selected"></span>
      <span class="slide-list__control-buttons"></span>
      <span class="slide-list__control-buttons"></span>
    </div>
</div>
  1. 设置样式
*,html {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
.slider-list {
  position: relative;
  width: 1200px;
  height: 566px;
}
.slider-list ul{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.slider-list__item,
.slider-list__item--selected{
  position: absolute;
  transition: opacity 1s;
  opacity: 0;
  text-align: center;
}

.slider-list__item--selected{
  transition: opacity 1s;
  opacity: 1;
}

.slide-list__previous,
.slide-list__next {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  width: 30px;
  height: 50px;
  text-align: center;
  font-size: 24px;
  line-height: 50px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s;
}

.slider-list:hover .slide-list__previous,
.slider-list:hover .slide-list__next {
  opacity: 1;
}
.slide-list__previous {
  left: 0;
}
.slide-list__next {
  right: 0;
}
.slide-list__previous:after {
  content: '<';
}

.slide-list__next:after {
  content: '>';
}
.slide-list__control{
  position: relative;
  display: table;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 5px;
  border-radius: 12px;
  bottom: 30px;
  margin: auto;
}
.slide-list__control-buttons,
.slide-list__control-buttons--selected{
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin: 0 5px;
  background-color: white;
  cursor: pointer;
}

.slide-list__control-buttons--selected {
  background-color: red;
}
  1. js实现轮播交互
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();
      });
      
      this.container.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 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() {
    const 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('mySlider');
slider.start();

image.png

组件封装

什么是组件？
组件是页面上抽取出来一个个包含模板（html）、功能（JS）和样式（CSS）的单元。

本着组件封装的原则来审视代码，上述实现轮播图代码虽然实现了功能，具备了正确性，但是有很大问题的，在constructor构造函数中有着很多交互逻辑代码，可读性、可扩展性较低，因而我们可以对JS代码做进一步优化，提取切换轮播图的控制元素抽象成插件，具体实现如下：

version2

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));
  }
  ...
}
// button控制切换的插件
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('mySlider');
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();

什么是好的组件？
好的组件具备封装性、正确性、扩展性、复用性。

上面轮播图version2的版本，已经实现了正确性、扩展性，将上一张/下一张/小圆点控制元素都抽象成插件功能，按需注入，但是复用性并不高，未使用的插件html元素依旧显示页面，我们还可做进一步优化，将html结构模板化，新增render函数动态生成html结构，具体实现代码如下：

version3

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;
  }
  // 模板生成html
  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);
    });
  }
  ...
}

version3的代码已经有了很大改进，html模板化后，具备了正确性、扩展性、复用性，控制元素的功能就真正解耦，在一个项目中可以很好地使用，但如果考虑不同项目不同业务场景使用，组件封装性、扩展性、复用性就还不够强，我们还有改进的空间。可以将通用的组件框架抽象出来作为父类，将轮播的功能作为子类，具体代码实现如下：

version4

class Component{
  constructor(id, opts = {name, 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 = `.${name}__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 = {name: 'slider-list', 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>`;
  }
  ...
}

version1 -> version2 -> version3 -> version4 的代码，从功能实现，逐步优化改进，做到了正确性、扩展性、复用性、封装性。终极版本version4的代码才落地好的组件原则，称为好的代码。

过程抽象

什么是过程抽象？
过程抽象是编码的原则，也是函数式编程思想的基础应用，用来处理局部细节控制的方法。高阶函数就是过程抽象的具体应用。 image.png

我们来看个具体例子，有一个checkbox列表，点击取消勾选之后会消失，消失的时候有个动画效果。

image.png

const list = document.querySelector('ul');
const buttons = list.querySelectorAll('button');
buttons.forEach((button)=> {
 button.addEventLisner('click', evt => {
    const target = evt.target;
    target.parentNode.className = 'completed';
    setTimeout(()=> {
       list.removeChild(target.parentNode)
    }, 2000)
 })
})

上述场景，如果频繁点击会报dom不存在的错，因此需要做点击操作次数限制，点击取消的事件逻辑只执行一次。

image.png 我们为了能够让“只执行一次”的需求覆盖不同的事件处理，可以将这个需求剥离出来，实现一个Once函数，具体代码如下：

function once(fn){
   return function(...args){
      if(fn){
         const ret = fn.apply(this, args);
         fn = null;
         return ret;
      }
   }
}
buttons.forEach((button)=> {
 button.addEventLisner('click', once(evt => {
    const target = evt.target;
    target.parentNode.className = 'completed';
    setTimeout(()=> {
       list.removeChild(target.parentNode)
    }, 2000)
 })
}));

类似Once函数，还有其他高阶函数：Throttle节流、Debounce防抖、Consumer异步消耗、Iterative迭代等，都是使用过程抽象思想进行编程的。

总结

我们要想写好JS代码，需要时刻谨记各司其职、组件封装、过程抽象三大原则。我们逐步优化改进成好的代码，到底有什么作用呢？比如需要修改库文件的某个方法，就可以采用高阶函数的思想编程，入参是该函数，通过重写该函数来扩展相应功能，最后再返回该函数，这样的写法是无侵入式的，不会去动到原来库文件代码，也相应实现修改库文件方法的目的。

avatar
文章
阅读
粉丝