这是我参与「第五届青训营 」笔记创作活动的第5天
如何写好JavaScript
各司其责
- HTML/CSS/JS各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件是指Web页面上抽出来一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。
基本方法
-
结构设计
-
展现设计
-
行为设计
API（功能）
Event（控制流）
总结
-
组件设计的原则：封装性、正确性、扩展性、复用性。
-
实现组件的步骤：结构设计、展现设计、行为设计。
-
三次重构
插件化
模板化
抽象化（组件框架）
过程抽象
- 用来处理局部细节控制的一些方法
-
Once为了能够“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象
-
高阶函数以函数作为参数；以函数作为返回值；常用于作为函数装饰器
-
常用的高阶函数
Throttle code.h5jun.com/gale/1/edit…
Debounce code.h5jun.com/wik/edit?js…
Consumer code.h5jun.com/roka/7/edit…
Iterative code.h5jun.com/kapef/edit?…
-
- 函数式编程思想的基础应用
-
命令与声明式
-
例子
Toggle-命令式 code.h5jun.com/tuda/2/edit…
Toggle-声明式 code.h5jun.com/nal/3/edit?…
Toggle-三态 code.h5jun.com/foqo/2/edit…
-
总结
过程抽象/HOF/装饰器
命令式/声明式
-
写代码应该关注的要点
写代码最应该注重什么
- 风格
- 效率
- 约定
- 使用场景
- 设计
- ...
当年Left-pad 事件
很明显第二种方法比第一种性能更好，而第三种方法又比第二种代码更简洁，效率更高。从这个例子中，我们更好的理解写代码应该注意什么。
