【青训营】月影带我学js——过程抽象

theme: channing-cyan

什么是过程抽象

所谓过程抽象 其实是一种思维方式，也是一种编程方式，我们可以把函数当成一个控制器，控制这函数的输入和输出，它也是函数式编程思想的基础。

例子

我们想象一个应用场景，就是常见的表单提交，一般我们都应该限制点击提交后不能再次提交，防止多次提交。

为了能够让‘只执行一次’的需求来覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程也被称为过程抽象。 我们可以创建一个once的高阶函数，让它来处理这个操作。

  function once(fn){
        return function(...args){
            if(fn){
                const ret = fn.apply(this,args);
                fn = null;
                return ret;
            }
        }
    }

我们这里给这个函数传入function，第一次进来首先会为true，if中的内容会执行，在执行之后立马function被设为null，下次进入这个函数的时候，if就不会执行了，因为null在条件判断中相当于false。

高阶函数

上面用到高阶函数，讲一下什么是高阶函数，

高阶函数一般以函数作为参数并且把函数作为返回值。常用于作为函数装饰器。上面的例子我们也可以在函数处理前后添加其他操作，比如在发送数据的时候添加请求头等等。

image.png

高阶函数除了上面once还有其他常用的

• 节流throttle https://code.h5jun.com/gale/1/edit?js,output
• 防抖Debounce https://code.h5jun.com/wik/edit?js,output
• 把同步变成异步Consumer https://code.h5jun.com/roka/7/edit?js,console,output https://code.h5jun.com/bucu/3/edit?js,output
• 迭代Lterative https://code.h5jun.com/kapef/edit?js,output纯函数 纯函数就是返回结果只依赖于它的参数且不会改变上下文环境，不会有任何副作用，一个项目如果纯函数很多的话，说明这个项目可维护性很高。

简单写俩个例子

    // 纯函数
    function add(a,b){
        return a + b;
    };
    // 非纯函数
    let num = 6;
    function add1(){
      return  num++;
    }
    console.log(add(1,2));//3
    console.log(add1());//6
    console.log(add1());//7

高阶函数场景分析

想象一个场景，比如我们的代码库要更新，有些代码要废弃或者重新修改，但是目前还有很多人在用，我们要给现在用的人一个提升要更新的操作。

一般情况下我们首先想到的就是找到要更改的函数，里面添加console.warn('这个函数要更新啦-大熊Jackson')

但是我们这样操作的话容易出现bug，而且很多的话容易累死。我们可以设计一个纯函数，把需要修改的函数放进去统一进行添加之后再暴露出来。

 import {bar as bar1,foo as foo1} from "jackson";
    function depracation(fn){
        return function(...args){
            console.log('要修改了-Jackson');
            return fn.apply(this,...args);
        }
    }
    const foo = depracation(foo1);
    const bar = depracation(bar1);
    export {foo,bar};