1. 作用域安全的構(gòu)造函數(shù):在進(jìn)行任何更改前挡闰,首先確認(rèn)this對(duì)象是正確類型的實(shí)例(鎖定可以使用構(gòu)造函數(shù)的環(huán)境碘举,避免在全局對(duì)象上意外設(shè)置屬性)。
2. 函數(shù)的惰性載入:函數(shù)執(zhí)行的分支僅會(huì)發(fā)生一次弛针。
? ? 實(shí)現(xiàn)惰性載入的兩種方式:
① 在函數(shù)被調(diào)用時(shí)再處理函數(shù)统抬。在第一次調(diào)用的過(guò)程中,該函數(shù)被覆蓋為另一個(gè)按合適方式執(zhí)行的函數(shù)灭贷,這樣任何對(duì)原函數(shù)的調(diào)用都不用再經(jīng)過(guò)分支
② 在聲明函數(shù)時(shí)就指定適當(dāng)?shù)暮瘮?shù)
3. 函數(shù)柯里化:把接受多個(gè)參數(shù)的函數(shù)變換成為接受一個(gè)參數(shù)的函數(shù)温学,并且返回接受余下參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)。
function curry(fn){ ?// ?fn為要進(jìn)行柯里化的函數(shù)
? ? ? ? var args = Array.prototype.slice.call(arguments, 1); ? // ?args包含了來(lái)自于fn函數(shù)外部的參數(shù)
? ? ? ? return function(){
? ? ? ? ? ? ? ? var innerArgs = Array.prototype.slice.call(arguments); ?// ?innerArgs包含了來(lái)自于fn函數(shù)內(nèi)部的參數(shù)
? ? ? ? ? ? ? ? var finialArgs = args.concat(innerArgs);
? ? ? ? ? ? ? ? return fn.apply(null, finalArgs);
? ? ? ? }
}
3. 柯里化函數(shù)動(dòng)態(tài)創(chuàng)建步驟:調(diào)用另一個(gè)函數(shù)并為它傳入要柯里化的函數(shù)和必要的參數(shù)
4. 定時(shí)器中( setTimeout() 和 setInterval() )甚疟,指定的時(shí)間間隔表示何時(shí)將定時(shí)器的代碼添加到隊(duì)列仗岖,而不是何時(shí)實(shí)際執(zhí)行代碼。
5. 數(shù)組分塊基本原理:為要處理的項(xiàng)目創(chuàng)建一個(gè)隊(duì)列览妖,然后使用定時(shí)器取出下一個(gè)要處理的項(xiàng)目進(jìn)行處理轧拄,接著再設(shè)置另一個(gè)定時(shí)器。其基本的模式:
function chunk(array, proccess, context){
? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? var item = array.shift();
? ? ? ? ? ? ? ? process.call(context, item);
? ? ? ? ? ? ? ? if(array.length > 0){
? ? ? ? ? ? ? ? ? ? ? ? ?setTimeout(arguments.callee, 100);
? ? ? ? ? ? ? ? }
? ? ? ? }, 100);
}
6. 函數(shù)節(jié)流基本原理:某些代碼不可以在沒有間斷的情況連續(xù)重復(fù)執(zhí)行讽膏。第一次調(diào)用函數(shù)時(shí)檩电,創(chuàng)建一個(gè)定時(shí)器,在指定的時(shí)間間隔之后運(yùn)行代碼府树;第二次調(diào)用該函數(shù)時(shí)俐末,它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。在resize事件中最常用奄侠。其基本模式:
function throttle(method, context){ // method為要執(zhí)行的函數(shù)卓箫,context為函數(shù)執(zhí)行的作用域
? ? ? ? clearTimeout(method.tId);
? ? ? ? method.tId = setTimeout(function(){ // 創(chuàng)建一個(gè)定時(shí)器,并將其ID存儲(chǔ)于方法的 tId 屬性中
? ? ? ? ? ? ? ? method.call(context);
? ? ? ? }, 100);
}