这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
一、本堂课重点内容：
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
- 过程抽象概念
- 高阶函数使用模式
- JavaScript 编程范式
- 代码写作关注事项
- left-pad 事件背后的代码规范
- 代码实践1 - 交通灯
- 代码实践2 - 洗牌
- 代码实践3 - 分红包
二、详细知识点介绍：
个人笔记：
JS
学习内容
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
一些原则
- HMTL、CSS、JS各司其职
- 避免不必要的JS直接操作样式
- 可以用class表示状态
- 纯展示类交互寻求零JS方案
学习内容
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
组件封装原则
- 设计原则：封装性，正确性，扩展性，复用性
- 实现步骤：结构设计，展示效果，行为设计
- 三次重构：插件化、模板化、抽象化
学习内容
- 过程抽象概念
- 高阶函数使用模式
- JavaScript 编程范式
学习内容
- 代码写作关注事项
- left-pad 事件背后的代码规范
学习内容
- 代码实践1 - 交通灯
- 代码实践2 - 洗牌
- 代码实践3 - 分红包
三、实践练习例子：
JS例子
const number;
...//一些操作
class ... //API
四、课后个人总结：
本章内容自身学习比较抽象，没有具体的实践，不容易掌握的在于HTML、JS的模板化、组件化。初次进行实践时，仍会产生HTML、CSS、JS相互影响的问题。
五、引用参考：
JavaScript 参考 - JavaScript | MDN (mozilla.org)
六、例文：
