这是我参与 [第五届青训营] 笔记创作活动的第三天

写好JS的一些原则

各司其责：HTML、CSS、js职能分离

HTML即超文本标记语言，是页面最重要的部分；当浏览器通过http请求得到一个响应头中content-type为text/html的响应后就将响应数据从二进制转变为html文件最终生成为DOM树，浏览器根据DOM树的结构开始渲染页面。
CSS则是使用各种选择器和各种dom关系以及标签状态等为不同的标签设置各自的样式，浏览器在生成DOM树的同时也解析CSS文件生成CSSOM树，最终根据这两棵树确定页面的结构和页面的样式。 JavaScript则是在浏览器上运行的编程语言，浏览器编译运行js代码对用户的各种行为做出反应，比如点击按钮提交表单后跳转到新的页面，验证用户在浏览某些网页之前是否登录了账号等。

在写代码时应当注意：

• HTML/CSS/JS各司其责
• 应当避免不必要的由JS直接操作样式
• 可以用class来表示状态
• 纯展示类交互寻求零JS方案

组件封装：好的UI组件具备正确性、扩展性、复用性

组件是指web页面上抽出来的一个个包含HTML,CSS,JS的单元

组件封装的基本方法：

• 结构设计
• 展现效果
• 行为设计：API（功能），Event（控制流）

重构：插件化

• 解耦：将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系

重构：模板化

• 解耦：将HTML模板化，更易于扩展

组件框架：将组件通用模型抽象出来

总结：

• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组件的步骤：结构设计、展示效果、行为设计
• 三次重构：插件化、模板化、抽象化（组件框架）

过程抽象：应用函数式编程思想

过程抽象：用来处理局部细节控制的一些方法，函数式编程思想的基础应用。