这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
各司其职：让HTML、CSS、JS职能分离。
组件封装：好的UI组件具备正确性、扩展性、复用性。
过程抽象：应用函数式编程思想。
一、各司其职
避免不必要的由js直接操作样式，可以用class来表示状态，纯展示类交互寻求零js方案。
案例（深夜食堂）
- 方案一、js直接操作css样式
- 方案二、class控制状态
- 方案三、零js方案
二、组件封装
组件是指web页面上抽象出来的一个个包含模板HTML、功能JS和样式CSS的单元。好的组件具备封装性、正确性、扩展性和复用性。
案例（利用原生 JS 实现电商网站轮播图）
1. 无序列表结构html
2. 表现css
使用css绝对定位将图片重叠在同一个位置，轮播图切换的状态使用修饰符，轮播图的切换动画使用css transition。
3. 行为js
4. 行为 控制流
用自定义事件来解耦。
code.h5jun.com/reba/3/edit…
基本方法
结构设计+展现效果+行为设计（api功能+event控制流）
改进
缺点：控制按钮和组件绑定，不够灵活。
重构：插件化。
将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。
插件化缺点：添加或删除组件时，HTML中代码也需要相应修改。
重构：将HTML模板化。
重构：抽象化，形成组件框架。
三、过程抽象
用来处理局部细节控制的方法，函数式编程思想的基础应用。
操作次数限制
异步交互+一次性的HTTP请求
node延迟2s消失，连击操作导致报错。
- 方案一、once:true
- 方案二、过程抽象
高阶函数 闭包
高阶函数
以函数为参数、返回值，常作为函数装饰器。
常用高阶函数
Once
Throttle code.h5jun.com/gale/1/edit…
Debounce code.h5jun.com/wik/edit?js…
Consumer/2 code.h5jun.com/roka/7/edit…
Iterative code.h5jun.com/kapef/edit?…
为什么要用高阶函数？
纯函数：输入与输出是一一对应，输出是可预期的。
非纯函数：改变外部状态。
高阶函数：将非纯函数变为纯函数。
参考：# 谈JavaScript中纯函数与非纯函数 juejin.cn/post/702705…
命令式与声明式
JavaScript两种风格都包含。
- 命令式
- 声明式
- 例子
Toggle（命令式）code.h5jun.com/tuda/2/edit…
Toggle（声明式）code.h5jun.com/nal/3/edit?…
Toggle（三态）code.h5jun.com/foqo/2/edit…
四、性能优化
交通灯状态转换
- 版本一
- 版本二 递归
- 版本三
- 版本四 异步
判断4的幂
- 位运算
num&(n-1) 判断是2的幂；num&0xAAAAAAAA 1后面跟n个00 0b1010101010101010 - 字符串匹配
洗牌
- 方案一
有错，不是完全随机，值越小越可能出现在前面
- 方案二
分红包
- 切西瓜法
问题：每次切的都是最大的，最终结果会越来越趋向于均匀。 - 抽牌法
100元分10个人，将100视为1-100的数列，插入分隔符。抽出洗牌的前九个值，排序，视为插入的位置。
