一、模块化编程：按模块划分，模块之间是独立的「也能相互调用」
- 单例设计模式
- 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));
