如何在我的 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";
   }
}

在不同的文件中使用该模块：

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中文网其他相关文章！