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

 更新时间:2015年10月27日 10:33:09   投稿:mrr  
本篇文章给大家介绍js模块规范之AMD规范和CMD规范,模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式,对js amd cmd规范感兴趣的童鞋可以来本文学习

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

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

一、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. 还有一些细节差异,具体看这个规范的定义就好,就不多说了。

相关文章

  • 详解ES6中的三种异步解决方案

    详解ES6中的三种异步解决方案

    这篇文章主要介绍了详解ES6中的三种异步解决方案,详细的介绍了这三种方案的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • JavaScript常用8种数组去重代码实例

    JavaScript常用8种数组去重代码实例

    这篇文章主要介绍了JavaScript常用8种数组去重代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 基于javascript显示当前时间以及倒计时功能

    基于javascript显示当前时间以及倒计时功能

    这篇文章主要为大家详细介绍了基于javascript显示当前时间以及倒计时功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • window.onerror()的用法与实例分析

    window.onerror()的用法与实例分析

    目前在做window.onerror时上报js错误信息的事,整理下相关资料,需要的朋友可以参考下
    2016-01-01
  • JavaScript内置日期、时间格式化时间实例代码

    JavaScript内置日期、时间格式化时间实例代码

    JS中的 Date 对象用于处理日期和时间,Date对象和Math对象不一样,Date是一个构造函数,需要实例化后才能使用对象中具体的方法和属性。这篇文章主要给大家介绍了关于JavaScript内置日期、时间格式化时间的相关资料,需要的朋友可以参考下
    2021-05-05
  • JavaScript中ahooks 处理 DOM 的方法

    JavaScript中ahooks 处理 DOM 的方法

    这篇文章主要介绍了JavaScript中ahooks处理DOM的方法,主要通过ahooks对DOM类Hooks使用规范,以及源码中是如何去做处理的,具体详细介绍需要的小伙伴可以参考一下下面文章内容
    2022-06-06
  • JS操作Cookies包括(读取添加与删除)

    JS操作Cookies包括(读取添加与删除)

    一直都是简单去js实现cookie的一些操作,今天把js对cookie操作系统的整理了一遍,包括:js读取cookie,js添加cookie,js删除cookie
    2012-12-12
  • Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案

    Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案

    Bootstrap modal 多弹窗之叠加显示不出弹窗问题,今天小编抽时间给大家分享下解决方案,需要的朋友参考下
    2017-02-02
  • JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

    JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

    这篇文章主要介绍了JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例,可以实现逼真模拟手机拨号盘界面并实现点击输入对应号码的功能,需要的朋友可以参考下
    2015-05-05
  • 微信小程序版本自动更新的方法

    微信小程序版本自动更新的方法

    这篇文章主要介绍了微信小程序版本自动更新的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06

最新评论