JavaSript模塊化

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

定義封裝的模塊。

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

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

commonjs

commonjs起初是服務端模塊的規(guī)范，nodejs就是采用這個規(guī)范。
CommonJs原來是叫ServerJs，從名字可以看出是專攻服務端的，為了統(tǒng)一前后端而改名CommonJs。它的規(guī)范是一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取文件并執(zhí)行，最后導出一個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是同步加載模塊，所以加載完成后才能執(zhí)行后面的操作。服務端require一個模塊，加載的模塊文件一般都是已經存在本地硬盤，所以加載起來比較快，消耗的時間可以忽略，就沒有必要采用異步方式的來加載。但是如果我們考慮到瀏覽器端的話，就肯定知道，同步加載，阻塞頁面的渲染，造成頁面白屏，或者卡死等現(xiàn)象，對于用戶體驗肯定是不友好的。

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

AMD(Asynchromous Module Definition)

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

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

CMD(Common Module Definition)

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

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

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

//CMD

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

AMD,CMD區(qū)別

最明顯的區(qū)別就是對依賴模塊的執(zhí)行時機處理不同

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

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

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

總結

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

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