JS高阶编程技巧[ 模块化、惰性思想、柯里化、组合函数 ]

一、模块化编程：按模块划分，模块之间是独立的「也能相互调用」

• 单例设计模式
• AMD require.js
• CMD sea.js 「CommonJS」
• CommonJS Node.js
• ES6Module

基于闭包避免全局变量污染
想实现各版块之间方法的相互调用：把需要供别人调用的方法暴露到全局

• window.xxx=xxx 暴露比较多的情况下，还是会产生全局污染
• 基于闭包+单例设计思想 ->高级单例设计模式 「早期的模块化思想」
  代码如下：

let searchModule = (function () {
    let wd = "";
    function query() {
        // ...
    }
    function submit() {
        // ...
    }
    return {
        // submit:submit
        submit,
        query
    };
})();

let weatherModule = (function () {
    let city = "";
    function submit() {
        // ...
    }
    return {
        submit
    };
})();

let skinModule = (function () {
    let wd = "";
    function search() {
        // ...
    }
    searchModule.submit();
    return {};
})();

二、惰性函数

举个例子：比如获取元素的样式:

元素.style.xxx 获取行内样式

• 盒子模型属性「外加:getBoundingClientRect」
• 获取所有经过浏览器计算过的样式
• 标准:getComputedStyle
• IE6~8:currentStyle

代码实现：每次都会执行一次判断

let box = document.querySelector('.box');

let isCompatible = typeof getComputedStyle !== "undefined" ? true : false;
const getCss = function getCss(element, attr) {
    if (isCompatible) {
        return window.getComputedStyle(element)[attr];
    }
    return element.currentStyle[attr];
};
console.log(getCss(box, 'width'));
console.log(getCss(box, 'backgroundColor'));
console.log(getCss(box, 'height'));

利用函数的重构【闭包】：判断代码只执行一次，getcss赋值新的函数，惰性处理

// 核心：函数重构「闭包」
let getCss = function (ele, attr) {
    if (typeof getComputedStyle !== "undefined") {
        getCss = function (ele, attr) {
            return window.getComputedStyle(ele)[attr];
        };
    } else {
        getCss = function (ele, attr) {
            return ele.currentStyle[attr];
        };
    }
    // 保证第一次也获取值
    return getCss(ele, attr);
};

console.log(getCss(box, 'width'));
console.log(getCss(box, 'backgroundColor'));
console.log(getCss(box, 'height'));

三、柯里化

函数柯理化：闭包的进阶应用

• 核心：“预先处理/预先存储”「利用闭包的保存作用：凡是形成一个闭包，存储一些信息，供其下级上下文调取使用的，都是柯理化思想」
  代码：

 const fn = (...params) => {
    // params->[1,2]
    return (...args) => {
        // args->[3]
        return params.concat(args).reduce((total, item) => {
            return total + item;
        });
    };
};
let total = fn(1, 2)(3);
console.log(total); //=>6 

const curring = () => {
    let arr = [];
    const add = (...params) => {
        arr = arr.concat(params);
        return add;
    };
    add.toString = () => {
        return arr.reduce((total, item) => {
            return total + item;
        });
    };
    return add;
};
let add = curring();
let res = add(1)(2)(3);
console.log(res); //->6

add = curring();
res = add(1, 2, 3)(4);
console.log(res); //->10

add = curring();
res = add(1)(2)(3)(4)(5);
console.log(res); //->15 

记录执行次数：面试题
const curring = n => {
    let arr = [],
        index = 0;
    const add = (...params) => {
        index++;
        arr = arr.concat(params);
        if (index >= n) {
            return arr.reduce((total, item) => {
                return total + item;
            });
        }
        return add;
    };
    return add;
};
let add = curring(5);
res = add(1)(2)(3)(4)(5);
console.log(res); //->15 

四、组合函数

在函数式编程当中有一个很重要的概念就是函数组合， 实际上就是把处理数据的函数像管道一样连接起来， 然后让数据穿过管道得到最终的结果。

例如：
    const add1 = x => x + 1;
    const mul3 = x => x * 3;
    const div2 = x => x / 2;
    div2(mul3(add1(add1(0)))); //=>3

而这样的写法可读性明显太差了，我们可以构建一个compose函数，它接受任意多个函数作为参数（这些函数都只接受一个参数），然后compose返回的也是一个函数，达到以下的效果：

    const operate = compose(div2, mul3, add1, add1)
    operate(0) //=>相当于div2(mul3(add1(add1(0)))) 
    operate(2) //=>相当于div2(mul3(add1(add1(2))))

function compose(...funcs) {
    let len = funcs.length;
    if (len === 0) return x => x;
    if (len === 1) return funcs[0];
    return function operate(...args) {
        return funcs.reduceRight((result, item) => {
            if (Array.isArray(result)) {
                return item(...result);
            }
            return item(result);
        }, args);
    };
}
let operate = compose(div2, mul3, add1, add1);
console.log(operate(0)); 

react中redux中的compose函数：

function compose(...funcs) {
    if (funcs.length === 0) {
        return x => {
            return x;
        };
    }
    if (funcs.length === 1) {
        return funcs[0];
    }
    // funcs -> [div2, mul3, add1, add1]
    return funcs.reduce((a, b) => {
        // 第一次 每一次迭代，执行回调函数，都产生一个闭包，存储a/b，返回的小函数中后期使用的a/b就是这个闭包中的
        //   a -> div2
        //   b -> mul3
        //   return x=>a(b(x)) @1
        // 第二次
        //   a -> @1
        //   b -> add1
        //   return x=>a(b(x)) @2
        // 第三次
        //   a -> @2
        //   b -> add1
        //   return x=>a(b(x)) @3
        return x => {
            return a(b(x));
        };
    }); //=>return @3; 赋值给外面的operate
}
const operate = compose(div2, mul3, add1, add1);
console.log(operate(0)); 

reduce底层实现原理：

Array.prototype.reduce = function reduce(callback, initial) {
    let self = this, // this -> arr
        i = 0,
        len = self.length,
        item,
        result;
    if (typeof callback !== "function") throw new TypeError('callback must be an function!');
    if (typeof initial === "undefined") {
        // 初始值不设置，让初始值是数组第一项，并且从数组第二项开始遍历
        initial = self[0];
        i = 1;
    }
    result = initial;

    // 循环数组中的每一项
    for (; i < len; i++) {
        item = self[i];
        result = callback(result, item, i);
    }
    return result;
};

let arr = [10, 20, 30, 40];
console.log(arr.reduce((result, item, index) => {
    return result + item;
}));
console.log(arr.reduce((result, item) => {
    return result + item;
}, 0));