这是我参与「第四届青训营」笔记创作活动的第4天
前端代码优化三大原则之各司其职,夜间模式小案例
各司其职？
我们都知道前端基础三大件，HTML、CSS、JavaScript,HTML是页面的骨架，CSS是页面的皮肤，JavaScript就是页面的动作了。我们在写代码的时候应该他们各自负责自己该负责的部分，尽可能的少用JS干扰CSS/HTML，能让他们内部自己搞定的就不要借助JavaScript来满足需求。下面我们来看几个小例子。
夜间模式
前端代码优化三大原则之组件封装，用原生JS写一个轮播图并封装
组件封装?
组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS） 的单元。好的组件具备封装性、正确性、拓展性、复用性。
轮播图小例子
分析
- 结构设计：HTML
轮播图是一个典型的列表结构，我们可以使用无序列表<ul>元素来实现
- 表现：CSS
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用CSS transition
- 行为：JS
API设计应保证原子，职责单一，满足灵活性
- 行为：控制流
使用自定义事件来解耦
