javascript函數中的惰性載入函數實例程式碼詳解

惰性載入函數

因為各瀏覽器之間的行為的差異，我們經常在函數中包含了大量的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中文網其他相關文章！