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

如何写好JavaScript？

• 各司其职：让HTML CSS JS职能分离
• 组件封装：好的UI组件具备正确性 拓展性 复用性
• 过程抽象：采用函数式编程思想

JavaScript编码规则之各司其职

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

案例：浅色/深色模式切换

• 方案一：直接由JS修改样式
• 方案二：由JS修改类名
• 方案三：纯CSS方案，通过checkbox元素的checked伪类和label元素的for属性控制样式

JavaScript编码规则之组件封装

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

案例：原生实现轮播图 改进：

• 使用插件轮播图效果
• 解耦将HTML模板化
• 抽象将组件通用模型抽象出来

实际运用 二次封装fetch请求 可通过插件自由拓展功能

JavaScript编码规则之过程抽象

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

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

高阶函数

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

常用的高阶函数：

• Once（只执行一次）
• Throttle（节流）
• Debounce（防抖）
• 等等

回调函数：把函数当作一个参数传到另外一个函数中，当需要用这个函数时，再回调运行()这个函数

回调函数是一个闭包，也就是说它能访问到其外层定义的变量

编程范式

• 命令式
• 声明式

总结

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