前端与 HTML | 青训营笔记——第三课
这是我参与「第五届青训营 」伴学笔记创作活动的第 3天
一、如何写好JavaScript?
- 各司其责：让HTML、CSS和JavaScript职能分离
- 组件封装：好的UI组件具备正确性、扩展性、复用性
- 过滤抽象：应用函数式编程思想
二、深夜食堂——结论
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
三、重构：插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
四、重构：模板化
解耦
- 将HTML模板化，更易于扩展
五、组件框架
抽象
- 将组件通用模型抽象出来
六、组件封装总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构：插件化、模板化、抽象性（组件框架）
七、过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
八、高阶函数
- once：为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象
- HOF：以函数作为参数，以函数作为返回值，常用于作为函数装饰器
- Throttle：比如time=300
- Debounce
- Consumer/2
- Iterative
九、编程范式
列子
- Toggle-命令式
- Toggle-声明式
- Toggle-三态
十、编程范式总结
- 过程抽象/HOF/装饰器
- 命令式/声明式
十一、Leftpad事件
事件本身的槽点：
- NPM模块粒度
- 代码风格
- 代码质量/效率
优点：
- 代码更简洁
- 效率提升
十二、题型
交通灯状态切换
实现一个切换多个交通灯状态切换的功能
