Javascript-Basic-模块化历史
文章目录

模块化的历史

上古时期 <script> 引入

直接挂载到 window 作用域

经常性被覆盖

IIFE & SEAF

就是闭包实现实现自运行匿名函数

AMD & CMD & UMD

define & require

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// AMD
define(['./a', './b'], function(a, b) {
// 加载模块完毕可以使用
a.do();
b.do();
});

// CMD
define(function(require, exports, module) {
// 加载模块
// 可以把 require 写在函数体的任意地方实现延迟加载
var a = require('./a');
a.doSomething();

// 也可以使用 require.async 来延迟加载
require.async('./b', function(b) {
b.doSomething();
});
});

UMD 是将 AMD 和 CMD 进行了整合

Node (CommonJS)

exports ( module.exports ) , require , global , __filename , __dirname

CommonJS 是的 NodeJS 所使用的一种服务端的模块化规范, 它将每一个文件定义为一个 module, 模块必须通过 module.exports 导出对外的变量或接口, 通过 require() 来导入其他模块的输出到当前模块作用域中

EcmaScript Module (ESM)

ESM = EcmaScript Module

ESM 是 ES6 提供的官方 js 模块化方案, import 和 export

CommonJS 和 ESM 的区别

现在基本上大家都用 ESM

  • 浏览器两个都读不懂
    • require/exports 要通过 webpack 打包之后才可以转, 换成浏览器可以识别的.
    • import/export 需要在引入模块的 <script> 元素上添加 type="module" 属性.
  • require/exports 是运行时动态加载, import/export 是静态编译
    • require/exports 加载的是一个对象, 该对象只有在脚本运行完才会生成.
      • 总之就是运行完才会生成
    • 而 ES6 模块不是对象, 它的对外接口只是一种静态定义, 在代码静态解析阶段就会生成.
      • 这个的意思就是在解析的时候就会生成, 不用等它运行完
  • require/exports 输出的是一个值的拷贝, import/export 模块输出的是值的引用
    • 有些时候模块内部的值会造成一些变化,import/export 就会影响到输出之后的变量
  • require/exports 默认不会调用严格模式, import/export 默认调用严格模式

参考文献