各类模块规范以及AMD/UMD原理

DongYuanxin

2023-02-10

几种模块化规范

CommonJS：Nodejs，运行在服务端环境
CMD（Common Module Definition - 通用模块定义）：主要通过 sea.js 流行起来，是国内大佬的作品。

写法模仿CommonJS规范，不过是运行在浏览器环境
AMD（Asynchronous Module Definition - 异步模块定义）：采用异步加载，运行在浏览器环境，使用广泛。常用的库是 require.js
UMD（Universal Module Definition - 通用模块定义）：该模式主要用来解决CommonJS模式和AMD模式代码不能通用的问题。
在开发中，产物模块规范变成umd后，可以在commonjs、AMD、CMD等多种环境下使用，应用广泛，功能强大，是线上产物常用规范。
ESM（ES Modules）：ES6 规范，目前也可以运行在高版本的浏览器和Nodejs中

参考文章

bookmark

IIFE

CMD、AMD、UMD的实现，本质上就是利用函数立即执行表达式（immediately invoked function expression），在不同环境下的全局对象上，挂入模块。

Sea.js 实现原理（不推荐使用）

魔法在哪里？

1
2
3

define('a', function (require,exports,modules){
	var b = require('b')
})

和 require.js 显式声明依赖不一样，写法类似 CommonJS 规范。

由于没有去提前声明/配置（回调函数只有定义，没有运行），那么如何在「加载期」知道依赖哪个模块呢？

实现原理

核心是利用 Function.toString 方法，拿到「函数的字符串定义」。

「加载期」：

通过回调函数的Function.toString函数，使用正则表达式来捕捉内部的require字段，找到require(‘jquery’)内部依赖的模块jquery
根据配置文件，找到jquery的js文件的实际路径；如果有多个依赖，也会根据依赖树确定先后顺序
在dom中插入script标签，载入模块指定的js，绑定加载完成的事件，使得加载完成后将js文件绑定到require模块指定的id（这里就是jquery这个字符串）上

「运行期」：

回调函数内部依赖的js全部加载（暂不调用）完后，调用回调函数
当回调函数调用require(‘jquery’)，即执行绑定在’jquery’这个id上的js文件，即刻执行，并将返回值传给var b

参考文章

bookmark

UMD

魔法在哪里？

支持AMD、CMD规范，也支持原生的直接在window上定义的做法，还支持CommonJS。

实现原理

利用 IIFE 的写法，内部区别处理即可。

下面是考虑到「有前置依赖」的UMD的实现思路：

(function(root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        console.log('是commonjs模块规范，nodejs环境')
        var depModule = require('./umd-module-depended')
        module.exports = factory(depModule);
    } else if (typeof define === 'function' && define.amd) {
        console.log('是AMD模块规范，如require.js')
        define(['depModule'], factory)
    } else if (typeof define === 'function' && define.cmd) {
        console.log('是CMD模块规范，如sea.js')
        define(function(require, exports, module) {
            var depModule = require('depModule')
            module.exports = factory(depModule)
        })
    } else {
        console.log('没有模块环境，直接挂载在全局对象上')
        root.umdModule = factory(root.depModule);
    }
}(this, function(depModule) {
    console.log('我调用了依赖模块', depModule)
		// ...省略了一些代码，去代码仓库看吧
    return {
        name: '我自己是一个umd模块'
    }
}))