这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
本堂课重点（不熟悉）内容：
鼓励使用高阶函数
各司其职（HTML、CSS、JS的职能分离）
- 犀牛书、红宝书
- 结构、表现、行为分离 不要让js做css该做的事情 避免不必要的由JS直接操作的代码
- 伪类的高级应用：css纯样式改变 纯展示类交互雪球零JS方案 eg.深夜食堂 版本3
- 可以用class表示状态
组件封装（好的UI组件具备封装性、正确性、扩展性、复用性）
例子：原生JS实现一个电商网站的轮播图
- 无序列表展示图片
- CSS定位同一位置
- 定义一个类，实现 轮播图功能的API
- 自定义事件 实现下方红点和左右箭头
总结：
- 结构设计
- 展示效果
- 行为涉及
- API 功能
- Event 控制流
重构：插件化（再精进的点）
解耦：
- 将控制元素抽取为插件
- 插件与组件之间通过依赖注入方式建立联系
重构：模板化
实现修改少部分内容，不需要理解更深层次的内容 即可修改成功
重构：过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
常用高阶函数
- HOF
- Once
- Throttle 截留函数 设置 x ms， 只能每 x 毫秒点击一次 （底部思维是 在规定时间内的第一次走第一个分支，其他次走另一个分支）
- Debounce 防抖
- Consumer 矩阵、延时调用
- Iterative 传入为可迭代对象，用该对象去调用统一方法
Leftpad故事引入
推荐使用repeat进行添加 固定值 二次幂快速添加的算法 log2(n)
先将个数转化为二进制 result初始为*
- 5->101 余二=1 -> 添加** result = ***
- 101->10 余二=0
- 10->1 余二=1 -> 添加** result = *****
代码质量
交通灯
LeeCode
四的幂
num 与 num-1 相与 得值 二进制少一个1 64位 11位的小数位 剩下53位 需要对应位数的A
- 2的幂 num>0 & num & (num-1) === 0
- 4的幂 num>0 & num & (num-1) === 0 & num & 0xAAAAAAAAAAA === 0
洗牌
避免分布不均匀
sort方法的随机交换 在每个的交换的概率不一样 前面的要换到后面的概率要低 导致前面的数时小数多
分红包-切西瓜
分两半 挑大的部分再分
分红包-抽牌法
抽到每个数的概率相等 但是空间复杂度高
详细知识点介绍：
总结：
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
- 命令式编程语言
- 声明式编程语言 （多个状态转换时推荐）
- 模块粒度
引用参考：
PPT：
bytedance.feishu.cn/file/boxcnx… bytedance.feishu.cn/file/boxcnD…
