為什么要進行模塊化開發？
1.當你寫了一個這樣的comm.js文件時，里面有function tab(){}方法，這時，你給你的同事用，你同事把這個comm.js引入頁面后，在頁面上又寫了一個function tab(){}，這時，就會覆蓋你在comm.js中的tab方法。因為這個同事不知道你comm.js中有tab這個方法名。
2.如果你同事在頁面上引入了你寫的comm.js后，又引入了一個第三方插件xxx，而這個xxx插件里面剛好也有tab方法，那這時就會出現問題。你同事就會找你，說你寫的comm.js有問題。
這時，你可能會這樣寫comm.js。
var chaojidan = {};
chaojidan.tab = function(){};
這種命名空間的方式，可以降低沖突，但是無法避免沖突。
3.假如你的comm.js中現在有20個方法，但是我們的頁面現在只需要tab這個功能，也就是只需要調用tab方法。那么，這時，你可能會把comm.js分成多個js文件，比如:tab.js，comm.js，drag.js。這時，你的頁面就會出現引入多個js的情況，比如：
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>
但是，如果這時a.js依賴於d.js的話，就會出現問題。
4.上面的依賴問題，有人說，可以把d.js放在a.js上面不就行了。但是這不能解決依賴問題，比如：當你這樣寫好一個頁面后，產品經理要你添加功能，這時你又添加了一個e.js，而e.js依賴於a.js。這時，你在新頁面添加新功能時，你必須把d.js，a.js，e.js按順序進行加載。當出現大規模的依賴時，你就會奔潰了。
模塊化的庫，sea.js（CMD），require.js（AMD）。
我們來看看sea.js如何解決js模塊化開發：
1.引入sea.js庫。
2.如何變成模塊，通過define方法。比如:
define(function(require,exports,module){
function tab(){
....
}
exports.tab= tab;
})
這時，你在這里定義一個function tab(){}，不會跟define里面的那個tab方法起沖突。
3.如何調用模塊？通過seajs.use()方法，比如：
seajs.use("./comm.js",function(ex){
ex.tab();
})
4.如何解決模塊間的依賴問題，通過require方法。比如：
a.js
define(function(require,exports,module){
var d = require("./d.js"); //模塊a依賴模塊d。
function tab(){
d.drag();
}
exports.tab= tab;
})
d.js
define(function(require,exports,module){
function drag(){
....
}
exports.drag= drag;
})
上面的require方法加載模塊是同步的，而require.async()方法，加載模塊是異步的。
他們之間的區別是什么呢？舉個例子：
a.js
define(function(require,exports,module){
var d = require("./d.js"); //模塊a依賴模塊d。
var ele = document.getElementById("input"); //當你在頁面上調用seajs.use("./a.js")時，頁面上的input元素就綁定了click事件。但是這時d.js，b.js，以及a.js都從服務器下載到瀏覽器端了。盡管這時還不需要b.js模塊，只有點擊了input元素才需要。這時，我們只需要把require("./b.js").scale(); 改成require.async("./b.js",function(ex){ex.scale()});這時，只會下載d.js和a.js，而b.js不會下載，只有等你click元素input時，才會去下載b.js，然后執行b.js，執行結束后，就會調用回調函數，這時，就調用ex.scale()方法了。這叫做按需載入。
ele.onclick = function(){
require("./b.js").scale();
}
})
b.js
define(function(require,exports,module){
function scale(){
....
}
exports.scale= scale;
})
js模塊化的發展:
node.js是最早使用模塊化進行開發的，遵循的規范是：CommonJS，這是服務端的模塊化規范，服務器使用此規范進行開發，是因為它所需要的文件就在服務器本地。而瀏覽器端需要的文件在服務器端，不在瀏覽器本地，因此就出現了AMD規范。
require.js遵守AMD規范，在瀏覽器端進行模塊化開發的庫。
sea.js遵守CMD規范，在瀏覽器端進行模塊化開發的庫。
我們開發網頁一般要遵守這種開發模式就行了：
1.底層庫jQuery
2.組件開發，可以基於jQuery
3.業務應用開發，基於jQuery和組件
通過sea.js等模塊化庫，把上面所有的模塊連起來。
模塊化在前端開發中還是很重要的，ECMAScript第六版將正式支持模塊化語法，也就是說不用利用模塊化庫，就能實現模塊化的功能。
加油！