1. 各司其职
- 在JS里面不要直接控制CSS
- 可以使用class来表示状态
- 甚至可以省略JS，使用CSS高级功能，伪类选择器来控制样式
2. 组件封装
-
组件是web页面上抽出来的一个个包含模板，功能和样式的单元，好的组件具备封装性，正确性，扩展性，复用性
-
例子
1.轮播图
- HTML（结构设计） 是一个无序列表的结构
- CSS（展示效果）
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换状态使用修饰符
- 轮播图的切换动画使用CSS transition
- JS 控制切换的行为（行为设计）
- getSelectedItem() 获取当前选中的项
- getSelectedItemIndex() 获取当前选中项的索引（位置），通常返回一个数字，表示当前选中的项在列表中的位置。
- slideTo() 让滑动组件跳转到指定的项或者位置
- slideNext() 使滑动组件向前滑动到下一个项
- slidePrevious() 使滑动组件向前滑动到上一个项
- Event(自定义事件) 控制流
3. 三次重构
- 插件化（功能都在一个个插件里，不要哪个功能注释掉就行，但是存在问题，组件的结构还是在HTML中，需要手动注释HTML结构）
- 模板化（将生成HTML结构的代码也放到插件里）
- 抽象为通用组件
4. 过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
5. 过程抽象的例子
-
任务列表勾选消除 1.为了保证函数只被调用一次，可以使用高阶函数，调用的是高阶函数返回的那个函数，调用一次以后将fn设置为null，便不会再调用fn
2.高阶函数：1.以函数为参数，2.以函数为返回值，3.常用于作为函数装饰器 3.常用的高阶函数 1. Once 一次性函数 2. Throttle 节流函数（鼠标移动，页面滚动）
3. Debounce 防抖函数（自动保存）
4. Consumer / 2 延时调用效果
5. Iterative 可迭代方法（可迭代就每个都调用一次，不可迭代就只调用一次）
6. 纯函数
行为是没有副作用的，结果是可预测的；正确性很好测试；在库里尽量使用纯函数
7. 非纯函数
会改变外部状态，测试要构造出特定的外部环境
8. 命令式和声明式编程语言
命令式强调过程，声明式更加简洁，声明式天然具有更好的拓展性
9. JavaScript 代码质量优化之路
- 例子 1.交通灯循环状态切换 1.方法1（setTimeOut嵌套切换）
2.方法2（数据抽象）
3.方法3（过程抽象）
4.方法4（异步+函数式）
2.判断是否是4的幂
1.方法1（循环判断是否/=4为1）
2.方法2（位操作）
3.方法3（自己与自己-1，再与0xAAAAAAAAAAAAA）
4.方法4（使用正则，1后面有若干2个0，则是4的幂）
3.洗牌
1.思路：在牌中抽一张牌出来放到最后的位置，然后该牌的位置不动，再在剩下的牌里抽一张牌放到最后的位置，直到只剩一张牌
2.思路：使用生成器，不用跑完全部牌
4.分红包
1.切西瓜法（每次都切最大的那部分，但这样分出来的红包比较均匀，不刺激）
2.抽牌法
