JavaScript重構(gòu)：模塊劃分和命名空間

通常我們的團(tuán)隊(duì)中，開發(fā)人員在Java語(yǔ)言層面具備相當(dāng)?shù)募夹g(shù)素養(yǎng)，經(jīng)驗(yàn)豐富，而且有許多成熟的、合理的規(guī)約，類型繁多的代碼隱患檢查工具，甚至在團(tuán)隊(duì)間還有計(jì)劃內(nèi)的評(píng)審和飛檢。但是前端的代碼不似后臺(tái)，就像一個(gè)沒(méi)人疼的孩子，不僅僅容易被低估、被輕視，導(dǎo)致質(zhì)量低劣、可維護(hù)性差，技能上，更缺少優(yōu)秀的前端開發(fā)人員。
JavaScript是前臺(tái)代碼中重要組成部分，隨著版本的延續(xù)，產(chǎn)品越做越大，JavaScript層面的重構(gòu)，需要在整個(gè)過(guò)程中逐步強(qiáng)化起來(lái)。

當(dāng)代碼量達(dá)到一定程度，JavaScript最好能夠與頁(yè)面模塊組件（例如自定義的FreeMarker標(biāo)簽）一起被模塊化。
模塊化帶來(lái)的最大好處就是性和可維護(hù)性，不用在海量的js中定位問(wèn)題位置，簡(jiǎn)單了，也就更容易被理解和接受，更容易被定制。
模塊之間的依賴關(guān)系最好能夠保持簡(jiǎn)單，例如有一個(gè)common.js，成為最通用的函數(shù)型代碼，不包含或者包含統(tǒng)一管理的全局變量，要求其可以發(fā)布，其他組件js可以輕松地依賴于它。舉個(gè)例子，我們經(jīng)常需要對(duì)字符串實(shí)現(xiàn)一個(gè)trim方法，可是js本身是不具備的，那么就可以在這個(gè)common.js中擴(kuò)展string的prototype來(lái)實(shí)現(xiàn)，這對(duì)外部的使用者是透明的。

使用命名空間是保持js互不干擾的一個(gè)好辦法，js講究起面向?qū)ο螅捅仨氉裱庋b、繼承和多態(tài)的原則。
參照J(rèn)ava import的用法，我希望命名空間能帶來(lái)這樣的效果，看一個(gè)最簡(jiǎn)單的實(shí)例吧：
我有一個(gè)模塊play，其中包含了一個(gè)方法webOnlinePlay，那么在沒(méi)有import這個(gè)模塊的時(shí)候，我希望是js的執(zhí)行是錯(cuò)誤的：
Java代碼
webOnlinePlay(); //Error! 無(wú)法找到方法

但是如果我引入了這個(gè)模塊：
Java代碼
import("play");

webOnlinePlay(); //正確，能夠找到方法

其實(shí)實(shí)現(xiàn)這樣的效果也很簡(jiǎn)單，因?yàn)槟J(rèn)調(diào)用一個(gè)方法webOnlinePlay()的實(shí)質(zhì)是：window.webOnlinePlay()，對(duì)嗎？
所以在import("play")的時(shí)候，內(nèi)部實(shí)現(xiàn)機(jī)制如下：
Java代碼
var module = new playModule();

對(duì)于這個(gè)模塊中的每一個(gè)方法，都導(dǎo)入到window對(duì)象上面，以直接使用：
Java代碼
window[methodName] = module[methodName];

其實(shí)這里并沒(méi)有什么玄機(jī)，但是這種即需即取的思想?yún)s給前端重構(gòu)帶來(lái)了一個(gè)思路，一個(gè)封裝帶來(lái)的可維護(hù)性增強(qiáng)的思路，不是嗎？

聰明的你也許還會(huì)提到一個(gè)問(wèn)題：
如果我沒(méi)有import這個(gè)play模塊，這個(gè)頁(yè)面都不需要，那我能否連這個(gè)play.js都不加載呢？
當(dāng)然可以，請(qǐng)關(guān)注后面的分解——關(guān)于js的動(dòng)態(tài)加載的部分。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com