如何將 JavaScript 檔案包含在其他 JavaScript 檔案中？

在其他 JavaScript 檔案中包含 JavaScript 檔案

在 JavaScript 中，匯入模組與 CSS 的 @import 不同。 JavaScript 的早期版本缺乏 import、include 或 require 函數，導致出現了將 JavaScript 檔案包含在其他版本中的各種方法。然而，自 ES6（2015）以來，JavaScript 引入了 ES6 模組標準，將模組導入 Node.js 和大多數現代瀏覽器中。

ES6 模組

ES6 模組使用以下語法：

import { function } from './module.js';
// or
import * as module from './module.js';

ECMAScript🎜> >瀏覽器支援直接載入ES6模組，無需Webpack等建置工具。使用以下語法：

Node.js require

<script type="module">
  import { function } from './module.js';
</script>

Node.js 使用CJS 模組樣式：

其他方法

const module = require('./module.js');

除了ES6模組和Node.js require，在瀏覽器中包含 JavaScript 檔案的其他方法包括：

AJAX 載入：

使用 AJAX 呼叫載入腳本並 eval 運行它。由於安全原因，僅限於同一個網域。
• 取得載入：
使用具有 Promise 的 fetch 來控制腳本的執行順序。
• jQuery 載入：
使用 jQuery 在單行中載入腳本。
• 動態腳本載入：
使用 URL 建立腳本標籤並將其附加到 HTML。
偵測腳本執行

遠端包含 JavaScript 檔案意味著非同步載入。為了確保載入的程式碼立即可用，請使用以下技術：

原始碼合併/預處理

function loadScript(url, callback) {
  // Create script tag
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  // Bind event to callback function
  script.onreadystatechange = callback;
  script.onload = callback;

  // Append to HTML
  document.head.appendChild(script);
}

建置工具，如Parcel、Webpack 和Babel可用於合併原始碼、提供向後相容性和縮小檔案。

以上是如何將 JavaScript 檔案包含在其他 JavaScript 檔案中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！