如何写好JavaScript | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第3天什么才是好的 JavaS

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

什么才是好的 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代码的逻辑

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

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

版本二

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 / 装饰器
命令式 / 声明式

如何写好JavaScript | 青训营笔记