这是我参与「第五届青训营 」笔记创作活动的第3天。

1.前言

2.学习内容

- JavaScript 编码原则之各司其责

让HTML，CSS，JavaScript职能分离

1. 深夜食堂案例
   版本1版本2版本3

- JavaScript 编码原则之组件封装

• 组件是指web页面上抽出来一个个包含模板（HTML），功能（JS）和样式（CSS）的单元。好的组件具备封装性，正确性，拓展性，复用性。
• 轮播图案例
  

1. 结构：HTML
2. 表现：CSS
3. 行为：JS

• 组件封装基本方法：

1. 结构设计
2. 展现效果
3. 行为设计
   API(功能)
   Event(控制流)

• 重构：

1. 插件化
2. 模板化
   将HTML模板化
3. 抽象化
   将组件通用模型抽象出来

- JavaScript 编码原则之过程抽象

1. 用来处理局部细节控制的一些方法
2. 函数式编程思想的基础应用

- Leftpad 事故背景引入

• 事件本身的槽点：
  NPM模块粒度，代码风格，代码质量及效率
• 交通灯案例

1. 版本一：嵌套五层
2. 版本二：数据抽象
   将红灯黄灯绿灯抽象出一个列表，用递归的方式切换下一个状态
   添加状态时在状态列表中添加多个状态即可
3. 版本三：过程抽象
   
4. 版本四：异步+函数式

• 判断是否是4的幂案例

1. 对4取模
2. 右移位
3. num>0 && (num & (num - 1)) === 0 && (num & 0xAAAAAAAAAAAAA) === 0;

• 洗牌算法
• 分红包

1. 切西瓜法
2. 抽牌法