JS的模块机制

远子 •  2020年10月28日

image.png

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

  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 之间的关系:

image.png

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'), 但是只能整体加载,不能按需加载。

(完)