这是我参与「第五届字节青训营」伴学笔记创作活动的第3天。
JS编码三大原则
各司其职
让HTML、CSS和JavaScript职能分离。
组件封装
好的UI组件具有正确性、扩展性。复用性。
过程抽象
应用函数式编程思想。
简而言之关于如何写好JS可以参考以下几点：
- HTML/CSS/JS各司其职
- 应当避免不必要的JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
JS编码原则之各司其职
一个完整的web页面必然少不了HTML、CSS和Javascript三部分，而这三部分若非必要尽量分离为单独的模块，每个模块分别负责独立的功能实现，避免混编，也就是做到各司其职，这样不仅提升了代码的可读性，同时也便于维护对程序员友好。
JS编码原则之组件封装
自从React，Vue等前端框架在市场上大量使用之后，组件化开发逐渐成为了前端开发的主流方式。
组件：指web页面上抽出来的一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元。好的组件具备封装性、正确性、拓展性和复用性。
那么如何封装一个组件？
例如一个电商项目的轮播图，首先进行结构设计，轮播图是一个经典的列表结构，HTML可以使用无序列表来实现。其次进行展现效果设计，使用CSS的定位、修饰符和切换动画等来实现基本的样式，最后进行行为设计，通过JS实现功能事件。通过以上步骤就实现一个简单的轮播图组件。
重构
通过以上步骤可以实现一个轮播组件，但还存在着不足，比如当我不需要该组件的某一功能时，修改就比较复杂。于是便要进行重构。
1.插件化
将控制元素抽取成插件，再将插件与组件之间通过依赖注入的方式建立联系。
2.模块化
可以将HTML模块化，这样便于扩展。
3.抽象化
将通用的组件模型抽象出来。
过程抽象
主要用来处理局部细节控制的一些方法，是函数式编程思想的基础应用。
什么是过程抽象？
将"只执行一次"的处理过程从函数中剥离出来,这个过程称为过程抽象，在JavaScript中通常使用高阶函数来实现，高阶函数以函数为参数，以函数为返回值，如果一个高阶函数参数和返回值都为函数，通常用于作为函数装饰器，且高阶函数是纯函数，具有无副作用的输入与输出。但并不是所有函数都是无副作用的输入与输出。只有纯函数才有无副作用的输入与输出，所谓纯函数即不改变外界环境的函数。
命令式与声明式
命令式更强调怎么做，而声明式更趋向于做什么。
