这是我参与「第四届青训营 」笔记创作活动的的第3天
写js的原则
-
各司其责：让HTML、CSS和JavaScript职能分离。HTML、CSS和JavaScript各自承担自己的角色，HTML负责去描述网站结构，CSS主要是负责网站的展示表现，JavaScript负责交互内容。
-
组件封装：将UI组件封装起来再去使用，做好组件封装。
-
过程抽象：应用函数式编程思想。不仅要做数据抽象，还要掌握过程抽象，可以让代码有更好的扩展性和复用能力，变得更加通用，会涉及函数式编程范式。
各司其职
三元素职能分离
结构、表现、行为：三者分离
避免不必要的由JS直接操作样式。本例为纯展示类交互，可以采用零JS的方案。
\
组件封装
组件是指Web页面上抽象出来的一个个包含有模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
什么时候需要封装
如果一块内容在项目中出现了两次就要考虑是否应进行封装。（一个组件、一个函数、一个css 只要是需要多次使用的都可以考虑封装）
封装原则
封装的组件必须具有高性能，低耦合的特性，封装的组件为子组件，引用封装组件的地方叫父组件。
设计一个UI组件基本方法：
-
结构设计
-
展现效果
-
行为设计：
- API（功能）通常是设计接口来操作
- Event（控制流）通常是自定义事件来解耦
以轮播图为例
- 将控制元素拆分（左右滑动的箭头、下方小圆点）；彼此之间通过依赖注入的方式建立联系。
- 将html模板化，使得一个
<div class='slider‘></div>就能实现图片轮播、修改控制器的构造，传入图片列表。 - 将通用的组件模型，抽象出组件类（Component），其他组件类通过继承该类，并实现render方法。
总结：
好的ui组件具备正确性、拓展性、复用性。 需要做好结构设计、展现效果、行为设计等。
\
过程抽象
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程称为过程抽象。过程抽象是用来处理局部细节控制的一些方法，属于函数式编程思想的基础应用。
操作次数限制：一些异步交互、一次性的HTTP请求
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
应用函数式编程思想，是处理局部细节控制的方法。
举例：节流、防抖等方面的应用。
纯函数：返回结果只依赖于它的参数，并且在执行过程里面没有副作用
优点：
- 方便进行单元测试！
- 减少系统中非纯函数的数量，从而使得系统可靠性增加
