擁抱模塊化的JavaScript
我們?cè)僖淮伪挥?jì)算機(jī)的名詞,概念籠罩。
backbone、emberjs、spinejs、batmanjs 等MVC框架侵襲而來(lái)。
CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模塊化的JavaScript撲面而來(lái)。
模塊化JavaScript的概念尤為強(qiáng)烈,似乎有趕超07年Ajax風(fēng)潮之趨勢(shì)。
一、寫(xiě)函數(shù)(過(guò)程式)
2005年以前,JavaScript沒(méi)人重視,只作為表單驗(yàn)證等少量應(yīng)用。那時(shí)一個(gè)網(wǎng)頁(yè)上寫(xiě)不了幾行JS代碼,1000行算很復(fù)雜了。這時(shí)組織代碼的方式是過(guò)程時(shí),幾十行的代碼甚至連一個(gè)函數(shù)都不用寫(xiě)。稍多的需要提取抽象出一個(gè)函數(shù),更復(fù)雜一些則需要更多函數(shù),函數(shù)間互相調(diào)用。
二、寫(xiě)類(lèi)(面向?qū)ο螅?/STRONG>
2006年,Ajax席卷全球。JavaScript被重視了,越來(lái)越多的后端邏輯放到了前端。網(wǎng)頁(yè)中的JS代碼量急劇增加。這時(shí)寫(xiě)函數(shù)方式組織大量代碼顯得力不從心。有時(shí)調(diào)試一個(gè)小功能,從一個(gè)函數(shù)可能會(huì)跳到第N個(gè)函數(shù)去。這時(shí)寫(xiě)類(lèi)的方式出現(xiàn)了,Prototype 率先流行開(kāi)來(lái)。用它組織代碼,寫(xiě)出的都是一個(gè)個(gè)類(lèi),每個(gè)類(lèi)都是Class.create創(chuàng)建的。又有YUI、Ext等重量級(jí)框架。雖然它們的寫(xiě)類(lèi)方式各不同,但它們的設(shè)計(jì)思路卻都是要滿(mǎn)足大量JavaScript代碼的開(kāi)發(fā)。
三、寫(xiě)模塊(現(xiàn)在,未來(lái)?)
2009年,Nodejs誕生!這個(gè)服務(wù)器端的JavaScript采用模塊化的寫(xiě)法很快征服了瀏覽器端的JSer。牛人們紛紛仿效,各種寫(xiě)模塊的規(guī)范也是層出不窮。CommonJS想統(tǒng)一前后端的寫(xiě)法,AMD則認(rèn)為自己是適合瀏覽器端的。好吧,無(wú)論寫(xiě)模塊的風(fēng)格是啥樣,寫(xiě)模塊化的JavaScript卻已開(kāi)始流行了。準(zhǔn)備好了嗎?(呃具煽動(dòng)性)
呵,模塊化的JavaScript是啥? 這是我們發(fā)明了又一個(gè)銀彈嗎?無(wú)論是啥,就當(dāng)學(xué)習(xí)吧。至于適不適合項(xiàng)目中使用,各自斟酌。
寫(xiě)到這也沒(méi)說(shuō)什么是“模塊”。其實(shí)在計(jì)算機(jī)領(lǐng)域,模塊化的概念被推崇了近四十年。軟件總體結(jié)構(gòu)體現(xiàn)模塊化思想,即把軟件劃分為一些獨(dú)立命名的部件,每個(gè)部件稱(chēng)為一個(gè)模塊,當(dāng)把所有模塊組裝在一起的時(shí)候,便可獲得問(wèn)題的一個(gè)解。
模塊化以分治法為依據(jù),但是否意味著我們把軟件無(wú)限制的細(xì)分下去。事實(shí)上當(dāng)分割過(guò)細(xì),模塊總數(shù)增多,每個(gè)模塊的成本確實(shí)減少了,但模塊接口所需代價(jià)隨之增加。要確保模塊的合理分割則須了解信息隱藏,內(nèi)聚度及耦合度。
信息隱藏
模塊應(yīng)設(shè)計(jì)的使其所包含的信息(過(guò)程和數(shù)據(jù))對(duì)于那些不需要用到它的模塊不可見(jiàn)。每個(gè)模塊只完成一個(gè)獨(dú)立的功能,然后提供該功能的接口。模塊間通過(guò)接口訪(fǎng)問(wèn)。JavaScript中可以用函數(shù)去隱藏,封裝,而后返回接口對(duì)象。如下是一個(gè)提供事件管理的模塊event。
event = function() {
// do more
return {
bind: function() {},
unbind: function() {},
trigger: function() {}
};
}();
函數(shù)內(nèi)為了實(shí)現(xiàn)想要的接口bind、unbind、trigger可能需要寫(xiě)很多很多代碼,但這些代碼(過(guò)程和數(shù)據(jù))對(duì)于其它模塊來(lái)說(shuō)不必公開(kāi),外部只要能訪(fǎng)問(wèn)接口bind,unbind,trigger即可。
信息隱藏對(duì)于模塊設(shè)計(jì)好處十分明顯,它不僅支持模塊的并行開(kāi)發(fā),而且還可減少測(cè)試或后期維護(hù)工作量。如日后要修改代碼,模塊的隱藏部分可隨意更改,前提是接口不變。如事件模塊開(kāi)始實(shí)現(xiàn)時(shí)為了兼容舊版本IE及標(biāo)準(zhǔn)瀏覽器,寫(xiě)了很多IE Special代碼,有一天舊版本IE消失了(猴年馬月),只需從容刪去即可。
內(nèi)聚度
內(nèi)聚度指模塊內(nèi)部實(shí)現(xiàn),它是信息隱藏和局部化概念的自然擴(kuò)展,它標(biāo)志著一個(gè)模塊內(nèi)部各成分彼此結(jié)合的緊密程度。好處也很明顯,當(dāng)把相關(guān)的任務(wù)分組后去閱讀就容易多了。
設(shè)計(jì)時(shí)應(yīng)該盡可能的提高模塊內(nèi)聚度,從而獲得較高的模塊獨(dú)立性。
耦合度
內(nèi)聚度是指特定模塊內(nèi)部實(shí)現(xiàn)的一種度量,耦合度則是指模塊之間的關(guān)聯(lián)程度的度量。耦合度取決于模塊之間接口的復(fù)雜性,進(jìn)入或調(diào)用模塊的位置等。與內(nèi)聚度相反,在設(shè)計(jì)時(shí)應(yīng)盡量追求松散耦合的系統(tǒng)。
相關(guān)文章
性能優(yōu)化篇之Webpack構(gòu)建代碼質(zhì)量壓縮的建議
這篇文章主要介紹了性能優(yōu)化篇之Webpack構(gòu)建代碼質(zhì)量壓縮的建議,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Redux實(shí)現(xiàn)組合計(jì)數(shù)器的示例代碼
本篇文章主要介紹了Redux實(shí)現(xiàn)組合計(jì)數(shù)器的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
24個(gè)實(shí)用JavaScript?開(kāi)發(fā)技巧
這篇文章主要給大家分享了24個(gè)實(shí)用JavaScript?的開(kāi)發(fā)技巧,文章圍繞JavaScript?的開(kāi)發(fā)技巧講解展開(kāi)全文,具有一定的參考價(jià)值,需要的朋友可以參考一下,希望對(duì)你有所幫助2021-12-12
js購(gòu)物車(chē)實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
提起購(gòu)物車(chē)想必只有在一些購(gòu)物網(wǎng)站上才可以看得到,下面為大家介紹下使用js實(shí)現(xiàn)的購(gòu)物車(chē),感興趣的朋友可以參考下2013-12-12
Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄
FullPage.js 是一個(gè)簡(jiǎn)單而易于使用的插件,用來(lái)創(chuàng)建全屏滾動(dòng)網(wǎng)站(也被稱(chēng)為單頁(yè)網(wǎng)站)。接下來(lái)通過(guò)本文給大家介紹Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄,對(duì)fullpage.js導(dǎo)航欄相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03
JavaScript實(shí)現(xiàn)動(dòng)態(tài)留言板
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)留言板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03
javascript判斷機(jī)器是否聯(lián)網(wǎng)的2種方法
只有機(jī)器已經(jīng)聯(lián)網(wǎng)以后,web應(yīng)用才能啟動(dòng),下面使用javascript判斷機(jī)器是否聯(lián)網(wǎng),具體判斷代碼如下,有此需求的朋友可以參考下2013-08-08
使用watch在微信小程序中實(shí)現(xiàn)全局狀態(tài)共享
這篇文章主要給大家介紹了關(guān)于如何使用watch在小程序中實(shí)現(xiàn)全局狀態(tài)共享的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06

