【青训营】- 如何写好JS (下)

129 阅读2分钟

过程抽象

什么是过程抽象?过程抽象是用来处理局部细节的一些方法,是函数式编程思想的基础应用。通过使用函数作为黑盒来编写和使用,这过程被称为过程抽象

Snipaste_2021-08-24_13-20-37.jpf

举个例子,现在我有个任务清单,通过点击选框,能删除已经完成的任务,但因为现在的效果是点击之后2s后才消失,如果我重复点击任务,就会导致后面延时任务执行时发现节点已经删除而报错。

Snipaste_2021-08-24_13-34-51.png

Snipaste_2021-08-24_13-33-34.png

比较好的解决方法是,我点击一次后就把同个选框的点击事件给禁止。为了能够让“只执行一次”的需求覆盖不同的事件处理,我们可以将这个需求剥离出来,而这个过程就是过程抽象。只执行一次函数的入口就是监听点击的事件,而出口就是事件执行一次后被取消。

Snipaste_2021-08-24_13-44-13.png

纯函数

而像这样接受函数作为参数,并且将函数作为返回值函数被称作是高阶函数,高阶函数常用作函数修饰器。常见的高阶函数有Once、Throttle、Debounce、Consumer、Iterative。 那么我们为什么要使用高阶函数呢?实际上我们说要使用高阶函数,意思是纯函数式的高阶函数。

纯函数是纯的、没有副作用的。对于任意的一个输入,纯函数都有唯一确定的输出,且不产生任何可观察的副作用,如修改变量、打印内容等。以下2个都不是纯函数:

//对于任意的一个输入,没有唯一确定的输出
const inc = i => { 
      if(i === 0) return 1  
      if(i === 1) return 2  
      if(i === 2) return 3  
    }
//产生了副作用
var xs = [1,2,3,4,5]  \
    xs.splice(0,3) //[1,2,3]  \
    xs.splice(0,3) //[4,5]  \
    xs.splice(0,3) //[]

那么使用纯函数有什么好处呢? 函数式编程代码简洁、开发快速。由于函数式编程使用了大量的函数,因此减少了代码的重复。并且更方便代码管理。由于函数式编程不会改变外界的状态,对于给定输入一定有相同输出,因此更有利于单元测试和debug。