惰性載入函數
因為各瀏覽器之間的行為的差異，我們經常在函數中包含了大量的if語句，以檢查瀏覽器特性，解決不同瀏覽器相容的問題。例如，我們最常見的為dom節點新增事件的函數
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;
}
}每次呼叫addEvent函數的時候，它都要對瀏覽器所支援的能力進行檢查，首先檢查是否支援addEventListener方法，如果不支持，再檢查是否支援attachEvent方法，如果還不支持，就用dom0級的方法加入事件。這個過程，在addEvent函數每次呼叫的時候都要走一遍，其實，如果瀏覽器支援其中的一種方法，那麼他就會一直支援了，就沒有必要再進行其他分支的偵測了。也就是說，if語句不必每次都執行，程式碼可以運行的更快一些。
解決方案就是惰性載入。所謂惰性載入，指函數執行的分支只會發生一次
有兩種實現惰性載入的方式
【1】第一種是在函數被呼叫時，再處理函數。函數在第一次呼叫時，函數會被覆寫為另一個以適當方式執行的函數，這樣任何對原函數的呼叫都不用再經過執行的分支了
我們可以用下面的方式是用惰性載入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);
}在這個惰性載入的addEvent()中，if語句的每個分支都會為addEvent變數賦值，有效覆蓋了原函數。最後一步便是呼叫了新賦函數。下次呼叫addEvent()時，就會直接呼叫新賦值的函數，這樣就不用再執行if語句了
但是，這種方法有個缺點，如果函數名稱有所改變，修改起來比較麻煩
【2】第二種是宣告函數時就指定適當的函數。 這樣在第一次呼叫函數時就不會損失效能了，只在程式碼載入時會損失一點效能
以下就是依照這個想法重寫的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;
}
}
})();以上是javascript函數中的惰性載入函數實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
