在我們最初寫程式碼的時候，引入JS檔案用script標籤來引入，並且在引入多個JS檔案時，當前檔案所依賴的JS檔案必須放在前面。也就存在一個順序的問題，而且這是由開發者去判斷和把控的。而現在前端專案越來越複雜，難免會出現很多很多script標籤引入JS，這無論對於開發和維護都有著一定的缺點。所以出現了模組化的概念。

模組化的形式有很多中，比如把某個特定功能封裝成一個函式，但是存在著一個問題，很有可能會出現命名衝突等問題。針對這種問題，又有了物件的方式來模組化，這種不會出現命名衝突，但是外界卻可以改變物件內的成員。又有了下面這種方式：

var obj = (function(){
    var
 
 name = 'liu';
    var job = 'Web developer';
    function sayName() {
        console.log(name + ' is a ' + job);
    }
    return {
        sayName: sayName
    }
})()

這樣外界就不會修改沒有暴露出來的物件內的變數。
上面這些是前端模組化的基礎。目前通用的模組化規範主要有COMMONJS、AMD、CMD等等。

COMMONJS

COMMONJS主要是用於服務端的模組化規範，可以說NodeJS是它的最佳實踐。看下面一個例子：

//匯入一個檔案系統模組，返回的是一個物件；
var fs = require('fs');
//呼叫物件的readFile方法，讀檔案。
fs.readFile('test.txt', function(data){
    console.log(data);
});

上面是一個讀檔案的操作，主要引入檔案系統模組，這個是一個同步的過程。

當然，也可以自定義一個模組實現特定的功能。比如要實現一個Multi模組，可以這樣來實現：

//multi.js
function multi(a ,b) {
    return a*b;
}

module.exports = {
    multi: multi
}
 

//moduleTest.js
var obj = require('./multi.js');

var res = obj.multi(3, 4);

console.log(res);

結果如下：

AMD

上面的COMMONJS規範不適合瀏覽器端的模組化開發，因為COMMONJS去請求模組是一個同步的過程，如果瀏覽器用這種規範去開發很可能會出現阻塞情況/假死情況。因此AMD規範就是為解決這種情況而出現的。
由於不是原生JS所支援的，所以AMD規範需要用到RequireJS庫。
AMD的用法如下：
定義模組： define([依賴的模組], function(){ //自定義模組 });
引入模組：require([依賴的模組], function(){ //回撥 })

在這裡，需要說明的一點是：RequireJS是依賴前置，先去執行依賴的模組，然後再執行當前模組。

CMD

CMD典型的就是SeaJS。SeaJS與RequireJS實現上是差不多的，但是還是有一些區別，主要是在定義方式上和模組的執行時機上。
定義模組： define(function( require, exports, module ){ })
可以看到，SeaJS在定義模組的時候，並不會像RequireJS那樣依賴前置，而是就近依賴的原則，需要的時候再去require。SeaJS主要是對模組先載入不執行，等到遇到require的時候才會去執行模組。
對於RequireJS和SeaJS的差異可以看下面這個例子：

//c.js
define(function(require, exports, module){
    console.log('c Module');
    require('./b.js');
    console.log('c module finished');
})

//b.js
define(function(require, exports, module){
    console.log('b Module');
    require('./a.js');
    console.log('b module finished');
})

//a.js
define(function(require, exports, module){
    console.log('a Module');
})

//html檔案
//requirejs檔案部分程式碼
<script src="require.min.js" data-main="c.js"></script>  
//SeaJs檔案部分程式碼
<script src="Sea.js"></script>
<script>seajs.use('./c');  </script>  

大家可以猜猜兩種執行結果有什麼不同，這裡就不做驗證了。

上面這些就是JS模組化的通用方法總結，當然，ES6中已經有了Module模組化的概念，後面還會再對這個進行整理。