如何将 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等构建工具。使用以下语法：

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

Node.js require

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