文档章节

关于 CommonJS AMD CMD UMD

奥巴码侬
 奥巴码侬
发布于 2014/05/11 19:37
字数 843
阅读 15683
收藏 28

CommonJS

CommonJs 是服务器端模块的规范,Node.js采用了这个规范。

根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。

例如:

// foobar.js

//私有变量
var test = 123;

//公有方法
function foobar () {

    this.foo = function () {
        // do someing ...
    }
    this.bar = function () {
        //do someing ...
    }
}

//exports对象上的方法和变量是公有的
var foobar = new foobar();
exports.foobar = foobar;
//require方法默认读取js文件,所以可以省略js后缀
var test = require('./foobar').foobar;

test.bar();


CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,要从服务器加载模块,这是就必须采用异步模式。所以就有了 AMD  CMD 解决方案。

AMD((Asynchromous Module Definition)

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出

AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块。

适用AMD规范适用define方法定义模块。

//通过数组引入依赖 ,回调函数通过形参传入依赖
define(['someModule1', ‘someModule2’], function (someModule1, someModule2) {

    function foo () {
        /// someing
        someModule1.test();
    }

    return {foo: foo}
});

AMD规范允许输出模块兼容CommonJS规范,这时define方法如下:

define(function (require, exports, module) {
    
    var reqModule = require("./someModule");
    requModule.test();
    
    exports.asplode = function () {
        //someing
    }
});

CMD

CMD是SeaJS 在推广过程中对模块定义的规范化产出

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

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

2.CMD推崇依赖就近,AMD推崇依赖前置。

//AMD
define(['./a','./b'], function (a, b) {

    //依赖一开始就写好
    a.test();
    b.test();
});

//CMD
define(function (requie, exports, module) {
    
    //依赖可以就近书写
    var a = require('./a');
    a.test();
    
    ...
    //软依赖
    if (status) {
    
        var b = requie('./b');
        b.test();
    }
});

虽然 AMD也支持CMD写法,但依赖前置是官方文档的默认模块定义写法。

3.AMD的api默认是一个当多个用,CMD严格的区分推崇职责单一。例如:AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。

SeaJS 和 RequireJS的主要区别 在此有解释

UMD

umd是AMD和CommonJS的糅合

AMD 浏览器第一的原则发展 异步加载模块。

CommonJS 模块以服务器第一原则发展,选择同步加载,它的模块无需包装(unwrapped modules)。

这迫使人们又想出另一个更通用的模式UMD (Universal Module Definition)。希望解决跨平台的解决方案。

UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式。

在判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。

(function (window, factory) {
    if (typeof exports === 'object') {
    
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
    
        define(factory);
    } else {
    
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});


© 著作权归作者所有

共有 人打赏支持
奥巴码侬
粉丝 33
博文 122
码字总数 43584
作品 0
西城
程序员
私信 提问
加载中

评论(8)

全体人员
全体人员
不错,收藏了~~
哭泣的欢乐
哭泣的欢乐
797979
奥巴码侬
奥巴码侬

引用来自“柒月-小妖精”的评论

不错 不错
柒月-小妖精
柒月-小妖精
不错 不错
奥巴码侬
奥巴码侬

引用来自“CDELL”的评论

路过,学习了~小提一句,最后的UMD段落里第一个if条件里typeod是不是typeof的手误?
纯属手误
CDLL
CDLL
路过,学习了~小提一句,最后的UMD段落里第一个if条件里typeod是不是typeof的手误?
奥巴码侬
奥巴码侬

引用来自“许雷神”的评论

谢谢楼主
多多交流
许雷神
许雷神
谢谢楼主
关于 CommonJS AMD CMD UMD

一、CommonJS CommonJs 是服务器端模块的规范,Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件...

雪飘七月
06/26
0
0
CommonJS/AMD/CMD/UMD概念初探

1、CommonJS是一种规范,NodeJS是这种规范的实现。 1.1、CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。 参考: http://www.commonjs.org/ http://javascript.ruanyifen...

easonjim
2016/12/12
0
0
TypeScript 模块导入那些事

ES6 模块导入的限制 我们先来看一个具体的例子: 在 Node 项目里,使用 CommonJS 规范引入一个模块: 改写为 TypeScript(1.5+ 版本)时,通常有两种方式: 使用 ES6 模块导入方式: 使用 Ty...

三毛丶
10/28
0
0
你真的懂模块化吗?教你CommonJS实现

你真的懂模块化吗 加紧学习,抓住中心,宁精勿杂,宁专勿多。 —— 周恩来 模块简史 早期的 JavaScript 往往作为嵌入到 HTML 页面中的用于控制动画与简单的用户交互的脚本语言,我们习惯这样...

上帝的眼
08/07
0
0
再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6

Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。 Javascript社区做了很多努力,在现有的运行环境中,实现...

周陆军
08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小程序异步操作 跨js执行 在微信小程序里面实现跨页面通信

我们知道,在小程序里面一个页面的变化,是通过调用 setData 函数来实现的。所以想做到在二级页面里让一级页面产生变化,最 Quick And Dirty 的做法就是把一级页面的 this 传入到二级页面去,...

xiaogg
12分钟前
0
0
授于管理员登录其它用户

1.沙盒中,授予管理员登录 安全性控制==>登录访问权限政策

在山的那边
15分钟前
1
0
线程安全的CopyOnWriteArrayList介绍

证明CopyOnWriteArrayList是线程安全的 先写一段代码证明CopyOnWriteArrayList确实是线程安全的。 ReadThread.java import java.util.List; public class ReadThread implements Runnable {......

绝地逢生
17分钟前
0
0
Java重写的7个规则

几年前你可能会遇到这样一个面试题:“重写和重载的区别”、而现在随着科技的更迭、面试的问题越来越高级、面试官的问题也越来越深入、此文是上述面试题的一个延伸、让你从简单的重写规则中更...

architect刘源源
17分钟前
1
0
JavaScript异步编程:Generator与Async

从Promise开始,JavaScript就在引入新功能,来帮助更简单的方法来处理异步编程,帮助我们远离回调地狱。 Promise是下边要讲的Generator/yield与async/await的基础,希望你已经提前了解了它。...

前端攻城老湿
18分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部