資料整理：JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐
高階函數(shù)：函數(shù)可以作為參數(shù)被傳遞或作為返回值輸出。
函數(shù)作為參數(shù)傳遞
- 回調(diào)函數(shù)
- Array.prototype.sort
sort()方法用原地算法對數(shù)組進(jìn)行排序幌氮，并返回?cái)?shù)組立帖，默認(rèn)排序是根據(jù)字符Unicode碼點(diǎn)狂芋。sort()方法接受一個(gè)函數(shù)作為參數(shù)，這個(gè)函數(shù)封裝了元素的排序規(guī)則。
函數(shù)作為返回值輸出
讓函數(shù)返回一個(gè)可執(zhí)行的函數(shù)没炒，意味著運(yùn)算過程是可延續(xù)的。
- 判斷數(shù)據(jù)類型
- getSingle
高階函數(shù)實(shí)現(xiàn)AOP
AOP(面向切面編程)主要作用是把一些核心業(yè)務(wù)邏輯模塊無關(guān)的功能抽離出來犯戏，這些跟業(yè)務(wù)邏輯無關(guān)的的功能通常包括日志統(tǒng)計(jì)送火， 安全控制，異常處理等先匪。把這些功能抽離出來之后种吸，再通過動態(tài)織入的方式摻入業(yè)務(wù)邏輯模塊之中。
//通過擴(kuò)展Function.prototype來實(shí)現(xiàn)AOP
Function.prototype.before = function(beforefn) {
var self = this; //保留原函數(shù)的引用
return function() { //返回包含了原函數(shù)和新函數(shù)的‘代理’函數(shù)
beforefn.apply(this, arguments); //執(zhí)行新函數(shù)呀非，修正this
return self.apply(this, arguments); //執(zhí)行原函數(shù)
}
}
Function.prototype.after = function(afterfn) {
var self = this;
return function() {
var ret = self.apply(this, arguments);//這里this指向的是全局
afterfn.apply(this, arguments);
return ret;
}
}
var func = function() {
console.log('center/');
};
func = func.before(function() {
console.log(1);
}).after(function() {
console.log(3);
});
func();
高階函數(shù)的其他運(yùn)用
-
currying
函數(shù)柯里化（function currying）骨稿，又稱部分求值，一個(gè)currying函數(shù)首先會接收一些參數(shù)，接收參數(shù)后并不會立刻求值坦冠，而是繼續(xù)返回另外一個(gè)函數(shù)形耗，之前傳遞的參數(shù)在閉包中被保存起來，待函數(shù)被真正需要求值的時(shí)候辙浑，之前所傳參數(shù)會被一次性用于求值激涤。
var currying = function(fn) {
var args = [];
return function() {
if (arguments.length === 0) {
return fn.apply(this, args);
} else {
[].push.apply(args, arguments);
return arguments.callee; //callee包含當(dāng)前正在執(zhí)行的函數(shù)
}
}
}
var cost1 = (function() {
var money = 0;
return function() {
for (var i = 0; i < arguments.length; i++) {
money += arguments[i];
}
return money;
}
})();
var cost2 = currying(cost1);
cost2(100);
cost2(200);
cost2(300);
cost2();
-
uncurrying
泛化this過程
Function.prototype.uncurrying = function() {
var self = this;
return function() {
console.log(arguments);//Arguments(2)[Arguments(3), 4]
var obj = Array.prototype.shift.call(arguments);//Arguments(3) [1, 2, 3,]
return self.apply(obj, arguments);
}
}
//另一種實(shí)現(xiàn)方式
Function.prototype.uncurrying = function() {
var self = this;
return function() {
Function.prototype.call.apply(self, arguments);
}
}
var push = Array.prototype.push.uncurrying();
(function() {
push(arguments, 4);
console.log(arguments);
})(1,2,3);
- 函數(shù)節(jié)流
- 函數(shù)被頻繁調(diào)用的場景
window.onsize事件
mousemove事件
上傳進(jìn)度 - 函數(shù)節(jié)流原理
上述三個(gè)場景共同問題是函數(shù)觸發(fā)頻率太高，需要我們按事件忽略一些請求 - 代碼實(shí)現(xiàn)
var throttle = function(fn, interval) {
var self = fn,//需要被執(zhí)行的函數(shù)引用保存為_self
timer,//定時(shí)器
firstTime = true;
return function() {
var _me = this,
args = arguments;
if (firstTime) {
self.apply(_me, args);
firstTime = false;
return false;
}
if (timer) {
return false;
}
timer = setTimeout(function() {
clearTimeout(timer);
timer = null;
self.apply(_me, args);
}, interval || 500);
}
}
window.onresize = throttle(function(){ console.log( 1 ); }, 2000 );
-
分時(shí)函數(shù)
有些函數(shù)確實(shí)是用戶主動調(diào)用的判呕，但因?yàn)橐恍┛陀^原因卻會嚴(yán)重影響頁面性能倦踢，例如創(chuàng)建webQQ好友列表，如果一個(gè)好友代表一個(gè)節(jié)點(diǎn)侠草，當(dāng)在渲染列表時(shí)辱挥，可能一次性創(chuàng)建成百上千個(gè)節(jié)點(diǎn)，在短時(shí)間內(nèi)大量添加dom節(jié)點(diǎn)會讓瀏覽器卡頓或假死
var timeChunk = function(ary, fn, count, interval) {
var obj,t;
var start = function() {
for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
obj = ary.shift();
fn(obj);
}
}
return function() {
t = setInterval(function() {
if (ary.length === 0) {
return clearInterval(t);
};
start();
}, interval || 200);
}
}
var arys = [];
for (let i = 0; i <= 1000; i++) {
arys.push(i);
}
var renderList = timeChunk(arys, function(n) {
var div = document.createElement('div');
div.innerHTML = n;
document.body.append(div);
}, 8, 2000);
renderList();
- 惰性加載函數(shù)
var addEvent = function( elem, type, handler ){
if ( window.addEventListener ) {
return elem.addEventListener( type, handler, false );
}
if ( window.attachEvent ) {
return elem.attachEvent( 'on' + type, handler );
}
};
//普通通用綁定事件函數(shù)缺點(diǎn)在于每次調(diào)用時(shí)都會執(zhí)行if條件分支边涕，雖然分支開銷并不大晤碘，但有方法可以讓程序避免重復(fù)的執(zhí)行過程
//方案二
var addEvent = (function(){
if ( window.addEventListener ){
return function( elem, type, handler ){
elem.addEventListener( type, handler, false );
}
}
if ( window.attachEvent ){
return function( elem, type, handler ){
elem.attachEvent( 'on' + type, handler );
}
}
})();
//方案二在代碼加載時(shí)候進(jìn)行判斷，讓addEvent返回正確的邏輯判斷,但依然有個(gè)缺點(diǎn)功蜓，若代碼從頭到尾沒有調(diào)用addEvent函數(shù)园爷，則前一次的瀏覽器嗅探就是多余操作，且延長了ready加載時(shí)間
//惰性載入函數(shù)方案式撼，addEvent依然被聲明為普通函數(shù)童社，在函數(shù)中依然有判斷分支，但在第一次進(jìn)入分支后著隆，在函數(shù)內(nèi)部重寫這個(gè)函數(shù)扰楼，重寫之后的就是我們期望的函數(shù)，在下次進(jìn)入的時(shí)候美浦，函數(shù)里便不再存在條件分支語句灭抑。
var addEvent = function(element, type, handler) {
if (window.addEventListener) {
addEvent = function(element, type, handler) {
element.addEventListener(type, handler, false);
}
} else if (window.attachEvent) {
addEvent = function(element, type, handler) {
element.attachEvent('on' + type, handler);
}
}
addEvent(element, type, handler);
}
