javascript
JavaScript模块化开发整理
在網(wǎng)上已經(jīng)有很多關(guān)于模塊化開發(fā)的文章了，這里還是按照自己的理解來整理一下。
隨著項(xiàng)目文件的越來越大和需求的越來越貼近現(xiàn)實(shí)（我發(fā)現(xiàn)現(xiàn)在客戶不如：一個(gè)領(lǐng)導(dǎo)說我要審批你們報(bào)上來的資料，系統(tǒng)發(fā)布以后用的還不錯(cuò)，可能是有那個(gè)新鮮感，等領(lǐng)導(dǎo)煩了說：每個(gè)文件我都這么操作太累了，能不能一次報(bào)，到最后說能不能自動(dòng)判斷對(duì)不對(duì)……），以后的需求估計(jì)要讓做個(gè)人工智能出來……借著上面繼續(xù)，需求的內(nèi)容越來越復(fù)雜，一個(gè)人開發(fā)時(shí)間長(zhǎng)，多個(gè)人開發(fā)這樣那樣的問題一堆等等這時(shí)候Javascript模塊化開發(fā)誕生了。
先說說發(fā)展歷程
剛開始是這樣寫代碼的：
function func1() { } function func2() { }后來經(jīng)過變形是這樣的：
var obj = {func1: function () {},func2: function () {} }最后經(jīng)過總價(jià)實(shí)踐后是這樣的：
(function () { })();?
閉包：至于這種方式防止全局變量的污染，有效的提高了開發(fā)的思路和開發(fā)的效率。
?
這里重點(diǎn)說下我設(shè)想的思路:
上面的項(xiàng)目文件列表是這樣的；index主頁上面有不同的標(biāo)簽，每個(gè)標(biāo)簽下面有不同的功能（很復(fù)雜的）。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處理公用的業(yè)務(wù)邏輯，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];};//比如執(zhí)行完異步后執(zhí)行my.callBack = function () {if (typeof arguments[0] == "function") {arguments[0]();}} })(window.myModule || {});如果寫成了以上的這種，在index頁面上引入js的順序變化有可能window.myModule就是undefined.
a,b,c都是一個(gè)頁面上不用的業(yè)務(wù)邏輯處理，當(dāng)然相互可以關(guān)聯(lián)，導(dǎo)入。
這樣就有效的阻止了全局變量的污染, 可以找不同的開發(fā)者開發(fā)同一個(gè)模塊。
那這樣暴漏出另一個(gè)問題就是index頁面上引入的js過于過，而且會(huì)影響加載速度，在訪問index的時(shí)候也許只用到a腳本，點(diǎn)擊某個(gè)按鈕才用到b腳本。這就引入下個(gè)話題："require.js"
轉(zhuǎn)載于:https://www.cnblogs.com/cyclone77/p/5525785.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的JavaScript模块化开发整理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C Primer Plus 第5章 运算
- 下一篇： DDD及相关概念