如何写好 JavaScript

什么才是好的 JavaScript 代码？

写好 JS 的一些原则

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

各司其职

• HTML/CSS/JS 各司其责
• 应当避免不必要的由 JS 直接操作样式
• 可以用 class 来表示状态
• 纯展示类交互寻求零 JS 方案

例子

实现一个网站主题切换

版本一

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if(e.target.innerHTML === '🌞') {
    body.style.backgroundColor = 'black';
    body.style.color = 'white';
    e.target.innerHTML = '🌜';
  } else {
    body.style.backgroundColor = 'white';
    body.style.color = 'black';
    e.target.innerHTML = '🌞';
  }
});

上面这段JavaScript代码的逻辑

1. 获取切换按钮元素
2. 绑定事件
3. 判断当前主题
4. 修改body的背景颜色
5. 修改 color 的颜色
6. 修改主题图标

这段代码实现了功能，逻辑清晰；但是违背了各司其责 的原则，这段代码修改了元素样式，又修改了元素结构

版本二

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if (body.className !== 'night') {
    body.className = 'night';
  } else {
    body.className = '';
  }
});

通过版本二 我们可以明显看到代码量的减少，逻辑清晰、只修改了；想要调整颜色，也只需要调整css样式、

版本三

#modeCheckBox {
  display: none;
}

#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

版本三 我们使用纯css方案实现，无需 JS，通过 :checked伪类+兄弟选择器来实现，纯css方案，可能兼容性不太好，因为用到了兄弟元素选择器

组件封装

例子 用原生js 实现一个轮播图

结构 HTML

<div id="my-slider" class="slider-list">
  <ul>
    <li class="slider-list__item--selected">
      <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png">
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg">
    </li>
    <li class="slider-list__item">
      <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg">
    </li>
    <li class="slider-list__item">
      <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg">
    </li>
  </ul>
</div>

CSS

#my-slider{
  position: relative;
  width: 790px;
}

.slider-list ul{
  list-style-type:none;
  position: relative;
  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;
}

• 使用 CSS 绝对定位将图片重叠在同一个位置
• 通过修改透明度的方式了来实现图片的切换
• 轮播图切换的状态使用修饰符（modifier）
• 轮播图的切换动画使用 CSS transition

JS 行为：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());
  }
  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);  
  }
}

const slider = new Slider('my-slider');
slider.slideTo(3);

完整代码
通过上面的代码， 可以明显的看到目前JS代码是耦合性非常高

使用自定义事件来解耦

注意 需要把想要传递的参数包裹在一个包含detail属性的对象，否则传递的参数不会被挂载

JS 行为：控制流

const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)

解耦后完整代码

总结：基本方法

• 结构设计
• 展现效果
• 行为设计
  • API （功能）
  • Event （控制流）

重构：插件化

解耦

• 将控制元素抽取成插件
• 插件与组件之间通过依赖注入方式建立联系

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('my-slider');
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();

插件化后完整代码

重构：模板化

解耦

• 将HTML模板化，更易于扩展

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;
    this.slideTo(0);
  }
  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>`;
  }
}

模板化 完整代码

组件框架

抽象

• 将组件通用模型抽象出来

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

抽象后完整代码

总结

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

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

过程抽象

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

例子 操作次数限制

完整代码

• 一些异步交互
• 一次性的HTTP请求

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

改进 高阶函数（HOF）

为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
图中把开门的动作抽离出来，不管门后是什么都不会影响开门。

function once(fn) {
  return function(...args) {
    if(fn) {
      const ret = fn.apply(this, args);
      fn = null;
      return ret;
    }
  }
}

HOF （高阶函数）

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

function HOF0(fn) {
   return function(...args) {
     return fn.apply(this, args);
   }
}

这里的HOF0我们称为等价函数（HOF0==fn），一般的高级函数都是基于这个扩展出来的;

编程范式

现在主流的编程范式有三种：

• 结构化编程（structured programming）/ 命令式
• 面向对象编程（object-oriented programming）/ 命令式
• 函数式编程（functional programming）/ 声明式

函数式编程

• 函数是一等公民。一等公民的含义：
  • 它可以按需创建；
  • 它可以存储在数据结构中；
  • 它可以当作参数传给另一个函数；
  • 它可以当作另一个函数的返回值。
• 纯函数。所谓纯函数，是符合下面两点的函数：
  • 相同的输入，产生相同的输出
  • 无可观察的副作用
  • 不依赖于外部状态
  • 
• 惰性求值。惰性求值是一种求值策略，它将求值的过程延迟到真正需要这个值的时候。
• 不可变数据。函数式编程的不变性主要体现在值和纯函数上。值类似于 DDD 中的值对象，一旦创建，就不能修改，除非重新创建。值保证不会显式修改一个数据，纯函数保证不会隐式修改一个数据。当你深入学习函数式编程时，会遇到无副作用、无状态和引用透明等说法，其实都是在讨论不变性。
• 递归。函数式编程用递归作为流程控制的机制，一般为尾递归。

命令式编程 (Imperative)

• 命令式编程最大的特点，也是有别于其它编程范式的特征就是：命令式编程关注的是过程，
• 按照程序控制流程一步一步走下去的编程风格就是命令式编程

let list = [1, 2, 3, 4];
let mapl = [];
for(let i = 0; i < list.length; i++) {
  mapl.push(list[i] * 2);
}

声明式编程 (Declarative)

除了命令式之外可以说都是声明式

• 与命令式编程关注过程不同，声明式编程更多的是关注结果。它只表达计算的逻辑而不去描述其中的控制流程，即告诉计算机需要计算什么，而不是教计算机如何去计算
• 声明式天然的比命令式具有更高的可扩展性

let list = [1, 2, 3, 4];
const double = x => x * 2;
list.map(double);

总结

• 过程抽象 / HOF / 装饰器
• 命令式 / 声明式