04 js高阶函数（惰性函数、柯里化函数、compose函数）和单例设计模式

高阶函数的定义

在《javascript设计模式和开发实践》中是这样定义的。

函数可以作为参数被传递；
函数可以作为返回值输出。

结合这两个特点，首先想到的肯定是回调函数，回调函数也是高阶函数的一种，除了回调函数，还有很多的高阶函数，这篇文章主要是惰性函数、柯里化函数、compose函数这三种。

一、惰性函数

概念

懒，执行过一遍的东西，如果第二遍执行还是一样的效果，则我们就不想让其重复执行第二遍了

栗子

我们要封装一个获取元素属性的方法，因为低版本的ie浏览器不支持getComputedStyle方法，做了一个容错处理

 function getCss(element, attr) {
    if ('getComputedStyle' in window) {
        return window.getComputedStyle(element)[attr];
    }
    return element.currentStyle[attr];
}

但是每次进这个方法都要做一下判断，为了提高性能，我们可以存一个变量，然后每次进去判断变量就好了

var flag = 'getComputedStyle' in window
function getCss(element, attr) {
    if (flag) {
        return window.getComputedStyle(element)[attr];
    }
    return element.currentStyle[attr];
}

这样每一次还是需要判断，有没有更好的方法呢？惰性函数的思想就可以完美解决这个问题

function getCss(element, attr) {
    if ('getComputedStyle' in window) {
        getCss = function (element, attr) {
            return window.getComputedStyle(element)[attr];
        };
    } else {
        getCss = function (element, attr) {
            return element.currentStyle[attr];
        };
    }
    // 为了第一次也能拿到值
    return getCss(element, attr);
}

getCss(document.body, 'margin');
getCss(document.body, 'padding');
getCss(document.body, 'width');

第一次执行，如果有getComputedStyle这个方法，getCss就被赋值成

function (element, attr) {
    return window.getComputedStyle(element)[attr];
};

而后的每一次就会执行上面这个函数，否则则相反

总结

惰性载入函数有两个主要优点，

1、是显而易见的效率问题，虽然在第一次执行的时候函数会意味赋值而执行的慢一些，但是后续的调用会因为避免的重复检测更快；
2、是要执行的适当代码只有当实际调用函数是才执行，很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支，把所有东西实现设置好，而惰性载入函数将计算延迟，不影响初始脚本的执行时间。

二、函数柯理化

定义

利用闭包保存机制，把一些信息预先存储下来（预处理的思想）

function fn() {
    
}
let res = fn(1, 2)(3);
console.log(res); //=>6  1+2+3

封装一个方法，调用以后求出和（两次执行的传参个数都不固定）

解题思路：

函数第二次执行，第一个函数的返回值一定是一个函数,第二个函数的返回值应该是求和的数值

function fn(...outerArgs) {
    return function anonymous(...innerArgs) {
        // args:外层和里层函数传递的所有值都合并在一起
        let args = outerArgs.concat(innerArgs);
        return args.reduce((n, item) => n + item);
    };
}

第二个函数使用了第一个函数的值，所以函数1不会被释放，利用闭包的保护机制，将值预先保存起来

三、compose函数

定义

组合函数，把多层函数嵌套调用扁平化

栗子

下面四个方法，每种方法都会把参数0进行处理，给x传一个值如果要得出四种方法以后的和：

const fn1 = (x, y) => x + y + 10;
const fn2 = x => x - 10;
const fn3 = x => x * 10;
const fn4 = x => x / 10;

let res = fn4(fn2(fn3(fn1(20))));
let res1 = compose(fn1, fn3, fn2, fn4)(20, 30);

res得出的值，可以实现这个需求，但是需要函数套函数，现在可以定义一个compose函数，使得res和res1的值相等，将函数实现扁平化

function compose(...funcs) {
    // FUNCS:存储按照顺序执行的函数(数组) =>[fn1, fn3, fn2, fn4]
    return function anonymous(...args) {
        // ARGS:存储第一个函数执行需要传递的实参信息(数组)  =>[20]
        if (funcs.length === 0) return args;
        if (funcs.length === 1) return funcs[0](...args);
        return funcs.reduce((N, func) => {
            // 第一次N的值:第一个函数执行的实参  func是第一个函数
            // 第二次N的值:上一次func执行的返回值，作为实参传递给下一个函数执行
            return Array.isArray(N) ? func(...N) : func(N);
        }, args);
    };
}

完美实现compose函数，不用再函数套函数

react中的redux源码中的compose函数用的是另外思想实现的

四、单例设计模式

定义

var obj1 = {
    name: 'wanghuahua'
}
var obj2 = {
    name: 'jerry'
}
console.log(obj1.name)
console.log(obj2.name)

上面的两个obj就是最基础的单例

单例模式就是：用单独的实例来管理当前事物的相关特征[属性和方法]（类似于实现一个分组的特点）

而此时obj1/obj2不仅仅叫做一个对象，也被成为命名空间

特点

类只有一个实例
全局可访问该实例
自行实例化（主动实例化）
可推迟初始化，即延迟执行（与静态类/对象的区别）

虽然全局变量可以实现单例，但因其自身的问题，不建议在实际项目中将其作为单例模式的应用，特别是中大型项目的应用中，全局变量的维护该是考虑的成本。

高级单例设计模式

基于闭包管控的单例模式称为：高级单例设计模式，以此来实现模块划分（最早的模块化思想）

let wanghuahua = (function () {
    function query() {}

    function tools() {}

    return {
        name: 'AREA',
        tools
    };
})();
wanghuahua.tools(); 

let jerry = (function () {
    function fn() {
        meimei.getXxx();
    }

    function query() {}
    return {
        query
    }
})();

let meimei = (function () {
    function fn() {}

    function getXxx() {}
    jerry.query();

    return {
        getXxx
    }
})(); 
// 每个模块都可以有自己私有的方法，想要暴露给全局的就return出去

// es6的export已经不需要这么写了

公众号：

image