这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
课程总结：
写好JS的三个原则：
1、各司其责，让HTML、CSS、JS职能分离
2、组件封装：好的UI组件具备正确性、扩展性、复用性
3、过程抽象：应用函数式编程思想
一、各司其责
代码例子深夜食堂结论
1、HTML、CSS、JS各司其责，（不一定非要分开文件写）
2、应当避免不必要的由JS直接操作样式
3、可以用class来表达状态
4、纯展示类交互需求零JS方案
二、组件封装
*组件是指web页面上抽出来的一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元，好的组件具备封装性、正确性、扩展性、复用性。
代码案例轮播图
1、结构：轮播图是一个典型的无序列表结构，可用无序列表ul元素来实现
2、表现：使用CSS绝对定位将图片重叠在同一个位置、轮播图切换的状态使用修饰符（modifier）,轮播图的切换使用CSS transition
3、行为1：API
Slider
getSelectedItem() 当前选中的图片元素
getSelectedItemIndex() 当前选中的图片元素下标
slideTo(index) 滑到index下标图片元素上
slideNext() 滑到下一张图片元素上
slidePrevious() 滑到上一张图片元素上
行为2：控制流
状态绑定，使用自定义事件来解耦
* 组件封装总结
1、基本方法：结构设计、展现效果、行为设计（API功能、Event控制流）
2、改进空间：不够灵活（删去前后按钮改动大）
* 重构：
插件化 1、解耦 将控制元素抽取成插件 在插件和组件中使用依赖注入建立联系
2、模板化 将HTML模板化，更易于扩展
3、抽象化（组件框架） 将组件通用模型抽象出来 改进空间：CSS模板化
三、过程抽象
用于处理局部细节控制的一些方法、函数式编程思想的基础应用
1、用例，操作次数限制 一些异步交互 一次性的HTTP请求
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为“过程抽象”
2、高阶函数HOF
（1）以函数作为参数
（2）以函数作为返回值
（3）常用于作为函数装饰器
3、常用高阶函数
Once、Throttle、Debounce、Consumer/2、Iterative
4、编程范式
（1）声明式：重点在做什么
（2）命令式：重点在怎么做
