首頁 > web前端 > js教程 > JavaScript模組規範之AMD規格與CMD規格_javascript技巧

JavaScript模組規範之AMD規格與CMD規格_javascript技巧

WBOY
發布: 2016-05-16 15:34:56
原創
1608 人瀏覽過

模組化是指在解決某一個複雜問題或一系列的雜糅問題時,依照一種分類的思維把問題進行系統性的分解以之處理。模組化是一種處理複雜系統分解為程式碼結構更合理,可維護性更高的可管理的模組的方式。可以想像一個巨大的系統程式碼,當被整合優化分割成邏輯性很強的模組時,對於軟體是一種何等意義的存在。對於軟體產業來說:解耦軟體系統的複雜性,使得不管多麼大的系統,也可以將管理,開發,維護變得「有理可循」。

還有一些對於模組化一些專業的定義為:模組化是軟體系統的屬性,這個系統被分解為一組高內聚,低耦合的模組。那麼在理想狀態下我們只需要完成自己部分的核心業務邏輯程式碼,其他方面的依賴可以透過直接載入被人已經寫好模組來使用即可。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板