这是我参与「第五届青训营 」笔记创作活动的第3天
一、重点内容介绍：
1、编码原则之各司其职
2、编码原则之组件封装
3、编码原则之过程抽象
二、详细知识点：
1、各司其职
什么是各司其职？
- 即三个元素的职能分离，具体表现在结构、表现、行为。
其中HTML负责页面结构，CSS负责页面样式，JavaScript则负责页面动作。 - HTML，超文本标记语言，当浏览器请求得到一个html文件后，就将响应数据转变为html文件并且生成为DOM树，然后浏览器根据DOM树开始渲染页面。
- CSS，浏览器在生成DOM树的同时也解析了CSS文件并且生成了CSSOM树，最终根据这两棵树确定页面的结构和页面的样式。
- JavaScript，是运行在浏览器上的脚本语言，浏览器编译运行JavaScript后，能够对用户的行为做出反应，比如点击按钮提交表单，发送post和get请求等等。
2、组件封装
什么是组件封装？
- 组件指的是页面上抽出来包含模版(HTML)样式(Css)行为（JavaScript）的单元。
好的组件具备封装性、正确性、扩展性、复用性. - 封装指的是将这一些打包成为一个可以复用的包含样式，功能，和行为的小的工具。
如何进行组件封装？
- 做好结构设计、展现效果、行为设计等。
组件封装的例子？（轮播图）
- 将控制元素拆分（滑动的箭头、小圆点），彼此之间建立联系
- 将HTML模板化，使得一个
<div class='slider'></div>就能实现图片轮播，传入图片列表。 - 将通用的组件模型，抽象出组件类（Component）。
3、过程抽象
什么是过程抽象？
- 过程抽象就是，应用函数式编程思想，这是一种处理局部细节控制的方法。
- 过程抽象可以方便进行单元测试，同时减少系统中非纯函数的数量，从而使得系统可靠性增加。
- 过程抽象一般应用于节流、防抖等方面。
4、小结
本篇笔记记录的是跟着月影学JavaScript课程的笔记
其中主要内容为HTML，CSS，JavaScript各司其职，JavaScript组件组件封装，过程抽象的思想。 同时包含了月影老师在课堂上的例子。
我们平时在写代码的过程中，也要刻意的去沉淀，高效的使用这些思想，
