什麼是js模組化？ js模組化的介紹

什麼是js模組化？ js模組化不是一開始就存在的概念，而是對工程的要求越來越高，對於js模組開發的需求就顯現出來了。因此就出現了關於js模組開發。下面我們就來看看關於JavaScript模組化實例。

模組化發展歷程

js一開始並沒有模組化的概念，直到ajax被提出，前端能夠像後端請求數據，前端邏輯越來越複雜，就出現了許多問題：全域變量，函數名衝突，依賴關係不好處理。 
 當時使用子執行函數來解決這些問題，例如經典的jquery就使用了匿名自執行函數封裝程式碼，將他們全都掛載到全域變數jquery下邊。

CommonJs

CommonJs透過nodeJs發揚光大，每個js檔案就是一個模組，每個模組有單獨的作用域。模組以module.exports為出口，輸出一個物件。使用require方法讀取文件，並傳回其內部的module.exports物件。

CommonJs的問題在於，他的載入是同步的，這在服務端很正常，但是在充滿了非同步的瀏覽器裡，就不適用了。為了適應瀏覽器，社區內部發生了分歧。

AMD

AMD 即Asynchronous Module Definition，中文名稱是非同步模組定義的意思。它是一個在瀏覽器端模組化開發的規範，由於不是JavaScript原生支持，AMD的作者親自實作了符合AMD規範的RequireJS。
 AMD規範規定用全域函數define來定義模組，用法為define(id, dependencies, factory);其中，id為模組標識，dependencies是一個數組，在數組裡邊是該模組依賴的其他模組，factory則是一個匿名函數，裡邊是該模組的邏輯。 
 目前公司使用的就是AMD規格。 
 例如：

//main.jsrequire(['a', 'b'], function(a, b){
     console.log('main.js执行');
     a.hello();
     $('#b').click(function(){
          b.hello();
     });
})

requireJs的問題在於，加在一個模組時，會預先載入該模組的所有依賴模組，但是這些依賴很可能一開始並不用到。同時依賴寫起來一長串，也很麻煩。比較好的是AMD保留了commonJs中的require、exprots、module3個功能，可以不把以來都寫在dependencies中，而是在需要時使用require引入。

CMD

既然requirejs有上述種種不甚優雅的地方，所以必然會有新東西來完善它，這就是後起之秀seajs，seajs的作者是國內大牛淘寶前端步道者玉伯。 seajs全面擁抱Modules/Wrappings規範，不用requirejs那樣回呼的方式來寫模組。而它也不是完全按照Modules/Wrappings規範，seajs並沒有使用declare來定義模組，而是使用和requirejs一樣的define，或許作者本人更喜歡這個名字吧。 （然而這或多或少又會給人們造成理解上的混淆），用seajs定義模組的寫法如下：

//main.jsdefine(function(require, exports, module){
     console.log('main.js执行');     var a = require('a');
     a.hello();    
     $('#b').click(function(){
          var b = require('b');
          b.hello();
     });

});

定義模組時無需羅列依賴數組，在factory函數中需傳入形參require,exports,module，然後它會呼叫factory函數的toString方法，對函數的內容進行正規匹配，透過匹配到的require語句來分析依賴，這樣就真正實作了commonjs風格的程式碼。

AMD與CMD的差異

AMD與CMD最明顯的差異就是在模組定義時對依賴的處理不同 
 AMD推崇依賴前置，在定義模組的時候就要聲明其依賴的模組 
 CMD推崇就近依賴，只有在用到某個模組的時候再去require 
 這種區別各有優劣，只是語法上的差距，而且requireJS和SeaJS都支持對方的寫法

面向未來的ES6模組標準

ES6考慮了模組化，使用import和export，但是目前瀏覽器還不支持，這個標準也只是個雛形。

相關推薦：

js裡封裝一個方法--模組化

第一次接觸JS require.js模組化工具

以上是什麼是js模組化？ js模組化的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！