AMD CMD 和ES6对比

187 阅读2分钟

CommonJS 是一种使用广泛的 JavaScript 模块化规范,核心思想是通过 require 方法来同步地加载依赖的其他模块,通过 module.exports 导出需要暴露的接口。 CommonJS 规范的流行得益于 Node.js 采用了这种方式,后来这种方式被引入到了网页开发中。

采用 CommonJS 导入及导出时的代码如下:CMD // 导入 const moduleA = require('./moduleA');

// 导出 module.exports = moduleA.someFunc;

代码可复用于 Node.js 环境下并运行,例如做同构应用; 通过 NPM 发布的很多第三方模块都采用了 CommonJS 规范。 CommonJS 的缺点在于这样的代码无法直接运行在浏览器环境下,必须通过工具转换成标准的 ES5。

AMD 也是一种 JavaScript 模块化规范,与 CommonJS 最大的不同在于它采用异步的方式去加载依赖的模块。 AMD 规范主要是为了解决针对浏览器环境的模块化问题,最具代表性的实现是 requirejs。

// 定义一个模块 define('module', ['dep'], function(dep) { return exports; });

// 导入和使用 require(['module'], function(module) { });

AMD 的优点在于:

可在不转换代码的情况下直接在浏览器中运行; 可异步加载依赖; 可并行加载多个依赖; 代码可运行在浏览器环境和 Node.js 环境下。 AMD 的缺点在于JavaScript 运行环境没有原生支持 AMD,需要先导入实现了 AMD 的库后才能正常使用。

ES6 模块化

ES6 模块化是欧洲计算机制造联合会 ECMA 提出的 JavaScript 模块化规范,它在语言的层面上实现了模块化。浏览器厂商和 Node.js 都宣布要原生支持该规范。它将逐渐取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

采用 ES6 模块化导入及导出时的代码如下:

// 导入 import { readFile } from 'fs'; import React from 'react'; // 导出 export function hello() {}; export default { // ... }; ES6模块虽然是终极模块化方案,但它的缺点在于目前无法直接运行在大部分 JavaScript 运行环境下,必须通过工具转换成标准的 ES5 后才能正常运行