这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
编码原则
各司其责
- js控制行为，css控制展示呈现，html控制结构，各司其责
- 应当避免不必要的由js直接操作样式（比如切换黑夜白天的样式，不要在js代码中一行行换属性，可以用class来表示状态，css中定义类的样式，用js切换类即可）
- 纯展示类交互寻求零JS方案
组件封装
JS Bin - Collaborative JavaScript Debugging (h5jun.com)
以轮播图为例，最初的结构设计为如下
- 轮播图是典型列表结构，可以用HTML的无序列表ul实现结构；
- 用CSS来表现，包括使用css绝对定位将图片重叠在一个位置，轮播图切换的状态使用修饰符（modifier），切换动画使用css transition
- 由JS设定行为，API应保证原子操作，职责单一，满足灵活性
- 写下Event行为，也叫做控制流，利用自定义事件来进行解耦
但要考虑重构为组件（即web页面上抽出来的一个个包含模板html、功能js和样式css的单元），还需要具备封装性、正确性、扩展性、复用性。
- 考虑解耦进行插件化，将控制元素比如小圆点和左右箭头抽取成插件，插件和组件之间通过依赖注入的方式建立联系
- 同样考虑到解耦进行模板化，将html模板化，更容易扩展
- 还应该将通用的组件模型抽象出来
过程抽象
过程抽象通常是用来处理局部细节控制的一些方法，是函数式编程思想的基础应用（例如react的hooks），简单来说，把封装好的函数看成一个过程
例子一，限制操作次数，比如点击元素之后过一秒再消失的，点击到消失期间只能执行一次，为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。比如下面的once函数。
高阶函数即以函数作为参数，以函数作为返回值的函数，常用于作为函数装饰器。声明式函数，即先定义一个高阶函数，再运用里面的函数逻辑。
个人总结
通过今天的课程，学习到了一些JS的思想和写代码应该遵循的原则，今后预计更多地考虑到解耦、抽象等原则写出更灵活更优雅的代码。
