如何在我的 Web 專案中包含 JavaScript 檔案？

包含JavaScript 檔案：除了@Import

雖然@import 通常在CSS 中用於包含外部樣式表，但JavaScript 本身並不支持類似的機制。隨著時間的推移，出現了許多方法來滿足這項需求。

ES6 模組（建議）

自 2015 年以來，JavaScript 已經接受了 ES6 模組，提供了標準化的導入方式模組。大多數現代瀏覽器和 Node.js 都支援這種方法。

要使用ES6 模組，請建立一個具有匯出功能的module.js 檔案：

export function hello() {
  return "Hello";
}

在另一個檔案中，匯入模組並使用其功能：

import { hello } from './module.js';
let val = hello();  // val is "Hello";

Node.js Require

對於Node.js，傳統的模組樣式是 module.exports/require 系統。

建立一個mymodule.js 模組：

module.exports = {
   hello: function() {
      return "Hello";
   }
}

建立一個mymodule.js 模組：

const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

在不同的檔案中使用此模組：

AJAX載入

AJAX 請求可用來動態載入JavaScript 腳本。但是，由於安全性限制，此功能僅限於相同網域。由於潛在的安全風險，不鼓勵使用 eval 來執行此類腳本。

取得載入

與動態匯入類似，Fetch Inject 函式庫允許透過 fetch 載入多個腳本並使用 Promise 控制執行順序。

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

jQuery載入

jQuery 提供了一種簡化的方法來載入外部腳本：

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

動態腳本載入

此技術涉及建立腳本使用所需的URL進行標記並將其註入到 HTML 中document.

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");
    script.src = url;
    document.head.appendChild(script);
}

檢測腳本執行

非同步載入腳本時，腳本執行之前會有延遲。要檢測腳本何時完成加載，請考慮使用基於事件的回調或原始答案中提供的連結中建議的方法。

原始程式碼合併/預處理

Parcel、Webpack 和 Babel 等現代構建工具可以組合多個 JavaScript 檔案、應用轉換並提供跨瀏覽器相容性。這允許開發人員使用高級 JavaScript 功能並簡化他們的開發工作流程。

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