JavaScript 导入

在 JavaScript 中，导入外部模块或库是必须的。导入模块可以充分利用现有的代码和功能，同时也可以减少代码量，提高代码的可维护性。下面我们来介绍一些 JavaScript 中导入模块的一些方法。

1. script 标签

如果要使用第三方库，最古老的方法就是使用 script 标签将其引入到 HTML 页面中。

<script src="path/to/library.js"></script>

这样做可以将库文件下载到浏览器中，并将其中的功能暴露在全局命名空间中。

但是，这种方法有一个显而易见的问题：命名冲突。如果使用的库与其他库具有相同的全局变量或函数名称，可能会导致意想不到的问题。由于这个原因，现在各种库都会提供一个“UMD”版本，该版本合并了几种不同的导出模式，包括 global、AMD 和 CommonJS 等。

2. 命名空间

从 ES6 开始，JavaScript 提供了一种更好的方式来避免全局命名冲突:使用命名空间。通过使用对象形式，将文件的执行代码绑定在一个对象上，这个对象就可以成为一个“命名空间”。

const MyLibrary = {
  doSomething: function() {
    // ...
  }
}

然后，可以通过以下方式来使用 MyLibrary：

MyLibrary.doSomething();

3. CommonJS

CommonJS 是一种来自 Node.js 环境的模块规范。它指定了一个模块的结构，定义了如何定义和导出它们。例如，在模块中可以定义一个编号为 add 的函数，并将其导出，如下所示：

// add.js
module.exports = function(x, y) {
  return x + y;
}

在另一个文件中，我们可以使用 require 函数来引入这个模块，并使用它的功能:

const add = require('./add');
console.log(add(1, 2)); // 3

4. ES6 Modules

ES6 模块是 JavaScript 中主流的模块规范。它类似于 CommonJS，但具有一些不同之处。ES6 模块使用 import 和 export 语句来定义模块。

// add.js
export function add(x, y) {
  return x + y;
}

// main.js
import { add } from './add';
console.log(add(1, 2)); // 3

ES6 模块语法提供了更好的语言集成和更好的错误检测，但需要特定的构建工具或浏览器支持。目前市场上主要用于 JavaScript Bundlers/Webpack。

总结

JavaScript 中有多种方法来导入其他的模块或库，包括 script 标签、命名空间、CommonJS 和 ES6 模块规范。如果您正在开发现代 Web 应用程序，您应该使用 ES6 模块，因为它提供了更好的语言集成和更好的错误检测。