CommonJS AMD CMD UMD

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('./boobar').foobar;

test.bar();

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

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义".

AMD设计出一个简洁的写模块API:

define(id?, dependencies?, factory);

第一个参数 id 为字符串类型,表示了模块标识,为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。

第二个参数,dependencies ,是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。

第三个参数,factory,是一个需要进行实例化的函数或者一个对象。

RequireJS

RequireJS 是一个前端的模块化管理的工具库,遵循AMD规范,它的作者就是AMD规范的创始人 James Burke。所以说RequireJS是对AMD规范的阐述一点也不为过。

RequireJS 的基本思想为:通过一个函数来将所有所需要的或者说所依赖的模块实现装载进来,然后返回一个新的函数(模块),我们所有的关于新模块的业务代码都在这个函数内部操作,其内部也可无限制的使用已经加载进来的以来的模块。

<script data-main='scripts/main' src='scripts/require.js'></script>

那么scripts下的main.js则是指定的主代码脚本文件,所有的依赖模块代码文件都将从该文件开始异步加载进入执行。

define用于定义模块,RequireJS要求每个模块均放在独立的文件之中。按照是否有依赖其他模块的情况分为独立模块和非独立模块。

独立模块,不依赖其他模块。直接定义:

define({

method1: function(){},

method2: function(){}

});

也等价于

define(function() {

return {

method1: function(){},

method2: function(){}

}

});

非独立模块,对其他模块有依赖。

define([ 'module1', 'module2' ], function(m1, m2) {

...

});

或者:

define(function(require) {

var m1 = require('module1'),

m2 = require('module2');

...

});

简单看了一下RequireJS的实现方式,其 require 实现只不过是提取 require 之后的模块名,将其放入依赖关系之中。

require方法调用模块

在require进行调用模块时,其参数与define类似。

require(['foo', 'bar'], function(foo, bar) {

foo.func();

bar.func();

} );

在加载 foo 与 bar 两个模块之后执行回调函数实现具体过程。

当然还可以如之前的例子中的,在define定义模块内部进行require调用模块

define(function(require) {

var m1 = require( 'module1' ),

m2 = require( 'module2' );

...

});

define 和 require 这两个定义模块,调用模块的方法合称为AMD模式,定义模块清晰,不会污染全局变量,清楚的显示依赖关系。AMD模式可以用于浏览器环境并且允许非同步加载模块,也可以按需动态加载模块。

官网 (http://www.requirejs.org/)

API http://www.requirejs.org/docs/api.html

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

为什么说like Rhino and Node. 而不是like Rhino and V8

http://www.requirejs.org/docs/node.html

Mozilla Rhino 是一个完全使用Java语言编写的开源JavaScript引擎实现,主要用于在java环境中执行xxx.js 或者 js程序。Rhino通常用于在Java程序中,为最终用户提供脚本化能力。Rhino(犀牛)这个名字来源于O'Reilly出版的著名的“犀牛书”JavaScript: The Definitive Guide(中文译名:JavaScript权威指南)。

V8使用C++开发,并在谷歌浏览器中使用。在运行JavaScript之前,相比其它的JavaScript的引擎转换成字节码或解释执行,V8将其编译成原生机器码(IA-32, x86-64, ARM, or MIPS CPUs),并且使用了如内联缓存(inline caching)等方法来提高性能。有了这些功能,JavaScript程序在V8引擎下的运行速度媲美二进制程序。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

Node.js 的包管理器 npm,是全球最大的开源库生态系统。

CMD

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

SeaJS

官网 http://seajs.org/docs/

API快速参考 https://github.com/seajs/seajs/issues/266

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

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();

}

});

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 ...

});

SeaJs和RequireJs区别

1.定位有差异。RequireJS 想成为浏览器端的模块加载器,同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。

2.遵循的规范不同。RequireJS 遵循 AMD(异步模块定义)规范,Sea.js 遵循 CMD (通用模块定义)规范。规范的不同,导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

3.推广理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS,目前只有少数社区采纳。Sea.js 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。

4.对开发调试的支持有差异。Sea.js 非常关注代码的开发调试,有 nocache、debug 等用于调试的插件。RequireJS 无这方面的明显支持。

5.插件机制不同。RequireJS 采取的是在源码中预留接口的形式,插件类型比较单一。Sea.js 采取的是通用事件机制,插件类型更丰富。

https://www.douban.com/note/283566440/

OzJs

http://ozjs.org/

推荐阅读更多精彩内容

  • 随着前端业务复杂度的增加,模块化成为一个大的趋势。而在ES6还未被浏览器所支持的情况下,commonjs作为ES6...
    吴高亮阅读 845评论 0 3
  • 1 个人理解;有错希望大家指出;稍后更新拖拽上传文件; 2、commonJS commonjs的目标是制定一个js...
    吴高亮阅读 1,206评论 0 2
  • 转载自:https://www.cnblogs.com/chenguangliang/p/5856701.html...
    小豆soybean阅读 319评论 0 2
  • 以代码爱好者角度来看AMD与CMD 随着浏览器功能越来越完善,前端已经不仅仅是切图做网站,前端在某些方面已经媲美桌...
    鄙人才疏学浅阅读 898评论 0 7
  • 我的Github(https://github.com/tonyzheng1990/tonyzheng1990.g...
    tonyzheng1阅读 15,764评论 5 58
  • 2016年9月来到这里,转眼今年6月就要离开,这里让我留恋不已却带不走的只有你——淮安天空的棉花糖 —乡下清晨的天...
    云微凉阅读 50评论 0 0
  • 像沉入无边黑暗般 呼吸沉重 像堕入无尽深渊般 恍然无措 像陷入没有光明的绝望般 无力挣扎 我的意识游离于神经之外 ...
    森之川阅读 175评论 0 6
  • (1) 我半路出家做市场和销售,没有系统的接受过相关的培训,直到现在面对销售过程中的一些场景,我仍然不能很好的应对...
    古侯子阅读 3,246评论 1 7
  • 石径 也曾是繁华处 喧嚣风尘带走了其他 独留两两相望 如今 又被秋风遗忘 你陪着我,我陪着你 相伴过冬
    与你画夕阳阅读 87评论 0 3
  • 时间对于每个人都是公平的,每个人都拥有相同的24小时,不像《折叠北京》这本书里有三个空间,第一空间的人完全拥有24...
    皓妈童书分享会阅读 7,530评论 28 215