[油猴脚本开发指南]UMD简单介绍

李恒道

介绍

UMD模块化全称Universal Module Definition
通用模块化定义
如果你了解了AMD和CMD后
再学习UMD还是比较简单
简单来说
他就是一个js文件
在运行的时候根据环境变量来判断当前到底处于何种环境
然后以对应环境的方式来进行加载

代码样式

一个基本形式是

(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、CMD、Commonjs、浏览器全局四种
如下方就判断了AND、CommonJS、全局三种

    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);
    }

这届还是比较简单

结语

撒花~

引用

https://jameshfisher.com/2020/10/04/what-are-umd-modules/

MiracleL

感谢分享，正在学习