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

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

---

课程介绍

本节课从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”，并从 JS 出发，总结其他语言编码可遵循的共性原则，由浅入深，该小节将集中讲解三大原则之一的“各司其职”原则。

课程重点

1. JavaScript 好代码的标准
2. HTML/CSS/JS 各司其责

写好JS 的一些原则

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

各司其责

组件封装

组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。 例子： 用原生JS写一个电商网站的轮播图，应该怎么实现？

• 结构设计：HTML
• 轮播图是一个典型的列表结构，我们可以使用无序列表元素来实现
• 展现效果：CSS
  • 表现：CSS
    • 使用CSS绝对定位将图片重叠在同一个位置
    • 轮播图切换的状态使用修饰符（modifier）
    • 轮播图的切换动画使用CSS transition
• 行为设计：API
  • 行为：JS
    • API设计应保证原子操作，职责单一，满足灵活性
• 行为：控制流
  • 使用自定义事件来解耦

总结：基本方法

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

过程抽象

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

操作次数限制

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

Once

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

高阶函数

• 以函数作为参数
• 以函数作为返回值
• 常用为作为函数装饰器
• 常用高阶函数
  • Once
  • Throttle
  • Debounce
  • Consumer/2
  • Iterative

编程范式

• 命令式与声明式

• Toggle-命令式
• Toggle-声明式
• Toggle-三态

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

引用参考

字节青训营第三节课跟着月影学JavaScript