文档章节

关于 CommonJS AMD CMD UMD

奥巴码侬
 奥巴码侬
发布于 2014/05/11 19:37
字数 843
阅读 15385
收藏 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...

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

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

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

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

周陆军
08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

VSCode 搭建Vue开发环境之Vue CLI

一、简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式前端框架,不仅易于上手,还便于与第三方库或既有项目整合。 3.关于Vue是使用方...

tianma3798
24分钟前
2
0
MySQL 相关博客整理

1. 《深入理解 MySQL 底层实现》 简评:文章从硬盘底层存储原理讲解到MySQL存储原理,其中涉及InnoDB 和 Myisam 中 B+Tree 的应用,以及常见数据库优化思路,算是一片很不错的讲解MySQL原理的...

科陆李明
34分钟前
2
0
pada rabbitmq server mangage

查看配置文件 ubuntu@node4:/etc/rabbitmq$ lltotal 28drwxr-xr-x 2 rabbitmq rabbitmq 4096 Jun 6 13:52 ./drwxr-xr-x 104 root root 12288 Sep 26 11:39 ../-rw-r--r-- ......

qwfys
41分钟前
0
0
SpringBoot进阶

慕课网链接 表单数据的验证 在pojo类属性的上面添加注解 @Entitypublic class Girl { @Id @GeneratedValue private Integer id; @NotBlank(message = "这个字段...

踏破铁鞋无觅处
49分钟前
1
0
【SylixOS】QT-QWS流程介绍

QWS简介 QWS(QT Windows System)是QT自行开发的窗口系统,体系结构类似X Windows的C/S结构。QWS Server在物理设备上显示,QWS Client实现界面,两者通过socket进行彼此的通讯。在很多嵌入式系...

suokin
49分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部