写好javaScript

- 各司其职

1. 让html，javascript，css职责分离
2. 应当避免不要的由js直接操作样式
3. 可以用class来表示状态
4. 存展示交互类需求零js方案

- 组件分装

1. 组件封装：组件是指web页面上抽出来一个个包含模板、功能和样式的单元。好的组件具备封装性、正确性、扩展性、复用性
2. 组件封装的基本方法：结构设计、展现效果、行为设计（功能、控制流）。
3. 控制流：用自定义事件来解耦。
4. 解耦：将HTML模板化，更易于扩展。将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。
   组件框架抽象：将组件通用模型抽象出来。
5. 三次重构：插件化、模板化、抽象化。

- 过程抽象

1. 将组件通用模型抽象出来
2. 用来处理局部细节控制的一些方法，函数式编程思想的基础应用。
3. 高阶函数Once：为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
4. 常用的高阶函数：Once、Throttle(节流函数)、Debounce、Consumer/2(每隔一个时间调用一次)、Iterative(批量操作)。
5. 编程范式：命令式（趋向于怎么做）与声明式（趋向于做什么）。、

javascript优化案例

红绿灯案例

1. 正常实现是通过嵌套setTime定时器里面改变className,利用class去实现交通灯
2. 数据抽象，通过用数组定义红绿灯状态和延迟，利用高阶函数实现循环的操作。
3. 过程抽象
4. 异步加函数式

总结

通过本次课程学习，我能够进一步了解各个部分代码的职责，对代码的规范化以及在代码如何合理的分配到各个功能上有了更深层次的理解，能够用css简易实现的就不需要在写javascript来实现，存在展示交互类，应该需求零js方案，在组件封装上，我们应该将页面划分为一个个模块，这些模块我们能够进行复用，扩展。