依然是继续如何写好JS话题，本文主要是说说【过程抽象】【高阶函数】和【编程方式】。
前言
『前期回顾』
过程抽象
-
用来处理局部细节控制的一些方法
-
函数式编程思想的基础应用
示例
如有以下一个列表，当任务完成，勾选之后该任务就消失，消失的时候有一个动画效果
实现方案（反例）
可能有的人会这样实现
-
先得到列表list
-
监听每个按钮的点击事件
-
加一个定时，2s之后移除完成的
-
通过改变class实现一个过渡的动画效果
此版本存在的问题
- 如果连续多次点击复选框，复选框已经被移除，后面会报Dom节点不存在的错误
原因
- 多次点击，就会执行多个setTimeout，当同一的DOM被移除一次之后，之后的remove就找不到了这个DOM了
改进
- 应该只触发一次click事件
扩展
- 一些异步交互
- 一次性的HTTP请求
- 提交表单，或者其他一些任务
都应该限制操作次数
Once
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用高阶函数
- Once
- Throttle（节流函数）
使用场景：控制事件触发频率，比如不论多快的点击按钮，都是隔500毫秒才执行一次事件
- Debounce（防抖函数 ）
使用场景：也是用来限制事件的调用、但是它不仅是限制调用的频率，如用户在频繁的编辑一段文字，这段文字会自动进行保存，如果用户很快的修改，而我们一直在提交，对服务器压力是很大的，这个时候我们可以等到用户编辑停止几百毫秒之后再执行提交操作
- Consumer （异步消耗）
- iterative（迭代函数）
为什么要用高阶函数？
函数可以分为
- 纯函数
- 非纯函数：
一个项目、系统或库，理论上来说纯函数越多，可维护性越好。（存函数也便于编写单元测试）
【图】By Jyothsna Patnam
什么是纯函数？
当一个function，输入的值确定了，输出的值是唯一确定的，那么这样的一个函数就是纯函数
纯函数的两个原则
- 这个函数无副作用
- 具有幂等性，在任何时间、次序下去调用它，它的结果是唯一的，不会被改变的
如：以下这个简单的函数，就是一个纯函数，当传参为1,2时，结果一定是3
非纯函数
如一下示例，这就不是一个纯函数，因为它改变了外面的上下文环境
如果多次调用，得到的结果是不一样的。如果再新增一个bar函数，则左边顺序的结果和右边顺序的结果也是不一样的
编程范式
命令式与声明式
有的语言是纯命令式，有的是纯声明式，但是JavaScript都有
如以下，要实现数组元素*2操作，既可以用命令式又可以用声明式
示例
-
命令式（强调的是我们要怎么做，就是How）
-
声明式（强调的是我们要做什么，就是What，可扩展性更强）
如实现一个开关
- 命令式写法
-
声明式写法
当只有两种状态时，似乎没有区别，但是如果开关有【开】【关】【警告】三种情况之后呢
命令式需要多加一个if判断，但是声明式只需要多传一个参数。
总结
本文或许只能起到一个抛砖引玉的作用，以上的每个模块都值得好好去推敲研究一下。
关键词
- 过程抽象/ HOF /装饰器
- 命令式/声明式
结语
本节课的讲师：字节前端/掘金开发负责人—月影
如以上有错误的地方，请在评论区中指出！
小可爱看完点个赞再走吧！😗
