JavaSript模塊化

在了解AMD，CMD規范前，還是需要先來簡單地了解下什么是模塊化，模塊化開發？
模塊化是指在解決某一個復雜問題或者一系列的雜糅問題時，依照一種分類的思維把問題進行系統性的分解以之處理。
模塊化是一種處理復雜系統分解為代碼結構更合理，可維護性更高的可管理的模塊的方式。
可以想象一個巨大的系統代碼，被整合優化分割成邏輯性很強的模塊時，對于軟件是一種何等意義的存在。對于軟件行業來說：解耦軟件系統的復雜性，使得不管多么大的系統，也可以將管理，開發，維護變得“有理可循”。
那么在理想狀態下我們只需要完成自己部分的核心業務邏輯代碼，其他方面的依賴可以通過直接加載被人已經寫好模塊進行使用即可。
首先，既然是模塊化設計，那么作為一個模塊化系統所必須的能力：

定義封裝的模塊。

定義新模塊對其他模塊的依賴。

可對其他模塊的引入支持。

commonjs

commonjs起初是服務端模塊的規范，nodejs就是采用這個規范。
CommonJs原來是叫ServerJs，從名字可以看出是專攻服務端的，為了統一前后端而改名CommonJs。它的規范是一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取文件并執行，最后導出一個exports對象。
例如：
// foo.js

//私有變量 var test = 123; function foobar(){this.foo = function(){}this.bar = function(){} } var foo = new foobar() //exports對象上的方法和變量是公有的。 exports.foo = foo;

// require 方法默認讀取js文件，所以可以省略js后綴

var test = require('./foo').foo; test.bar();

commonjs是同步加載模塊，所以加載完成后才能執行后面的操作。服務端require一個模塊，加載的模塊文件一般都是已經存在本地硬盤，所以加載起來比較快，消耗的時間可以忽略，就沒有必要采用異步方式的來加載。但是如果我們考慮到瀏覽器端的話，就肯定知道，同步加載，阻塞頁面的渲染，造成頁面白屏，或者卡死等現象，對于用戶體驗肯定是不友好的。

另外，資源的加載方式與服務端完全不同，在瀏覽器端，需要從服務端來下載這個文件，然后運行里面的代碼才能得到API，需要花費一個http請求，也就是說，require后面的一行代碼，需要資源請求完成才能執行。由于瀏覽器端是以插入<script>標簽的形式來加載資源的（ajax方式不行，有跨域問題），沒辦法讓代碼同步執行，所以像commonjs那樣的寫法會直接報錯。所以就有了AMD,CMD。

AMD(Asynchromous Module Definition)

字面意思”異步模塊定義”，就是一種規范。依賴前置(依賴在使用之前都必須提前加載)。requirejs可以簡單理解為AMD規范的一種實現。
AMD寫模塊的api如下:
define(id,dependencies,factory);
//通過數組引入依賴，回調函數通過形參傳入依賴

// 依賴一開始就寫好 define([‘someModule1’,’someModule2’]，function(someModule1,someModule2){ function foo(){ //something someModule1.test(); } return {foo:foo}; });

CMD(Common Module Definition)

CMD規范是國內發展出來的,CMD是SeaJS在推廣過程中對模塊定義的規范化產出。
CMD推崇：

• 一個文件一個模塊，所以經常就用文件名作為模塊id
• 依賴就近，所以一般不在define的參數中寫依賴，在factory中寫
  factory有三個參數：function(require, exports, module)

require是 factory 函數的第一個參數
require(id) 是一個方法，接受 模塊標識 作為唯一參數，用來獲取其他模塊提供的接口
exports 是一個對象，用來向外提供模塊接口
module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法

//CMD

// 定義模塊 myModule.js define(function(require, exports, module) {//依賴可以就近書寫 var $ = require('jquery.js') $('div').addClass('active'); }); // seajs.use實現模塊系統的加載啟動 加載模塊 seajs.use(['myModule.js'], function(my){ });

AMD,CMD區別

最明顯的區別就是對依賴模塊的執行時機處理不同

AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊，并且所有的依賴模塊都是先執行。
對應的require.js在js程序中的依賴模塊的執行順序和書寫順序不一定一致，哪個先下載下來，哪個先執行。所有模塊都加載執行完后會進入require的回調函數，執行主邏輯。
CMD推崇就近依賴，是一種按需加載的模式，定義一個模塊的時候不需要立即制定模塊之間的依賴模塊，只有在用到某個模塊的時候再去require
對應的seajs在js程序中的執行順序是按照順序結構的，當遇到require某模塊的時候再去調用某些模塊。

共同點：
都是異步加載模塊。

RequireJS和SeaJS與CommonJS的比較（嚴格意義上前兩者與后者不該放在一起比較，因為前兩者是規范的具體實現，而后者是一種規范）

總結

以上是生活随笔為你收集整理的CommonJs, AMD/RequireJs,CMD/seajs的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。