这是我参与「第五届青训营 」伴学笔记创作活动的第3天
一、本堂课重点内容：
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
- 过程抽象概念
- 高阶函数使用模式
- JavaScript 编程范式
- 代码写作关注事项
- left-pad 事件背后的代码规范
- 代码实践1 - 交通灯
- 代码实践2 - 洗牌
- 代码实践3 - 分红包
二、详细知识点介绍：
写好JS的一些原则
1. 各司其职：让HTML、CSS和JavaScript职能分离
eg.深夜食堂（白色与黑色主题切换）
版本一
缺点：另一个程序员修改代码时很难直观理解代码本身需求和含义
版本二
优点：可以通过代码直观了解需求和含义
版本三（纯CSS：控制样式）
结论
- HTML/CSS/JS各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
2. 组件封装：组件是指Web页面上输出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的UI组件具备正确性、扩展性、复用性。
eg.用原生js写一个电商网站的轮播图
结构:HTML
表现：CSS
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用CSS transition
行为：API
- Slider
- +getSelectedItem（）得到当前选中的元素
- +getSelectedItemIndex（）得到当前选中的图标
- +slideTo（）轮播当前图片
- slideNext（）轮播下一张图片
- slidePrevious（）轮播上一张图片
行为：控制流（小圆点：控制点）
- 使用自定义控件来结束控制流
总结：基本方法
- 结构设计
- 展现效果
- 行为设计
- API（功能）
- Event（控制流）
缺点：不够灵活，控制点和组件绑定在一起
改进：
重构：插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构：模板化
解耦
- 将HTML模板化，更易于扩展
重构：组件框架
抽象
- 将通用的组件模型抽象出来
3.过程抽象：应用函数式编程思想
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基本应用
常用高阶函数
- Once
- Throttle截流函数
- Debounce防抖函数（类似于自动保存，当鼠标停止时才调用函数自动保存）
- Consumer/2延时调用
- Iterative可迭代方法
Leftpad事件
事件本身的槽点：
- NPM模块粒度
- 代码风格
- 代码质量/效率
代码实践1 - 交通灯
- 版本一
- 版本二
- 版本三
- 版本四（异步+函数式）
判断是否是4的幂
- 判断是否能被4整除
3.判断二进制数里面有几个1
4.
洗牌
错误写法（分布不均匀）
正确写法
生成器
分红包
切西瓜法（导致红包相对均匀）
抽牌法
