这是我参与「第五届青训营 」伴学笔记创作活动的第 20 天
一、本堂课重点内容
- js代码优化的要点
- 各司其职
- 组件封装
- 过程抽象
二、详细知识点介绍
1.如何写好一段js代码
想要写好一段js代码，最重要的是遵循三个原则，作为前端开发者需要尽量使自己的js代码遵循这些原则。这三点被称为各司其职、组件封装、过程抽象。
2.“各司其职”
在学习HTML和css的时候会了解到前端基础工具之间的关系和作用，其中HTML如同前端的骨架，控制着页面的结构，而css有着丰富的样式和选择器，用来制作页面的样式，js则控制页面的行为和功能。
“各司其职”的要义是通过HTML, css, js的相互配合，完成一个不仅用户使用体验好的页面，而且也要符合程序员编程和阅读的习惯。在优化的过程中，我们一般有以下结论：
- HTML、css、js各司其职
- 应当避免不必要的由js直接操作的样式（最好不要使用js完成css的工作）
- 可以用class来表示状态（可以利用css建立伪类并直接在js中引入）
- 纯展示类交互采用零js方案（采用css高级功能）
2.组件封装
组件是指Web页面上抽出来的一个个包含模板(HTML)，功能(JS)和样式(CSS)的单元，好的组件具备封装性、正确性、扩展性和复用性。在设计一个组件的时候，可以总结出以下基本方法：
- 结构设计
- 展现效果
- 行为设计
- API（功能）
- Event（控制流）
在基本方法的基础上对组件进行优化与重构，可以进行如下操作：
- 插件化
将控制元素抽取成插件，插件和组件之间通过依赖注入的方式建立联系。 - 模板化
将HTML模板化，更加易于扩展。 - 组件框架
通过抽象的方式，将通用的组件模型抽象出来。
总结：
- 组件设计的原则：封装性、正确性、扩展性、复用性。
- 实现组件的步骤：结构设计、展现效果、行为设计。
- 三次重构：插件化、模板化、组件框架。
3.过程抽象
3.1介绍
过程抽象是用于处理局部细节控制的一些方法；是函数式编程思想的基础应用。
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
3.2高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
- 常用的高阶函数有Once, Throttle, Debounce, Consumer/2, Iterative.
三、课后个人总结
以上初步总结了JS编码的一些原则，通过“各司其职”，“组件封装”，“过程抽象”这三种原则，很好地帮助我们了解一些JS编写代码的习惯，同时也为之后要学习的框架做一些提前的准备。通过不断的优化，才能使代码更加便于管理，实际使用体验更加流畅。
