張曉紅

摘 要： 隨著網(wǎng)站前端功能日漸增多且更新頻繁，前端開發(fā)技術(shù)受到越來越多公司的重視。一種具有先進(jìn)開發(fā)思想和良好設(shè)計(jì)模式的前端模塊化技術(shù)正逐漸成熟。根據(jù)網(wǎng)站前端模塊化的不同開發(fā)思想，詳細(xì)分析了目前常見的三種模塊化開發(fā)策略，闡述了每種開發(fā)策略的具體實(shí)現(xiàn)方法、常見的框架與工具存在的問題及優(yōu)缺點(diǎn)，并提出了完善前端模塊化開發(fā)策略的一些方法。

關(guān)鍵詞： 網(wǎng)站開發(fā)； 前端模塊化； 開發(fā)策略； 框架

中圖分類號：TP319 文獻(xiàn)標(biāo)志碼：A 文章編號：1006-8228（2013）02-38-02

Strategy research of Website front-end modular development

Zhang Xiaohong

（Huludao No.1 Secondary Vocational and Technical School， Huludao， Liaoning 125000， China）

Abstract： With the function of website front-end increases constantly and updates frequently， so more attention is paid to the developing front-end technology by more and more companies. A kind of front-end modular technology with advanced development ideas and excellent design model is becoming mature gradually. According to the different thoughts of modular website front-end development， the three current common strategies of modular development are analyzed in detail， and their advantages and disadvantages of specific realization methods are discussed. Some methods， techniques and tools of perfecting front-end modular development strategies are proposed， and the website front-end modular development strategy is presented.

Key words： website development； front-end modular； development strategy； frame

0 引言

當(dāng)今互聯(lián)網(wǎng)飛速發(fā)展，網(wǎng)絡(luò)用戶的需求變化既快又大，且不可捉摸，大部分網(wǎng)站的更新周期都是以日、小時甚至分鐘為單位。在這種情況下，網(wǎng)站的前端就成了變化最頻繁的部分。隨著互聯(lián)網(wǎng)公司對前端開發(fā)的逐漸重視，前端開發(fā)人數(shù)也越來越多，可是，技術(shù)人員的投入總是有限的。面對需求的快速變化，引發(fā)了很多如前端編碼規(guī)范、前端性能優(yōu)化、前端安全漏洞防范等方面的問題。為了解決這些問題，一種具有先進(jìn)開發(fā)思想和良好設(shè)計(jì)模式的前端模塊化技術(shù)正逐漸成熟，并受到越來越多公司的青睞。

1 前端模塊化技術(shù)的應(yīng)用現(xiàn)狀

前端模塊化開發(fā)就是將網(wǎng)站的前端按照布局和功能分成若干個模塊，每個模塊完成特定的功能[1]，然后，將所有模塊按一定組織方式形成一個整體，完成整個系統(tǒng)的功能。這樣就極大地降低了程序員開發(fā)時彼此之間的干擾，更加有利于多人協(xié)同開發(fā)。而且，基于前端模塊化開發(fā)技術(shù)的應(yīng)用還具有提高網(wǎng)頁瀏覽速度、高效組織與維護(hù)網(wǎng)絡(luò)信息資源、減少代碼冗余等優(yōu)點(diǎn)。

為解決前端模塊化開發(fā)技術(shù)發(fā)展過程中遇到的種種問題，出現(xiàn)了一些開發(fā)工具，如：CSS Sprites、YUI Compressor等。為提高前端模塊化開發(fā)效率，又出現(xiàn)了一些javascript組件庫，如 Jquery[2]、Yahoo UI Library、mootools等。這些工具和組件庫只是在某個方面彌補(bǔ)了前端模塊化開發(fā)的技術(shù)空白并提高了工作效率，卻并不能完全解決問題。而且，隨著前端模塊化開發(fā)技術(shù)的蓬勃發(fā)展，網(wǎng)站的大量需求又都轉(zhuǎn)到前端處理，甚至將網(wǎng)頁做成交互型應(yīng)用程序，這個趨勢使前端開發(fā)代碼量急速增加，并更進(jìn)一步增加了前端模塊化開發(fā)的難度。

由此可見，現(xiàn)在的前端模塊化開發(fā)已經(jīng)發(fā)展成為一個系統(tǒng)工程，開發(fā)人員必須從多方面考慮，多角度分析，從細(xì)節(jié)做起，共同協(xié)作才能實(shí)現(xiàn)前端模塊化開發(fā)的目標(biāo)。目前，國內(nèi)只有騰訊、百度、新浪、豆瓣等少數(shù)幾個網(wǎng)站設(shè)計(jì)了自己的前端模塊化開發(fā)框架結(jié)構(gòu)，擁有自己的開發(fā)策略，但這些公司對于前端模塊化開發(fā)技術(shù)的運(yùn)用也不是很嫻熟。因此，對前端模塊化開發(fā)策略的研究還是非常必要的。

2 前端模塊化技術(shù)的開發(fā)策略

前端模塊化開發(fā)的基本思想與模塊化的程序設(shè)計(jì)相似，即在Web上以模塊為基本單位劃分與組織信息，將網(wǎng)頁的內(nèi)容分開，形成若干個相對獨(dú)立的模塊。模塊只是用來存放基本頁面元素的容器，并把常用的頁面元素也制成模塊，便于這些頁面元素的調(diào)用與管理。因此，前端模塊化技術(shù)沒有復(fù)雜的邏輯運(yùn)算，而是主要關(guān)注作為骨架的HTML與作為表現(xiàn)層的CSS以及實(shí)現(xiàn)行為的JavaScript三方面的拼裝組合和代碼復(fù)用上，以減少它們之間的循環(huán)依賴、降低耦合、提高設(shè)計(jì)效率。這時就需要有一套有效的開發(fā)策略，所有的模塊都在這個策略下進(jìn)行設(shè)計(jì)，并以此劃分工作任務(wù)。常見的開發(fā)策略有以下三種。

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

傳統(tǒng)模塊化開發(fā)首先將每個頁面拆分成很多個基本模塊，比如logo、導(dǎo)航、內(nèi)容1、內(nèi)容2、尾部導(dǎo)航、版權(quán)信息等等，然后將每個模塊生成一個單獨(dú)的文件。當(dāng)頁面要求加載時，使用載入CSS[3]，使用載入JavaScript，就實(shí)現(xiàn)了前端的模塊化。代碼如下所示：

這樣做看上去簡單易行，卻存在很多問題。首先會出現(xiàn)大量模塊，不但不便于管理，還會使請求數(shù)猛增。例如一個頁面有四個模塊，那就至少會產(chǎn)生4（個模塊）×2（個類型：CSS/JS）=8個請求，再加上一些函數(shù)庫，請求就會更多。另外內(nèi)容未經(jīng)過壓縮也會造成嚴(yán)重的性能問題，阻塞頁面顯示。其次，這種方式不適合團(tuán)隊(duì)開發(fā)。

2.2 頁面級的模塊化開發(fā)策略

頁面級模塊化開發(fā)，指根據(jù)不同頁面的模塊劃分情況設(shè)定所需的JavaScript與CSS模塊。例如頁面A，設(shè)定header.js、list.js、info.js、header.css、list.css和info.css六個模塊，頁面B設(shè)定info.css和info.js兩個模塊。所有頁面和其所依賴的模塊關(guān)系都由開發(fā)者寫在頁面級的設(shè)定文件中。當(dāng)某個頁面請求其所需模塊時[4]，通過一些工具，例如Mini工具，依據(jù)設(shè)定文件將所需模塊合并及最小化，這樣只需一個請求，就可以得到請求頁面所需的所有模塊，解決了傳統(tǒng)模塊化開發(fā)中請求數(shù)量過多和內(nèi)容未壓縮的問題。頁面級模塊化結(jié)構(gòu)如圖1所示。

[模塊a] [模塊b] [模塊c] [模塊c] [模塊a] [模塊d] [模塊e] [頁面的Loader][服務(wù)器][頁面A] [頁面B] [頁面C][設(shè)定檔] [下載模塊]

圖1 頁面級模塊化結(jié)構(gòu)示意圖

雖然頁面級的模塊化開發(fā)策略有效地解決了請求數(shù)量及壓縮問題，但仍存在很多問題。首先，不易維護(hù)。當(dāng)需要移除一個頁面時，該頁面所依賴的模塊也應(yīng)全部移除，可是又不能百分之百確定別的頁面不會用到將要移除的依賴模塊，最終導(dǎo)致模塊越積越多。其次，線上調(diào)試非常困難。因?yàn)榘l(fā)布的是混淆后的代碼，幾乎無法實(shí)現(xiàn)調(diào)試。因此，還需要通過進(jìn)一步調(diào)整開發(fā)策略來解決問題。

2.3 模塊級的模塊化開發(fā)策略

模塊級的模塊化開發(fā)，是指開發(fā)人員分別定義自身頁面模塊的依賴關(guān)系，即每個頁面所需模塊的設(shè)定，而不是像頁面級模塊化開發(fā)那樣記錄在一個中央設(shè)定文件中。當(dāng)用戶請求某個頁面時，頁面的Controller會指定需要載入的頁面，但不需指定該頁面要依賴哪些模塊，這些需要載入的模塊會由加載的Loader自行計(jì)算得到。然后，Loader會與服務(wù)器端交互，將所需模塊分組、合并與壓縮，再并行下載到請求下載的瀏覽器上。模塊級模塊化結(jié)構(gòu)如圖2所示。

[模塊b] [模塊c] [模塊e] [模塊a] [模塊d] [模塊c] [模塊a] [頁面A][頁面B][頁面C] [頁面的Loader

指定載入A、B、C頁面

自動算出還有a、b、c、d、e模塊需載入][服務(wù)器][自動分散做并行下載]

圖2 模塊級模塊化結(jié)構(gòu)示意圖

當(dāng)前基于這種模塊級模塊化開發(fā)規(guī)范的框架有很多，例如RequireJS和YUI3。RequireJS是目前使用非常廣泛的框架，只要定義好模塊的依賴關(guān)系，就會依次將所需模塊自動載入，不需做任何配置。而發(fā)布到線上時，可以使用Node.js提供的r.js進(jìn)行合并與最小化。但是，RequireJS仍然存在發(fā)布時間偏長和線上調(diào)試?yán)щy的問題。相比之下，YUI3的Loader下載方式則更加優(yōu)秀，其使用一種稱為Combo Handler的機(jī)制[5]，它會將線上文件直接以GET的方式指定路徑，進(jìn)行動態(tài)合并及最小化。由于受到GET的長度限制，YUI Loader會根據(jù)模塊的載入順序、總數(shù)量和當(dāng)前瀏覽器的GET長度限制等信息自動將Combo Handler的請求分散為若干個，進(jìn)行并行下載，這樣就解決了RequireJS遇到的問題。

3 結(jié)束語

由此可見，依賴當(dāng)前出現(xiàn)的多種框架及工具，并加以適當(dāng)修改就可以很好地實(shí)現(xiàn)模塊級模塊化開發(fā)策略，從而有效地解決了前端模塊化開發(fā)中的諸多問題，既便于團(tuán)隊(duì)開發(fā)，又具有發(fā)布快、易于線上調(diào)試及維護(hù)、提高性能等優(yōu)點(diǎn)。但與此同時，新問題也在不斷涌現(xiàn)，例如頁面模塊的劃分、模塊的粒度和模塊的繼承等都還存在很多問題，這些都需要前端開發(fā)人員繼續(xù)努力去解決，進(jìn)而完善模塊化開發(fā)策略。

參考文獻(xiàn)：

[1] 張宏森等.基于模塊的網(wǎng)頁設(shè)計(jì)技術(shù)[J].計(jì)算機(jī)應(yīng)用研究，2009.2.

[2] jQuery.http：//jquery.com/.2009-03-26

[3] 張經(jīng)緯.CSS模塊化的理解.http：//www.blue1000.com/bkhtml/2009-02/61778.htm

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

[5] Yahoo UI Library.http：//developer.yahoo.com/yui/docs/API（YUILibrary）.htm