JavaScript 中 onload 事件綁定多個方法的優化建議

時間 2019-11-24

標籤 javascript onload 事件綁定多個方法優化建議欄目 JavaScript 简体版

原文原文鏈接

頁面加載完畢時會觸發 onload 事件。基於內容（HTML）要與行爲（JavaScript）分離的編碼思想，咱們須要將一些對頁面的初始化操做寫在方法內，並經過window.onload = functionName 調用這些方法.
須要調用多個方法時，若使用 window.onload = functionA; window.onload = functionB;，它們之中只有最後一個方法會被實際調用。那麼應如何實現調用多個方法呢？編程

直接在 HTML 中編寫:函數
```
<body onload="functionA();functionB()">
```
因爲事件包含在 HTML 內，不符合上述『內容與行爲分離』的思想，故不推薦使用這個方法。優化
建立一個匿名函數容納須要調用的方法，而後將該匿名函數綁定到 onload 事件上：編碼
```
window.onload = function () {
  functionA();
  functionB();
}
```
在須要調用的函數不是太多的時候，這是最簡單的解決方案了。spa

當須要調用的方法較多時，咱們能夠進一步優化，編寫一個專門用於綁定 onload事件的方法：code

function addLoadEvent(func) {
    //把現有的 window.onload 事件處理函數的值存入變量
    var oldOnload = window.onload;
    if (typeof window.onload != "function") {
      //若是這個處理函數尚未綁定任何函數，就像平時那樣添加新函數
      window.onload = func;
    } else {
      //若是處理函數已經綁定了一些函數，就把新函數添加到末尾
      window.onload = function() {
        oldOnload();
        func();
      }
    }
  }
  
  //接下來，咱們只須要調用這個方法添加本身須要的函數就好了
  addLoadEvent(functionA);
  addLoadEvent(functionB);