关于CommonJS、AMD、CMD、UMD申明

CommonJS范例

CommonJS定义的模块分为3部份:

  1. require 模块援用

  2. exports 模块导出

  3. module 模块自身

依据CommonJS范例,一个零丁的文件就是一个模块。每个模块都是一个零丁的作用域,也就是说,在一个文件定义的变量(还包含函数和类),都是私有的,对其他文件是不可见的

// a.js

var a = {
    "a":a,
    "b":b
}

module.export = a //模块导出

// b.js
var b = require('./a.js') //模块引入

CommonJS 加载模块是同步的,所以只要加载完成才实行背面的操纵

AMD(Asynchromous Module Definition)范例

  1. AMD 加载模块是异步

  2. define(id?, dependencies?, factory);

    id: 模块标识,能够省略。
    dependencies: 所依靠的模块,能够省略。
    factory: 模块的完成,或许一个JavaScript对象。    
    
   //a.js 只要factory
   define(function() {
       return {
           mix: function(source, target) {
               ...
            }
        };
    });
    
    //b.js 依靠a.js
    define(['a'], function(a) {
        return {
            show: function() {
               ...
            }
        }
    });
    
    //c.js 依靠a.js b.js
    define(['a', 'b'], function(a, b) {
        ....
    });
    
    //d.js 对象模块
    define({
        data1: [],
        data2: []
    });

AMD范例许可输出模块兼容CommonJS范例,这时候define要领以下:

    define(function (require, exports, module) {
        var reqModule = require("./a.js");
        requModule.mix();
        
        exports.asplode = function () {
            ...
        }
    });

CMD(Common Module Definition)范例

CMD和AMD的区分有以下几点:

  1. 关于依靠的模块AMD是提早实行,CMD是耽误实行。不过RequireJS从2.0最先,也改成能够耽误实行(依据写法差别,处理方式不通过)

  2. CMD推重依靠就近,AMD推重依靠前置

    //AMD写法
    define(['./a','./b'], function (a, b) {
        //依靠一最先就写好
        a.mix();
        b.show();
    });
    
    //CMD写法
    define(function (requie, exports, module) {
        //依靠能够就近誊写
        var a = require('./a');
        a.mix();
        
        if (...) {
            var b = requie('./b');
            b.show();
        }
    });

UMD(Universal Module Definition)范例

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    methods
    function myFunc(){};

    //    exposed public method
    return myFunc;
}));

运用UMD范例的js文件实在就是一个马上实行函数。函数有两个参数,第一个参数是当前运行时环境,第二个参数是模块的定义体。在实行UMD范例时,会优先推断是当前环境是不是支撑AMD环境,然后再磨练是不是支撑CommonJS环境,不然以为当前环境为浏览器环境( window

    原文作者:zhangxiaohu
    原文地址: https://segmentfault.com/a/1190000006232697
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞