利用函數(shù)的惰性載入提高 javaScript 代碼性能
在 javaScript 代碼中垂涯，因?yàn)楦鳛g覽器之間的行為的差異，我們經(jīng)常會(huì)在函數(shù)中包含了大量的 if 語(yǔ)句绸狐，以檢查瀏覽器特性谣妻，解決不同瀏覽器的兼容問(wèn)題。 例如芬骄，我們最常見(jiàn)的為 dom 節(jié)點(diǎn)添加事件的函數(shù)：
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ù)的時(shí)候猾愿，它都要對(duì)瀏覽器所支持的能力進(jìn)行檢查，首先檢查是否支持 addEventListener 方法账阻，如果不支持蒂秘，再檢查是否支持 attachEvent 方法，如果還不支持淘太，就用 dom 0 級(jí)的方法添加事件姻僧。 這個(gè)過(guò)程，在 addEvent 函數(shù)每次調(diào)用的時(shí)候都要走一遍蒲牧，其實(shí)撇贺，如果瀏覽器支持其中的一種方法，那么他就會(huì)一直支持了冰抢，就沒(méi)有必要再進(jìn)行其他分支的檢測(cè)了松嘶， 也就是說(shuō)，if 語(yǔ)句不必每次都執(zhí)行挎扰，代碼可以運(yùn)行的更快一些翠订。
解決的方案就是稱(chēng)之為惰性載入的技巧。
所謂惰性載入遵倦，就是說(shuō)函數(shù)的if分支只會(huì)執(zhí)行一次尽超，之后調(diào)用函數(shù)時(shí)，直接進(jìn)入所支持的分支代碼骇吭。 有兩種實(shí)現(xiàn)惰性載入的方式橙弱，第一種事函數(shù)在第一次調(diào)用時(shí)，對(duì)函數(shù)本身進(jìn)行二次處理，該函數(shù)會(huì)被覆蓋為符合分支條件的函數(shù)棘脐，這樣對(duì)原函數(shù)的調(diào)用就不用再經(jīng)過(guò)執(zhí)行的分支了斜筐， 我們可以用下面的方式使用惰性載入重寫(xiě) addEvent()。
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);
}
在這個(gè)惰性載入的 addEvent() 中蛀缝，if 語(yǔ)句的每個(gè)分支都會(huì)為 addEvent 變量賦值顷链，有效覆蓋了原函數(shù)。 最后一步便是調(diào)用了新賦函數(shù)屈梁。下一次調(diào)用 addEvent() 的時(shí)候嗤练，便會(huì)直接調(diào)用新賦值的函數(shù)，這樣就不用再執(zhí)行 if 語(yǔ)句了在讶。
第二種實(shí)現(xiàn)惰性載入的方式是在聲明函數(shù)時(shí)就指定適當(dāng)?shù)暮瘮?shù)煞抬。 這樣在第一次調(diào)用函數(shù)時(shí)就不會(huì)損失性能了，只在代碼加載時(shí)會(huì)損失一點(diǎn)性能构哺。 一下就是按照這一思路重寫(xiě)的 addEvent()革答。
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;
}
}
})();
這個(gè)例子中使用的技巧是創(chuàng)建一個(gè)匿名的自執(zhí)行函數(shù)，通過(guò)不同的分支以確定應(yīng)該使用那個(gè)函數(shù)實(shí)現(xiàn)曙强，實(shí)際的邏輯都一樣残拐， 不一樣的地方就是使用了函數(shù)表達(dá)式（使用了 var 定義函數(shù)）和新增了一個(gè)匿名函數(shù)，另外每個(gè)分支都返回一個(gè)正確的函數(shù)碟嘴，并立即將其賦值給變量 addEvent溪食。
惰性載入函數(shù)的優(yōu)點(diǎn)只執(zhí)行一次 if 分支，避免了函數(shù)每次執(zhí)行時(shí)候都要執(zhí)行 if 分支和不必要的代碼娜扇，因此提升了代碼性能错沃，至于那種方式更合適，就要看您的需求而定了袱衷。
原文地址: https://justjavac.com/javascript/2013/10/16/function-of-the-inertia-load.html
