網(wǎng)站前端模塊化開發(fā)策略研究

肖慧明

(遼寧軌道交通職業(yè)學(xué)院,遼寧沈陽(yáng) 110023)

在通訊技術(shù)與互聯(lián)網(wǎng)的不斷發(fā)展下,網(wǎng)絡(luò)用戶數(shù)量也得到了飛速增長(zhǎng)?；ヂ?lián)網(wǎng)上信息資源的規(guī)模正以驚人的速度上升,各類不同種類、不同目的的網(wǎng)站也隨之涌現(xiàn)。企業(yè)為了達(dá)到樹立其形象、宣傳新產(chǎn)品等目的,紛紛涉足網(wǎng)站建設(shè)這一領(lǐng)域。隨著相關(guān)企業(yè)對(duì)網(wǎng)站建設(shè)的逐漸重視,網(wǎng)站建設(shè)的需求也越來(lái)越多,大部分網(wǎng)站的更新周期迅速縮減。雖然網(wǎng)站前端開發(fā)的人員也在逐年增加,但面對(duì)如今行業(yè)需求的快速變化,仍然不能很好的解決前端開發(fā)面臨的諸多問題,一種對(duì)思想先進(jìn)、模式良好的前端模塊化開發(fā)技術(shù)的需求愈演愈烈。

1 網(wǎng)站前端的發(fā)展及現(xiàn)狀

網(wǎng)站前端的發(fā)展日新月異,短短不過(guò)10年的時(shí)間,已經(jīng)逐步引領(lǐng)了潮流。如今,網(wǎng)站已演變?yōu)榛ヂ?lián)網(wǎng)應(yīng)用程序,代碼量的爆炸式增長(zhǎng),為了降低開發(fā)成本,同時(shí)保證代碼的質(zhì)量,網(wǎng)站前端的模塊化勢(shì)在必行。前端模塊化開發(fā)在于按布局和功能的模塊劃分,各個(gè)模塊負(fù)責(zé)特定功能,所有模塊按一定的組織方式形成一個(gè)整體。模塊化開發(fā)的主要目的是為了復(fù)用代碼、便于維護(hù)、代碼結(jié)構(gòu)清晰等。前端模塊化有利于多人協(xié)同開發(fā),降低了開發(fā)人員之間的干擾,能夠有效提高網(wǎng)頁(yè)瀏覽的速度,減少代碼的冗余,整合網(wǎng)絡(luò)信息資源等。網(wǎng)站前端模塊化開發(fā)已經(jīng)發(fā)展成為一個(gè)系統(tǒng)工程,它需要相關(guān)人員多角度分析,共同協(xié)作。但目前國(guó)內(nèi)只有少數(shù)企業(yè)設(shè)計(jì)了自己耳朵前端模塊化開發(fā)框架結(jié)構(gòu),擁有專屬的開發(fā)策略,且對(duì)新技術(shù)的應(yīng)用還不夠成熟。網(wǎng)站前端的模塊化開發(fā)仍然任重而道遠(yuǎn)。

2 模塊化開發(fā)策略

與模塊化的程序設(shè)計(jì)思想類似,前端模塊化開發(fā)的基本思想是在Web上以模塊作為基本單位,對(duì)相關(guān)代碼等進(jìn)行組織和劃分,各個(gè)模塊相互獨(dú)立,負(fù)責(zé)各自特定的功能。在此種策略下,一個(gè)網(wǎng)頁(yè)可以看作是由一個(gè)主模塊和若干個(gè)子模塊構(gòu)成,主模塊相當(dāng)于程序設(shè)計(jì)中的主函數(shù),用于存放子模塊以及屬于自身的頁(yè)面元素。對(duì)網(wǎng)站所需的基本元素進(jìn)行模塊化,方便對(duì)其進(jìn)行調(diào)用和管理。由此可見,網(wǎng)站前端的模塊化開發(fā)技術(shù)并不太復(fù)雜。在網(wǎng)站建設(shè)中,采用一套合理有效的開發(fā)策略,對(duì)HTML、CSS、JavaScript進(jìn)行有效的拼裝組合,又能減少三者的循環(huán)依賴,降低代碼的耦合度。常見的幾種開發(fā)策略包括傳統(tǒng)策略、頁(yè)面級(jí)策略、模塊級(jí)策略。

2.1 傳統(tǒng)開發(fā)策略

在傳統(tǒng)的模塊化開發(fā)中,需要先將各個(gè)頁(yè)面進(jìn)行拆分,形成多個(gè)基本模塊,如LOGO、導(dǎo)航條、尾部導(dǎo)航、版權(quán)信息、內(nèi)容1、內(nèi)容2等,每個(gè)模塊生成各自的文件。這樣的實(shí)現(xiàn)方法雖然看上去簡(jiǎn)單方便,但是卻存在很多的問題。例如,傳統(tǒng)的模塊化開發(fā)策略將產(chǎn)生大量的模塊,這樣既不便于管理,相應(yīng)的請(qǐng)求數(shù)也會(huì)劇增;同時(shí),考慮到大量模塊的存在,需要對(duì)其進(jìn)行壓縮,但壓縮后又會(huì)造成新的問題,如容易阻塞頁(yè)面的顯示等?；谝陨显?這種傳統(tǒng)的開發(fā)策略并不適用于團(tuán)隊(duì)開發(fā),需要做出相應(yīng)的改進(jìn)。

2.2 頁(yè)面級(jí)開發(fā)策略

在頁(yè)面級(jí)開發(fā)策略中,根據(jù)不同頁(yè)面的模塊劃分情況,設(shè)定所需要的CSS模塊和JavaScript模塊,各個(gè)頁(yè)面與其所依賴的模塊關(guān)系寫于頁(yè)面級(jí)的設(shè)定文件中。在發(fā)生請(qǐng)求時(shí),通過(guò)Mini工具將所需要的模塊進(jìn)行合并,一個(gè)請(qǐng)求即可得到請(qǐng)求頁(yè)面所需要的全部模塊,解決了再傳統(tǒng)開發(fā)策略中,因內(nèi)容壓縮和模塊過(guò)多而出現(xiàn)的問題。

2.3 模塊級(jí)開發(fā)策略

基于頁(yè)面級(jí)模塊化開發(fā)策略開發(fā)的網(wǎng)頁(yè)不利于后期維護(hù),在移動(dòng)某個(gè)頁(yè)面時(shí),所依賴的模塊也將發(fā)生變化,應(yīng)當(dāng)全部移除,但其他頁(yè)面也可能存在引用情況,導(dǎo)致整個(gè)移除花銷增大。除此之外,網(wǎng)站的線上調(diào)試極為困難,因?yàn)榘l(fā)布的代碼經(jīng)過(guò)混淆之后,難以實(shí)現(xiàn)調(diào)試。在實(shí)際操作中,也存在一些問題,如更新了前端基礎(chǔ)類庫(kù)后很難推動(dòng)全站升級(jí),利用某個(gè)新的通用組件時(shí)發(fā)現(xiàn)代碼實(shí)現(xiàn)較為困難,新功能經(jīng)過(guò)評(píng)估后只能基于原有類庫(kù)繼續(xù)開發(fā),公司整合業(yè)務(wù)、合并產(chǎn)品線時(shí)發(fā)現(xiàn)前端代碼發(fā)生沖突等。

基于上述問題的考慮,模塊級(jí)的模塊化開發(fā)策略應(yīng)運(yùn)而生。模塊級(jí)的模塊化開發(fā),是指開發(fā)人員分別定義自身頁(yè)面模塊的依賴關(guān)系,而不再像頁(yè)面級(jí)模塊化開發(fā)那樣集中記錄。發(fā)生請(qǐng)求頁(yè)面時(shí),頁(yè)面的Controller指定需要加載的頁(yè)面,由加載的Loader自行計(jì)算需要加載的模塊,同時(shí)Loader與服務(wù)器端進(jìn)行交互,對(duì)所需要的模塊進(jìn)行分組、合并、壓縮操作,并行下載至請(qǐng)求的瀏覽器上。

目前基于模塊級(jí)的模塊化開發(fā)規(guī)范的框架較多,如RequireJS,它是目前使用較為廣泛的框架,在定義好模塊的依賴關(guān)系后,不需做任何的配置,就能實(shí)現(xiàn)對(duì)所需模塊進(jìn)行自動(dòng)有序的載入。RequireJs實(shí)現(xiàn)了js文件的異步加載,避免網(wǎng)頁(yè)失去響應(yīng),同時(shí)對(duì)模塊之間的依賴性進(jìn)行管理,方便了代碼的編寫與維護(hù)。

與RequireJs相比,YUI3的Loader對(duì)下載方式進(jìn)行了優(yōu)化,YUI3強(qiáng)調(diào)代碼的復(fù)用,將功能做了級(jí)別劃分和顆?；脑O(shè)計(jì),YUI3種子中的Get、Loader模塊是動(dòng)態(tài)按需加載的基礎(chǔ),YUI3框架通過(guò)良好的結(jié)構(gòu)組織,可以根據(jù)程序引入的所需模塊名稱自動(dòng)計(jì)算依賴模塊,實(shí)現(xiàn)按需加載;YUI3對(duì)每個(gè)模塊都進(jìn)行了更細(xì)粒度的劃分。YUI Loader用GET的方式指定線上文件的路徑,進(jìn)行動(dòng)態(tài)的合并,同時(shí)做最小化處理。Loader根據(jù)模塊載入的數(shù)量、順序與當(dāng)前瀏覽器支持的GET長(zhǎng)度自動(dòng)對(duì)請(qǐng)求進(jìn)行分散、并行下載。在概念上抽象出核心、組件、和工具類,分別放在不同的目錄結(jié)構(gòu)中,需要時(shí)自行引用。YUI3的這一設(shè)計(jì)理念為動(dòng)態(tài)加載的框架設(shè)計(jì)做了很好的鋪墊。

3 結(jié)語(yǔ)

對(duì)網(wǎng)站前端的模塊化開發(fā)的意義在于最大化的實(shí)現(xiàn)了設(shè)計(jì)的重用,以最少的模塊和零部件,更高效的滿足更多具有個(gè)性化的需求。在模塊化開發(fā)中,開發(fā)人員能夠按照所要實(shí)現(xiàn)的功能選擇加載模塊。依賴現(xiàn)有的多種開發(fā)工具與框架,適當(dāng)修改,如目前存在的模塊劃分、模塊粒度、模塊繼承等問題,完善模塊化開發(fā)策略。未來(lái)的網(wǎng)站前端開發(fā),需要做到易于線上的調(diào)試和后期的維護(hù),同時(shí)發(fā)布時(shí)間也需有效縮短,需要開發(fā)人員的齊心協(xié)力,以實(shí)現(xiàn)更好的模塊化開發(fā)。

[1]熊茜.基于虛擬表示模型的Web頁(yè)面模塊化設(shè)計(jì)方法[J].計(jì)算機(jī)應(yīng)用,2008,25(2).

[2]張宏森,朱征宇.基于模塊的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)[J].計(jì)算機(jī)應(yīng)用研究,2009,(2):49-50.

[3]鐘志東,孟清.網(wǎng)站開發(fā)的五層構(gòu)架模塊化設(shè)計(jì)[J].計(jì)算機(jī)時(shí)代,2013,(8):19-21.