关于CommonJS、AMD、CMD、UMD说明

harryhappy 发布于2019-08-20 10:15 / 1807人阅读

摘要：函数有两个参数，第一个参数是当前运行时环境，第二个参数是模块的定义体。在执行规范时，会优先判断是当前环境是否支持环境，然后再检验是否支持环境，否则认为当前环境为浏览器环境

CommonJS规范

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

require 模块引用

exports 模块导出

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)规范

AMD 加载模块是异步的

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的区别有以下几点:

对于依赖的模块AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行(根据写法不同，处理方式不通过)

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 ）

GPU云服务器云服务器 amd_cmd区别关于云服务器续费的情况说明 CommonJS UMD

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80061.html

AMD, CMD, CommonJS和UMD

摘要：若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。其中是一个数组，里面的成员就是要加载的模块是模块加载完成之后的回调函数。在加载与两个模块之后执行回调函数实现具体过程。在判断是否支持是否存在，存在则使用方式加载模块。我的github(PS:希望star): https://github.com/tonyzheng1... 今天由于项目中引入的echarts的文件太大，req...

KavenFan 2019-08-19 18:02 评论0 收藏0
JS常见模块化规范(CommonJS/AMD/CMD/UMD/ES6 Module)

摘要：常见模块化方案是由社区提出的模块化方案中的一种，遵循了这套方案。是模块化规范中的一种，遵循了这套规范。中的模块化能力由两个命令构成和，命令用于规定模块的对外接口，命令用于输入其他模块提供的功能。为什么需要模块化在ES6出现之前，JS语言本身并没有提供模块化能力，这为开发带来了一些问题，其中最重要的两个问题应当是全局污染和依赖管理混乱。 // file a.js var name =...

walterrwu 2019-08-23 12:32 评论0 收藏0
JS模块化——CommonJS AMD CMD UMD ES6 Module 比较

摘要：即尽早地执行依赖模块。阮一峰输出值的引用模块是动态关联模块中的值，输出的是值得引用。的加载实现阮一峰运行时加载静态编译模块是运行时加载，模块是编译时输出接口。模块化开发优点模块化开发中，通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数，并且可以按需加载。依赖自动加载，按需加载。提高代码复用率，方便进行代码的管理，使得代码管理更加清晰、规范。减少了命名冲...

shadowbook 2019-08-26 13:40 评论0 收藏0
js中的模块化——commonjs,AMD,CMD,UMD,ES6

摘要：若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。这也是目前很多插件头部的写法，就是用来兼容各种不同模块化的写法。语句输出的值是动态绑定的，绑定其所在的模块。前言历史上，js没有模块化的概念，不能把一个大工程分解成很多小模块。这对于多人开发大型，复杂的项目形成了巨大的障碍，明显降低了开发效率，java，Python有import，甚至连css都有@import,但是令人费...

qpal 2019-08-23 13:49 评论0 收藏0
JS模块规范：AMD、UMD、CMD、commonJS、ES6 module

摘要：要想让模块再次运行，必须清除缓存。模块加载会阻塞接下来代码的执行，需要等到模块加载完成才能继续执行同步加载。环境服务器环境应用的模块规范是参照实现的。这等同在每个模块头部，有一行这样的命令。 commonJS 特点： 1、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。2、模块加载会阻塞接下来代...

_ang 2019-08-22 11:17 评论0 收藏0