这是我参与「第四届青训营 」笔记创作活动的第4天
一、本堂课重点内容：
主要讲述了如何写好JS：各司其职、组件封装、过程抽象等
二、详细知识点介绍：
如何写好JS：各司其职、组件封装（好的UI组件具备正确性、扩展性、复用性）、过程抽象（应用函数式编程思想）
各司其职
<label for="idname">就可以达到点击label和点击idname代表的元素一样的效果。
组件封装
基本方法：
- 结构设计
- 展现效果
- 行为设计
API(功能)、Event(控制流)
重构：插件化
解耦：
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
使用自定义事件可以绑定状态不让他们耦合在一起。
重构：模板化
解耦： 将HTML模板化，更易于扩展
组件框架，抽象：将组件通用模型抽象出来
组件封装总结：
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构：插件化、模板化、抽象化（组件框架）
过程抽象
过程抽象：
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
返回另一个函数的函数：高阶函数
function once(fn){
return function(...args){
if(fn){
const ret = fn.apply(this,args);
fn = null;
return ret;
}
}
}
使用once可以达到函数只运行一次的效果。
操作次数限制：
- 一些异步交互
- 一次性的HTTP请求
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称之为过程抽象。
HOF（高阶函数）：
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用的高阶函数：
- once
- throttle节流函数（重复点击时，隔一段时间才能执行一次函数）
- debounce防抖函数（键盘或鼠标停止操作一段时间才会执行某函数）
- consumer/2（连续点击之后，每隔一段时间执行一个，一直执行完所有点击次数，延时调用）
- iterative（同时操作多个元素）
纯函数：没有副作用，结果可预期
编程范式：命名式（面向过程，面向对象）与声明式（逻辑式和函数式）
三、实践练习例子：
用JS写一个轮播图
轮播图是一个列表结构，可以用无序列表实现
