動態載入 JavaScript 檔案

動態 JavaScript 檔案載入在模組化和優化 Web 應用程式中起著至關重要的作用。 Prototype 和 jQuery 等主流 JavaScript 程式庫利用此技術來擴展其功能並提高效能。

動態載入JavaScript 檔案

動態載入JavaScript 檔案有兩種主要方法：

1. AJAX with Eval: 透過AJAX 呼叫載入腳本並使用eval 評估其代碼。然而，這種方法受到域限制的限制，並引入了潛在的安全性問題。
2. 腳本元素： 使用 src 屬性中指定的腳本 URL 建立一個

處理載入事件

動態載入腳本後，可能需要處理其載入事件。為了跨瀏覽器相容性，可以使用多個事件：

• onreadystatechange
• onload

透過將回調函數附加到這些事件，程式碼可以成功載入腳本後執行。

腳本元素的事件

腳本元素觸發以下操作events:

• load
• readystatechange
• error

主流JavaScript 函式庫方法

• 原型： 原型用途[document.observe](https://api.prototypejs.org/dom/document/observe) 用於文件範圍的事件。
• jQuery: jQuery 使用 $.getScript() 來動態載入和執行腳本，提供方便且一致的介面。

範例

以下程式碼片段示範了使用事件動態載入 JavaScript 檔案處理：

function loadScript(url, callback) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  script.onload = callback;
  script.onreadystatechange = callback;
  document.getElementsByTagName('head')[0].appendChild(script);
};

結論

動態載入 JavaScript 檔案為 Web 應用程式提供了靈活性和模組化。透過利用事件，開發人員可以確保僅在腳本成功載入後才執行程式碼。主流 JavaScript 函式庫為此功能提供了便捷的方法，簡化了開發並增強了使用者體驗。