加载 js 模块 - Javascript

在使用 Javascript 进行 Web 开发时，很常用的操作就是加载外部的 JS 模块。这使得我们可以通过模块化的方式，更有效地组织我们的代码，降低代码复杂度并提高代码复用率。

本文将介绍常用的 JS 模块加载方式及其优缺点。

直接在 HTML 中引入

最简单也是最常用的方式是直接在 HTML 页面中通过 script 标签引入外部 JS 文件。

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

这种方式的好处是直观明了、容易上手，但缺点同样明显：当有多个模块引用相同的库时会出现冗余代码，导致加载速度变慢。

AMD

AMD（Asynchronous Module Definition）是一种异步的模块加载方式，适用于 Web 开发中的浏览器环境。其基本规则是：

• 定义模块：通过 define() 函数定义模块，指定该模块依赖的其他模块和回调函数。
• 加载模块：通过 require() 函数加载模块，并在加载完成后执行回调函数。

使用 AMD 加载模块，需要在 HTML 页面中先引入 require.js：

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

然后在 JS 文件中定义和加载模块：

// 定义模块 'module1'
define(['dependency1', 'dependency2'], function(dep1, dep2) {
  // 模块代码
});

// 加载模块 'module1'
require(['module1'], function(module1) {
  // 使用模块
});

AMD 的优点是可以异步加载依赖，避免了冗余代码的问题，但其缺点是代码的书写方式比较复杂。

CommonJS

CommonJS 是一套模块加载规范，主要应用于后端 Node.js 环境。其模块加载方式基于 module.exports 和 require()，例：

// 定义模块
exports.sayHello = function() {
  console.log('Hello, world!');
};

// 加载模块
const myModule = require('./module.js');
myModule.sayHello();

CommonJS 的优点是在 Node.js 环境下基本可以直接使用，代码书写和理解比较简单；但在浏览器环境下需要先使用构建工具（如 webpack）将 CommonJS 模块转换为浏览器可用的代码。

ES6

ES6 从语言层面支持了模块化，并定义了 import 和 export 关键字来支持模块加载。ES6 模块的特点如下：

• ES6 模块是静态的，编译时就能确定模块之间的依赖关系，使得代码更容易优化。
• ES6 模块默认严格模式，不支持 CommonJS 的一些特性，如动态加载模块。
• ES6 模块只能在浏览器环境中通过 webpack 等构建工具使用。

使用 ES6 模块：

// 定义模块
export function sayHello() {
  console.log('Hello, world!');
}

// 加载模块
import { sayHello } from './module.js';
sayHello();

ES6 模块的优点是支持语言层面的模块化，语法简单易懂，并且能够在未来的浏览器中原生支持；缺点是需要使用构建工具。

以上是 JS 模块加载的常用方式及其优缺点。我们可以根据实际情况选择适合的加载方式，以提高代码质量和开发效率。