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

一、本堂课重点内容：

• 如何写好JavaScript

  • 各司其责
  • 组件封装
  • 过程抽象

• 写代码应该关注的要点

二、详细知识点介绍：

原则：各司其职、组件封装、过程抽象；

1. 各司其职：

   • 应当避免不必要的由 JS 直接操作样式

   • 可以用 class 来表示状态

   • 纯展示类交互寻求零 JS 方案

2. 组件封装：

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

   • 结构设计

   • 展现效果

   • 行为设计

     • API （功能）
     • Event （控制流）

   插件化、模板化、抽象化（组件框架）

3. 过程抽象：

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

   方法：使用高阶函数（以函数为参数并返回函数的函数，函数装饰器）

   常用的高阶函数：

   • Once：一次性函数，让函数只执行一次；

   • Throttle：截流函数，让函数在指定时间内不能重复调用；

   • Debounce：防抖函数，让函数在参数低于指定阈值时不会调用；

   • Consumer：延时函数，让函数的重复调用时至少延时指定时间；

   • Iterative：迭代函数，让函数实现批量操作；

   尽量使用纯函数，参数不变时返回值不变，不改变外部状态；

编程语言风格：

• 命令式：怎么做
• 声明式：做什么（可扩展性更强）

JS既有命令式特点，也有声明式特点；

三、课后个人总结：

• 想要写好JavaScript，就要注意做到“各司其职、组件封装、过程抽象”三个要点；

• 前端有时也需要运用算法来进行性能优化；