跳到主要内容

UMD 模块化介绍

UMD 模块化全称 Universal Module Definition,即通用模块化定义

如果你了解了 AMD 和 CMD 后,再学习 UMD 还是比较简单的

简而言之,他对源代码进行打包并在运行的时候根据环境变量来判断当前到底处于何种环境

然后以对应环境的方式来进行相应的环境处理

一个基本形式是

(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["exports", "b"], factory);
} else if (
typeof exports === "object" &&
typeof exports.nodeName !== "string"
) {
// CommonJS
factory(exports, require("b"));
} else {
// Browser globals
factory((root.myModuleName = {}), root.b);
}
})(typeof self !== "undefined" ? self : this, function (exports, b) {
// Use b in some fashion.

// attach properties to the exports object to define
// the exported module properties.
exports.action = function () {};
});

function (root, factory)这个函数是一个自执行函数,传入了两个参数

一个是当前的指向,如 self 或 this,第二个参数是回调函数,通常是我们自己的代码

并在内部会根据各种变量和形式来判断是否存在对应的模块化工具函数

可以看到针对了 AMD,CommonJS,以及浏览器全局这三种,当然,一些打包后的UMD代码也会兼容CMD,具体根据情况而定

总而言之,UMD会判断相应的模块化环境来将代码挂载到适当的位置当中