javascript
JavaScript模块化开发整理
在網上已經有很多關于模塊化開發的文章了，這里還是按照自己的理解來整理一下。
隨著項目文件的越來越大和需求的越來越貼近現實（我發現現在客戶不如：一個領導說我要審批你們報上來的資料，系統發布以后用的還不錯，可能是有那個新鮮感，等領導煩了說：每個文件我都這么操作太累了，能不能一次報，到最后說能不能自動判斷對不對……），以后的需求估計要讓做個人工智能出來……借著上面繼續，需求的內容越來越復雜，一個人開發時間長，多個人開發這樣那樣的問題一堆等等這時候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"
轉載于:https://www.cnblogs.com/cyclone77/p/5525785.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的JavaScript模块化开发整理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C Primer Plus 第5章 运算
- 下一篇： DDD及相关概念