写好JS的一些原则
各司其责
让HTML、CSS和Javascript职能分离。
总结:
- HTML/CSS/JS 各司其责
- 应当避免不必要的由jS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。
好的组件具备封装性、正确性、扩展性、复用性。
重构:插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构:模板化
解耦
- 将HTML模板化,更易于扩展
重构:组件框架
抽象
- 将通用的组件模型抽象出来
总结:
- 组件设计的原则:封装性、正确性、扩展性、复用性
- 实现组件的步骤:结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化(组件框架)
过程抽象
应用函数式编程思想。
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
为了能够让“只执行一次“的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
高阶函数:
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用高阶函数:
- Once
- Throttle
- Debounce
- Consumer
- iterative
编程范式
- 命令式
- 声明式
总结:
- 过程抽象/HOF/装饰器
- 命令式/声明式