umd 学习

什么是UMD

所谓UMD (Universal Module Definition)，就是一种javascript通用模块定义规范，让你的模块能在javascript所有运行环境中发挥作用。

同一像CommonJs和AMD的一个　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　规范。所以人们产生了这样的需求，希望有支持两种风格的“通用”模式，于是通用模块规范（UMD）诞生了。

有依赖关系的UMD模块

模块会被调用，当然也会调用其他模块。因此我们还需要实现一个有依赖关系的UMD模块，来验证UMD规范的可行性。

　　全局对象挂载属性

　　这个简单，在html中你的模块前引入所依赖的模块即可。umd-module-depended和umd-module都是UMD模块，后者依赖前者。

　　

<!DOCTYPE html>
<html>
    <head>
        <title>Test UMD</title>
        <!-- 依赖放前面 -->
        <script src="assets/js/umd-dep/umd-module-depended.js"></script>
        <script src="assets/js/umd-dep/umd-module.js"></script>
        <script src="assets/js/umd-dep/umd-global.js"></script>
    </head>
    <body>
        <h1>测试UMD模块</h1>
        <h2></h2>
        <p id="content"></p>
        <p id="content2"></p>
    </body>
</html>

兼容AMD规范

我们先在入口文件umd-main-requirejs.js中，定义好模块路径，方便调用。

require.config({
    baseUrl: "./assets/js/umd-dep/",
    paths: {
        umd: "umd-module",
        depModule: "umd-module-depended"
    }
});

被依赖的模块umd-module-depended，只需要简单实现UMD规范即可。

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模块'
    }
}))

 

posted @ 2021-01-10 20:43  咱这个需求做不了  阅读(387)  评论(0)    收藏  举报