这是我参与「第五届青训营 」伴学笔记创作活动的第二天。
本课堂重点内容：
- JavaScript 好代码的标准
- 组件相关
- 原生JS实现轮播图
Javascript 好代码标准
- 各司其职，让HTML、CSS和JavaScript智能分离。
- 组件封装，好的UI组件具备正确性、扩展性、复用性。
- 过程抽象，应用函数式编程思想。
关于“好代码”这一点，从实际场景出发，提出“JS控制网页，支持深色和浅色两种浏览模式”的开发场景。首先有一段实现此场景代码，提出优化思考。如下：
这一段代码的问题，在于没有做好各司其职，大量的在JS中进行css的变更。这里应该独立的设置不同的css样式，在JS中仅仅去操作页面的css绑定属性变更即可。如图代码所示：
为什么要各司其职？我的理解是，如果像如上第一种方式的代码实现，首先理解不同模式的css的样式就比较困难，其次当修改css的风格，例如白色变成其他颜色，可能定位修改的位置最后发现是在js中，不好维护，整体的代码也不够美观。
在完成各司其职的基础上，还有更进一步的优化：
在这一步优化是在完全去除JS在里面的操作，纯CSS的解决方案。为何如此？纯展示类交互寻求零JS方案。
什么是组件？
组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元，好的组件具备封装性、正确性、扩展性、复用性。
原生JS实现轮播图
用原生JS写一个电商网站的轮播图。轮播图有以下特性：
- 结构，轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。
- 表现，使用css绝对定位将图片重叠在同一个位置；轮播图切换的状态使用修饰符（modifier）；轮播图的切换动画使用CSS transition
- 行为JS--API
- 行为JS--控制流
使用自定义事件来解耦：
- 重构--插件化
解耦是什么？
- 将控制元素抽取成插件。
- 插件与组件之间通过依赖注入方式建立联系。
