原则
各司其职
HTML即超文本标记语言，是页面最重要的部分；当浏览器通过http请求得到一个响应头中content-type为text/html的响应后就将响应数据从二进制转变为html文件最终生成为DOM树，浏览器根据DOM树的结构开始渲染页面。
CSS则是使用各种选择器和各种dom关系以及标签状态等为不同的标签设置各自的样式，浏览器在生成DOM树的同时也解析CSS文件生成CSSOM树，最终根据这两棵树确定页面的结构和页面的样式。 JavaScript则是在浏览器上运行的编程语言，浏览器编译运行js代码对用户的各种行为做出反应，比如点击按钮提交表单后跳转到新的页面，验证用户在浏览某些网页之前是否登录了账号等。
- 让HTML、CSS和JavaScript职能分离
- 应当避免不必要的由JS直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零JS解决方案
深色浅色样式转换
通过绑定点击事件 添加style样式来完成功能来实现：
-
js直接修改的是行内样式，其优先级最高；如果我们想要覆盖只能让后面的规则加上！important。
-
后续想要添加更多样式的话只能在这加入更多的代码，会对后期修改造成不小的麻烦。
-
性能问题，每一次触发点击事件都会查询DOM树找到body节点，为其修改样式后触发重绘。
通过伪类选择器来改变css样式：
modeCheckBox:checked
此时当我们点击页面，就会发现也能让页面颜色切换，这是因为我们使用label属性将整个页面和input绑定了，当我们点击页面的时候触发input的click事件，然后利用css的伪类以及兄弟选择器修改页面颜色。
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
高阶函数（HOF）：以函数作为参数；以函数作为返回值；常用于作为函数装饰器
- Once 一次函数：只执行一次
- Throttle 节流：当持续触发事件时，保证一定时间段内只调用一次事件处理函数
- Denounce 防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次
- Consumer：消费数据
- Iterative：迭代器
使用高阶函数可以大大减少使用非纯函数的可能性。
纯函数：函数的返回结果只依赖于它的参数；如果输入的值是唯一的，且输出的值也是唯一的；并且在执行过程里面没有/副作用。
使用纯函数能提高代码的可维护性。
编程范式
命令式与声明式
命令式编程：命令机器如何去做事情，这样不管你想要的是什么，它都会按照你的命令实现。
声明式编程：告诉机器你想要的是什么，让机器想出如何去做。
End
根据不同场景合理选择，让HTML、CSS和JavaScript职能分离。抽象过程，提升代码维护性及复用性。
