JS的模块机制

复杂的前端项目需要做分层处理，按照功能、业务、组件拆分成模块， 模块化的项目至少有以下优点：

1. 便于单元测试
2. 便于同事间协作
3. 抽离公共方法, 开发快捷
4. 按需加载, 性能优秀

1. 是什么

有四种模块化规范：

• 用于客户端有三种：
  1. AMD 规范，RequireJS 实现了 AMD；
  2. CMD 规范，SeaJS 实现了 CMD；
  3. UMD 规范，同时支持 AMD 和 CMD；
• 用于服务端只有一种：
  1. CommonJS 规范，Node 采用了 CommonJS；

以上都是社区衍生的，ES Module 是 JS 官方的模块化方案

下面主要分析 CommonJS 和 ES Module。

2. 怎么用

下图是 Node 与浏览器以及 W3C 组织、CommonJS 组织、ECMAScript 之间的关系：

CommonJS 语法：

• 使用 require() 导入；
• 使用 module.exports 导出；

ES Module 语法：

• 使用 import 导入；
• 使用 export 导出；

3. 区别

CommonJS 文档，ES Module 文档。

• CommonJS 同步加载，ES Module 异步加载；
• CommonJS 输出的是值的拷贝，ES Module 输出的是值的引用；
• CommonJS 是单个值导出，ES Module 可以导出多个；
• CommonJS 中的 this 执行当前模块,ES Module 中的 this 是 undefined；

Node 并未完全采用 CommonJS 规范。

并且逐步在废弃 CommonJS 规范，V13.2.0 版本已经开始默认支持 ES Module。

4. 融合

在 CommonJS 中导入 ES Module 模块：不能直接 require('./es6.js')，需要转换一次。

// mid.js
(async () => {
    await import("./es6.js");
})();

在 ES Module 中导入 CommonJS 模块：可以直接 import('./commonjs.js')， 但是只能整体加载，不能按需加载。