在網上已經有很多關於模塊化開發的文章了，這里還是按照自己的理解來整理一下。
隨着項目文件的越來越大和需求的越來越貼近現實（我發現現在客戶不如：一個領導說我要審批你們報上來的資料，系統發布以后用的還不錯，可能是有那個新鮮感，等領導煩了說：每個文件我都這么操作太累了，能不能一次報，到最后說能不能自動判斷對不對……），以后的需求估計要讓做個人工智能出來……借着上面繼續，需求的內容越來越復雜，一個人開發時間長，多個人開發這樣那樣的問題一堆等等這時候Javascript模塊化開發誕生了。
先說說發展歷程
剛開始是這樣寫代碼的：
function func1() { } function func2() { }
后來經過變形是這樣的：
var obj = { func1: function () { }, func2: function () { } }
最后經過總價實踐后是這樣的：
(function () { })();
閉包：至於這種方式防止全局變量的污染，有效的提高了開發的思路和開發的效率。
這里重點說下我設想的思路:
上面的項目文件列表是這樣的；index主頁上面有不同的標簽，每個標簽下面有不同的功能（很復雜的）。Index的代碼如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript模塊化編程</title> <script src="../jquery.js"></script> <script src="Js/main.js"></script> <script src="Js/a.js"></script> <script src="Js/b.js"></script> <script src="Js/c.js"></script> </head> <body> </body>
</html>
mian處理公用的業務邏輯，a，b，c不同的功能塊
main.js的代碼如下：
$(function () { var sum = myModule.addMethod(1), sub = myModule.subMethod(1, 3), mod = myModule.modMethod(1, 3); myModule.alert = function () { alert($().jquery); }; });
a.js的代碼如下:
(function (my) { var x = 8; my.addMethod = function () { return arguments[0] + x; } })(window.myModule = window.myModule || {});
b和c的代碼就不帖了和a的雷同；
為什么這么寫呢？假如說寫成下面的樣子行嗎？
(function (my) { my.modMethod = function () { return arguments[0] / arguments[1]; }; //比如執行完異步后執行 my.callBack = function () { if (typeof arguments[0] == "function") { arguments[0](); } } })(window.myModule || {});
如果寫成了以上的這種，在index頁面上引入js的順序變化有可能window.myModule就是undefined.
a,b,c都是一個頁面上不用的業務邏輯處理，當然相互可以關聯，導入。
這樣就有效的阻止了全局變量的污染, 可以找不同的開發者開發同一個模塊。
那這樣暴漏出另一個問題就是index頁面上引入的js過於過，而且會影響加載速度，在訪問index的時候也許只用到a腳本，點擊某個按鈕才用到b腳本。這就引入下個話題："require.js"