这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
JavaScript 编码原则之各司其责
各司其职
深夜食堂案例结论
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件是指Wb页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元 好的组件具备封装性、正确性、扩展性、复用性。
原生JS轮播图案例
基本方法
结构设计
展现效果
行为设计 : API(功能) Event (控制流)
组件设计的原则：
封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构:
- 插件化
- 模板化
- 抽象化（组件框架)
过程抽象，应用函数式编程思想
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
- 例子：
操作次数限制
- 些异步交互
- 一次性的HTTP请求
Once
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象
高阶函数
以函数作为参数 以函数作为返回值 常用于作为函数装饰器
常用高阶函数
Once
Throttle
Debounce
Consumer/2
Iterative
编程范式
命令式与声明式 例子
-
Toggle命令式
-
Toggle-声明式
-
Toggle-2三态
总结：过程抽象/HOF/装饰器 命令式/声明式
