JavaScript 编码原则之各司其责
1. 各司其职
写一个可以调整深夜模式和白天模式的(也就是控制浅色和深色两种浏览模式)如下图：
第一种代码版本为：
第二种代码版本为：
区别：相比之下，第二种版本会更好，因为CSS定义了一个classname=night，所以当点击这个按钮时，body的classname就会改变，由默认的变成night。当要修改CSS时，只需要修改CSS中classname为night中的属性，这样便不用使用JS去直接操作样式，样式就应该交给CSS去操作，这样会显得特别方便，而且代码看起来更简洁。如果使用第一种版本的话，就需要去修改JavaScript中的内容，使代码看起来特别臃肿，修改起来也很不方便。
总结：HTML/CSS/JS各司其职，应当避免使用JS去操作样式，可以用class来表示状态，纯展示类交互寻求零JS方案。
2. 组件封装
实现一个轮播图
- 用html把一个轮播图所需要的标签构造出来，一个轮播图其实是由一个
div里面包裹着ul列表实现的
2.然后使用CSS把图片定位到同一个相对位置上重叠，轮播图的切换使用修饰词modifier，轮播图的切换动画使用CSS transition
3.然后使用JavaScript进行行为设计API
API：
- getSelectedItem()得到当前选中的那个元素
- getSelectedItemIndex()得到当前选择元素在这个列表里的下标
- slideTo()slideto到某个特定的元素上
- slideNext()轮播到下一张图
- slidePrevious轮播到上一张图片
定义一个slider的类
然后new一下这个类创建一个对象，然后设置一个定时器，这样便能实现自动轮播图
4.用js实现控制流(也就是轮播图的小点)
先添加控制流部分的html
两个
a标签是为了实现左右滑动，div中的span是控制滑动的小圆点
js就是，给四个小圆点实现监听mouseover，mouserout事件，在这两个监听事件里面我们去得到当前页面所要跳转的索引号，然后自动播放也停掉。
然后在监听播放事件，将播放的图片对应小圆点
- 过程抽象
- 用来处理局部细节的一些一些方法
- 函数式编程思想的基础应用
总结
有利于代码复用，功能抽象与模块化，便于测试和调试
