JavaScript模块规范之AMD规范和CMD规范_javascript技巧

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

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js_amd_cmd规范
, js_amd_cmd
amd_cmd区别
javascript amd cmd、javascript amd规范、javascript cmd规范、amd规范和cmd规范、amd和cmd规范的区别,以便于您获取更多的相关知识。

时间: 2024-12-03 20:39:50

JavaScript模块规范之AMD规范和CMD规范_javascript技巧的相关文章

in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案_javascript技巧

国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器.但是本文将会向大家介绍一个新的开源的轻量级"多线程"异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用. 优点: 按需加载 无阻塞加载 依赖关系管理 颗粒化模块管理 如何使用? A.引入In.js 复制代码 代

JavaScript中数组slice和splice的对比小结_javascript技巧

前言 今天重温了一下Javascript,看到了数组的方法,其中有两个比较相似的方法--splice和splice,看着很像,就是多了一个p,但是用法却相当不一样. 在使用中,可以通过选择一个具有强语义表达性的 API 来减少混淆的发生. 1.slice slice是指定在一个数组中的元素创建一个新的数组,即原数组不会变 数组的 slice (ECMAScript 5.1 标准 15.4.4.10 节)非常类似于字符串的 slice.根据规范,slice 需要两个参数,起点和终点.它会返回一个包

javascript cookies 设置、读取、删除实例代码_javascript技巧

刚整理了一些关于javascript cookies操作的文章,发现这篇文章也不错,推荐大家一起参考,选择需要的,不足的地方主要是对路径的设置,喜欢的朋友可以结合下. 复制代码 代码如下: <script> function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值 { var Days = 30; //此 cookie 将被保存 30 天 var exp = new Date(); //new Date("December 31,

深入理解JavaScript系列(12) 变量对象(Variable Object)_javascript技巧

JavaScript编程的时候总避免不了声明函数和变量,以成功构建我们的系统,但是解释器是如何并且在什么地方去查找这些函数和变量呢?我们引用这些对象的时候究竟发生了什么? 原始发布:Dmitry A. Soshnikov 发布时间:2009-06-27 俄文地址:http://dmitrysoshnikov.com/ecmascript/ru-chapter-2-variable-object/ 英文翻译:Dmitry A. Soshnikov 发布时间:2010-03-15 英文地址:http

浅谈JavaScript中小数和大整数的精度丢失_javascript技巧

先来看两个问题: 0.1 + 0.2 == 0.3; // false 9999999999999999 == 10000000000000000; // true 第一个问题是小数的精度问题,在业界不少博客里已有讨论.第二个问题,去年公司有个系统的数据库在做数据订正时,发现有部分数据重复的诡异现象.本文将从规范出发,对上面的问题做个小结. 最大整数 JavaScript 中的数字是用 IEEE 754 双精度 64 位浮点数 来存储的,其格式为: s x m x 2^e s 是符号位,表示正负

javascript解决小数的加减乘除精度丢失的方案_javascript技巧

原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3*1 = 0.2999999999等,下面列出可以完美求出相应精度的四种js算法 function accDiv(arg1,arg2){ var t1=0,t2=0,r1,r2; try{t1=arg1.toString().split(".")[1].length}catch(e){} t

通用javascript代码判断版本号是否在版本范围之间_javascript技巧

通用判断版本号是否在两者之间,也可以搭配判断是否大于某版本号,小于取反即可 PS:需确保版本规范一致,比如都是.号分割的n位版本号 var APP = {}; //判断指定版本是否在版本范围之间,需确保版本规范一致;比如 (..,..,..) APP.betweenVersion = function(curr,start,end,separator){ if(curr == start || curr == end){ return true; } var separator = separa

深入理解JavaScript系列(16) 闭包(Closures)_javascript技巧

介绍 本章我们将介绍在JavaScript里大家经常来讨论的话题 -- 闭包(closure).闭包其实大家都已经谈烂了.尽管如此,这里还是要试着从理论角度来讨论下闭包,看看ECMAScript中的闭包内部究竟是如何工作的. 正如在前面的文章中提到的,这些文章都是系列文章,相互之间都是有关联的.因此,为了更好的理解本文要介绍的内容,建议先去阅读第14章作用域链和第12章变量对象. 英文原文:http://dmitrysoshnikov.com/ecmascript/chapter-6-closu

浅谈JavaScript中的对象及Promise对象的实现_javascript技巧

JavaScript 中的所有事物都是对象:字符串.数值.数组.函数.下面小编给大家收集整理些javascript中的对象及promise对象的实现.具体内容如下: 到处都是对象 window对象 常用的属性和方法介绍 location 包含页面的URL,如果改变这个属性,浏览器会访问新的URL status 包含将在浏览器状态去显示的一个串.一般在浏览器左下角 onload: 包含了需要在页面完全加载后调用的函数 document: 包含DOM alert方法: 显示一个提醒 prompt方法

javascript框架设计之框架分类及主要功能_javascript技巧

从内部架构和理念划分,目前JavaScript框架可以划分为5类. 第一种是以命名空间为导向的类库或框架,如果创建一个数组用new Array(),生成一个对象用new Object(),完全的java风格,因此,我们以某一对象为跟,不断为它添加对象和二级对象属性来组织代码,如金字塔般垒起来,早期代表YUI,EXT(so,不是有活力的公司都还用它们) 第二种是以类工厂为导向的框架.著名的有Prototype,还有mootools.Base2.Ten,它们基本上除了最基本的命名空间,其它模块都是一