这是我参与「第五届青训营」伴学笔记创作活动的第三天

3. 如何写好JS

写好JS的一些原则？

各司其职
组件封装
过程抽象

3.1 各司其职

3.1.1 深夜食堂

例子：写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。

版本1

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

版本2

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

版本3（纯展示类）

结论：

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

3.2 组件封装

例子：用原生JS写一个电商网站的轮播图，应该怎么实现？

结构设计：HTML

轮播图是一个典型的列表结构，我们可以用无序列表来实现。

展现效果：CSS

使用CSS绝对定位将图片重叠在同一个位置
轮播图切换的状态使用修饰符（mpdifier）
轮播图切换动画使用CSS transition

行为设计：API

API设计应保证原子操作，职责单一、满足灵活性

行为设计：控制流

使用自定义事件来解耦

总结：基本方法

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

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

3.2.1 重构：插件化

解耦

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

3.2.2 重构：模板化

解耦

将HTML模板化，更易于扩展

3.2.3 重构：组件框架

抽象

将通过的组件模型抽象出来

总结

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

3.3 过程抽象

过程抽象

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

例子

操作次数限制

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

Once

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象

3.4 高阶函数

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

常用高阶函数

Once
Throttle
Debounce
Consumer/2
Iterative

3.5 编程范式

Toggle-命令式

switcher.onclick = function(evt){
  if(evt.target.className === 'on'){
    evt.target.className = 'off';
  }else{
    evt.target.className = 'on';
  }
}

Toggle-声明式

function toggle(...actions){
  return function(...args){
    let action = actions.shift();
    actions.push(action);
    return action.apply(this, args);
  }
}

switcher.onclick = toggle(
  evt => evt.target.className = 'off',
  evt => evt.target.className = 'on'
);

Toggle-三态

function toggle(...actions){
  return function(...args){
    let action = actions.shift();
    actions.push(action);
    return action.apply(this, args);
  }
}

switcher.onclick = toggle(
  evt => evt.target.className = 'warn',
  evt => evt.target.className = 'off',
  evt => evt.target.className = 'on'
);

总结

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

跟着月影学JavaScript【上】 | 青训营笔记