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

JavaScript编程原则

写好JS的三个原则

1. 各司其责
2. 组件封装
3. 过程抽象

各司其责

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

组件封装

• 组件：指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);
   });
 });

Once

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

高阶函数

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

常用高阶函数

• Once
• Throttle
• Debounce
• Consumer/2
• Iterative

编程范式

JavaScript编程原则写好JS的三个原则各司其责组件封装过程抽象例子--操作次数限制Once高阶函数 常用高阶函数编程范式