这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
JavaScript 编码原则之各司其责
1. JavaScript 好代码的标准
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
例子： 深夜食堂
版本一
版本二（真正符合JavaScript编码原则）
版本三（纯CSS样式改变）
for属性规定label与哪个表单元素绑定。在点击label 时，会自动将焦点移动到绑定的元素上，比如使用 checkbox或者radio时，如果没有绑定的话，需要鼠标点中小方框才可以选中或不选, 绑定以后点击 label就可以改变checkbox 的值了，用户使用起来就比较方便。
JavaScript编码原则之组件封装
例子：实现轮播图
结构（HTML）：轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
表现（CSS）：使用CSS绝对定位将图片重叠在同一个位置；轮播图切换的状态使用修饰符 modifier ；轮播图的切换动画使用CSS transition
行为（JS）：API
- Slider
-
- +getSelectedItem()
-
- +getSelectItemIndex()
-
- +slideTo()
-
- +slideNext()
-
- +slidePrevious()
- 控制流，使用自定义事件来解耦
组件封装
组件是指Web页面上抽出来一个个包含模版（HTML)、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
基本方法
- 结构设计
- 展现效果
- 行为设计 ：API（功能）Event（控制流）
重构：模块化
解耦
将HTML模板化，更易于扩展
组件化总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构：插件化、模板化、抽象化（组件框架）
JavaScript 编码原则之过程抽象
过程抽象
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称之为过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高价函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常见的高阶函数
- Once 只执行一次
- Throttle 节流
- Debounce 防抖
- Consumer/2 延时
- Iterative 遍历
编程范式
- 命令式
- 声明式
Leftpad 事故背景引入
事件本身的槽点：
- NPM模块粒度
- 代码风格
- 代码质量/效率
- 代码更简洁
- 效率提升
- 性能更好
JavaScript代码质量优化之路
运行好算法思维和数学思维来编写优雅代码。
