JavaScript模块规范之AMD规范和CMD规范


Posted in Javascript onOctober 27, 2015

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得“有理可循”。

还有一些对于模块化一些专业的定义为:模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块。那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。

一、AMD

AMD就只有一个接口:define(id?,dependencies?,factory);

它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样:

define(['dep1','dep2'],function(dep1,dep2){...});

要是没什么依赖,就定义简单的模块,下面这样就可以啦

define(function(){
  var exports = {};
  exports.method = function(){...};
  return exports;
});

这里有define,把东西包装起来,那Node实现中怎么没看到有define关键字呢,它也要把东西包装起来,其实,只是Node隐式包装了而已..

RequireJS就是实现了AMD规范的

二、CMD

玉伯写了seajs,就是遵循他提出的CMD规范,比AMD稍微强大点,用起来感觉也方便些

三、AMD与CMD的区别

CMD相当于按需加载,定义一个模块的时候不需要立即制定依赖模块,在需要的时候require就可以了,比较方便;而AMD则相反,定义模块的时候需要制定依赖模块,并以形参的方式引入factory中

//AMD方式定义模块

define(['dep1','dep2'],function(dep1,dep2){
  //内部只能使用制定的模块
  return function(){};
});

//CMD

define(function(require,exports,module){
 //此处如果需要某XX模块,可以引入
 var xx=require('XX');
});

而SEAJS也有use功能也是需要先引入所有依赖的模块,如

//SEAJS.Use方式
seajs.use(['dep1','dep2'],function(dep1,dep2){
  //这里实现事务
});

 四、插件支持

但全球有两种比较流行的 JavaScript 模块化体系,一个是 Node 实现的 CommonJS,另外一个是 AMD。很多类库都同时支持 AMD 和 CommonJS,但是不支持 CMD。或许国内有很多 CMD 模块,但并没有在世界上流行起来。

现在比较火的 React 及周边类库,就是直接使用 CommonJS 的模块体系,使用 npm 管理模块,使用 Browserify 打包输出模块。
不久的将来 ES6 中新的模块化标准,可能就都得遵循新的标准了,什么AMD、CMD可能到时也不会怎么用了。

但是目前来说,前端开发没有用模块化编程就真的out的了,而目前的模块化编程,本人还是建议用SEAJS,虽然很多插件需要追加或修改一小块代码才能支持。但改过一次就能反复使用,也不会影响其它标准的支持。总体还算是比较方便实用的。

单独解释AMD 与 CMD 区别到底在哪里?

    看了以上 AMD,requireJS 与 CMD, seaJS的简单介绍会有点感觉模糊,总感觉较为相似。因为像 requireJS 其并不是只是纯粹的AMD固有思想,其也是有CMD规范的思想,只不过是推荐 AMD规范方式而已, seaJS也是一样。

    下面是玉伯对于 AMD 与 CMD 区别的解释:

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

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

    类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出还有不少??

    这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。 

   目前这些规范的实现都能达成浏览器端模块化开发的目的。    

 区别:

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

    2. CMD 推崇依赖就近,AMD 推崇依赖前置。看代码:

// CMD

define(function(require, exports, module) {
 var a = require('./a')
 a.doSomething()
 // 此处略去 100 行
 var b = require('./b') // 依赖可以就近书写
 b.doSomething()
 // ...
})

// AMD 默认推荐的是

define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
 a.doSomething()
 // 此处略去 100 行
 b.doSomething()
 // ...
})

虽然 AMD 也支持 CMD 的写法,同时还支持将 require 作为依赖项传递,但 RequireJS 的作者默认是最喜欢上面的写法,也是官方文档里默认的模块定义写法。

    3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。

CMD 里,每个 API 都简单纯粹。

    4. 还有一些细节差异,具体看这个规范的定义就好,就不多说了。

Javascript 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
浅析node.js的模块加载机制
May 25 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 #Javascript
jQuery无刷新分页完整实例代码
Oct 27 #Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 #Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 #Javascript
JavaScript编程中window的location与history对象详解
Oct 26 #Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 #Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 #Javascript
You might like
php whois查询API制作方法
2011/06/23 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
如何在selenium中使用js实现定位
2020/08/18 Javascript
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python文件选择对话框的操作方法
2019/06/27 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Python生成器实现简单"生产者消费者"模型代码实例
2020/03/27 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
运动会口号8字
2014/06/07 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书