JavaScript的模块机制

目前,JavaScript生态下最常见的模块机制大致分为以下四种:

  • AMD
  • CMD
  • CommonJS
  • ES6 Module

下面逐个分析每个机制的特点。

CommonJS

  • 环境:Node.js
  • 全局方法:require(module) & exports || module.exports

exports 与 module.exports

在Node.js环境中,exports, require, module都是node的全局对象,exportsmodule.exports的引用。

AMD("Asynchronous Module Definition")

  • 环境:Browser
  • 全局方法:require([module], callback)

这里需要注意,所有的浏览器环境的模块化机制,都要避免同步引入,因为不同于服务端可以直接进行磁盘读取,很快即可使用对应模块,浏览器端需要异步请求,否则会造成假死的状态。因此, 浏览器端的模块化机制都是异步加载的

AMD规范通过回调机制实现了异步加载,在加载完成后执行callback。

CMD("Common Module Definition")

  • 环境:Browser(Sea.js)
  • 全局方法:define() & seajs.use()

ES6 Modules

  • 环境:Browser(目前工具通过工具已经支持Node.js)
  • 全局方法:export & import

与CommonJS最主要有两点区别

  1. ES6模块输出的是值的引用,输出接口动态绑定,而 CommonJS 输出的是值的拷贝;
  2. ES6模块编译时执行,而 CommonJS 模块总是在运行时加载。

export的使用

export const firstName = "Michael";
// const firstName = "Michael";
// export { firstName }; // 不能直接export firstName是因为export需要导出一个“接口”而不能是一个值。

export default

为模块指定默认输出,如果import接口时,可以用任意名称指向export default输出的方法