快捷導(dǎo)航

利用函數(shù)的惰性載入提高javascript代碼執(zhí)行效率

更新時間：2014年05月05日 09:19:59 作者：

在 addEvent 函數(shù)每次調(diào)用的時候都要走一遍，如果瀏覽器支持其中的一種方法，那么他就會一直支持了，就沒有必要再進(jìn)行其他分支的檢測了

在 javascript 代碼中，因?yàn)楦鳛g覽器之間的行為的差異，我們經(jīng)常會在函數(shù)中包含了大量的 if 語句，以檢查瀏覽器特性，解決不同瀏覽器的兼容問題。例如，我們最常見的為 dom 節(jié)點(diǎn)添加事件的函數(shù)：

復(fù)制代碼代碼如下:

 
function addEvent (type, element, fun) { 
if (element.addEventListener) { 
element.addEventListener(type, fun, false); 
} 
else if(element.attachEvent){ 
element.attachEvent('on' + type, fun); 
} 
else{ 
element['on' + type] = fun; 
} 
} 

每次調(diào)用 addEvent 函數(shù)的時候，它都要對瀏覽器所支持的能力進(jìn)行檢查，首先檢查是否支持addEventListener 方法，如果不支持，再檢查是否支持 attachEvent 方法，如果還不支持，就用 dom 0 級的方法添加事件。這個過程，在 addEvent 函數(shù)每次調(diào)用的時候都要走一遍，其實(shí)，如果瀏覽器支持其中的一種方法，那么他就會一直支持了，就沒有必要再進(jìn)行其他分支的檢測了，也就是說，if 語句不必每次都執(zhí)行，代碼可以運(yùn)行的更快一些。

解決的方案就是稱之為惰性載入的技巧。

所謂惰性載入，就是說函數(shù)的if分支只會執(zhí)行一次，之后調(diào)用函數(shù)時，直接進(jìn)入所支持的分支代碼。有兩種實(shí)現(xiàn)惰性載入的方式，第一種事函數(shù)在第一次調(diào)用時，對函數(shù)本身進(jìn)行二次處理，該函數(shù)會被覆蓋為符合分支條件的函數(shù)，這樣對原函數(shù)的調(diào)用就不用再經(jīng)過執(zhí)行的分支了，我們可以用下面的方式使用惰性載入重寫 addEvent()。

復(fù)制代碼代碼如下:

 
function addEvent (type, element, fun) { 
if (element.addEventListener) { 
addEvent = function (type, element, fun) { 
element.addEventListener(type, fun, false); 
} 
} 
else if(element.attachEvent){ 
addEvent = function (type, element, fun) { 
element.attachEvent('on' + type, fun); 
} 
} 
else{ 
addEvent = function (type, element, fun) { 
element['on' + type] = fun; 
} 
} 
return addEvent(type, element, fun); 
} 

在這個惰性載入的 addEvent() 中，if 語句的每個分支都會為 addEvent 變量賦值，有效覆蓋了原函數(shù)。最后一步便是調(diào)用了新賦函數(shù)。下一次調(diào)用 addEvent() 的時候，便會直接調(diào)用新賦值的函數(shù)，這樣就不用再執(zhí)行if 語句了。

第二種實(shí)現(xiàn)惰性載入的方式是在聲明函數(shù)時就指定適當(dāng)?shù)暮瘮?shù)。這樣在第一次調(diào)用函數(shù)時就不會損失性能了，只在代碼加載時會損失一點(diǎn)性能。一下就是按照這一思路重寫的 addEvent()。

復(fù)制代碼代碼如下:

 
var addEvent = (function () { 
if (document.addEventListener) { 
return function (type, element, fun) { 
element.addEventListener(type, fun, false); 
} 
} 
else if (document.attachEvent) { 
return function (type, element, fun) { 
element.attachEvent('on' + type, fun); 
} 
} 
else { 
return function (type, element, fun) { 
element['on' + type] = fun; 
} 
} 
})(); 

這個例子中使用的技巧是創(chuàng)建一個匿名的自執(zhí)行函數(shù)，通過不同的分支以確定應(yīng)該使用那個函數(shù)實(shí)現(xiàn)，實(shí)際的邏輯都一樣，不一樣的地方就是使用了函數(shù)表達(dá)式（使用了 var 定義函數(shù)）和新增了一個匿名函數(shù)，另外每個分支都返回一個正確的函數(shù)，并立即將其賦值給變量 addEvent。

惰性載入函數(shù)的優(yōu)點(diǎn)只執(zhí)行一次 if 分支，避免了函數(shù)每次執(zhí)行時候都要執(zhí)行 if 分支和不必要的代碼，因此提升了代碼性能，至于那種方式更合適，就要看您的需求而定了。

您可能感興趣的文章: