如何将一个 JavaScript 文件包含在另一个 JavaScript 文件中？

如何将一个 JavaScript 文件包含在另一个 JavaScript 文件中？

将一个 JavaScript 文件包含在另一个 JavaScript 文件中并不像在 CSS 中使用 @import 那么简单。在 ES6 之前，人们使用了多种方法来解决这个问题。

ES6 模块

自 2015 年（ES6）以来，JavaScript 引入了 ES6 模块来导入 Node.js 中的模块。大多数现代浏览器也支持此标准。 ES6 模块使用以下语法：

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

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

Node.js require

Node.js 使用较旧的 CJS 模块样式，该样式基于module.exports/require 系统：

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

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

其他浏览器加载方法

除了 ES6 模块之外，浏览器还提供各种其他选项来加载外部 JavaScript 内容：

• AJAX 加载：使用AJAX 调用加载附加脚本，然后使用 eval 运行它。
• Fetch加载： 使用 fetch 调用加载脚本并承诺控制执行顺序。
• jQuery 加载： 使用 jQuery 库通过一行代码加载脚本。
• 动态脚本加载： 将带有脚本 URL 的脚本标签添加到 HTML 中。这允许浏览器评估代码。

检测脚本执行

远程加载代码时，现代浏览器异步执行脚本，因此代码可能不会加载后立即可用。要检测脚本何时执行，可以使用：

• 事件处理程序：将脚本标签的 onload 或 onreadystatechange 事件绑定到回调函数。
• 源代码合并/预处理：使用构建/转译工具，如 Parcel、Webpack 或Babel 在 JavaScript 文件加载到浏览器之前组合和处理它们。

以上是如何将一个 JavaScript 文件包含在另一个 JavaScript 文件中？的详细内容。更多信息请关注PHP中文网其他相关文章！