網站前端模塊化開發策略研究

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

關鍵詞： 網站開發； 前端模塊化； 開發策略； 框架

中圖分類號：TP319 文獻標志碼：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 引言

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

1 前端模塊化技術的應用現狀

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

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

由此可見，現在的前端模塊化開發已經發展成為一個系統工程，開發人員必須從多方面考慮，多角度分析，從細節做起，共同協作才能實現前端模塊化開發的目標。目前，國內只有騰訊、百度、新浪、豆瓣等少數幾個網站設計了自己的前端模塊化開發框架結構，擁有自己的開發策略，但這些公司對于前端模塊化開發技術的運用也不是很嫻熟。因此，對前端模塊化開發策略的研究還是非常必要的。

2 前端模塊化技術的開發策略

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

2.1 傳統模塊化開發策略

傳統模塊化開發首先將每個頁面拆分成很多個基本模塊，比如logo、導航、內容1、內容2、尾部導航、版權信息等等，然后將每個模塊生成一個單獨的文件。當頁面要求加載時，使用載入CSS[3]，使用載入JavaScript，就實現了前端的模塊化。代碼如下所示：

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

2.2 頁面級的模塊化開發策略

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

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

圖1 頁面級模塊化結構示意圖

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

2.3 模塊級的模塊化開發策略

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

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

指定載入A、B、C頁面

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

圖2 模塊級模塊化結構示意圖

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

3 結束語

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

參考文獻：

[1] 張宏森等.基于模塊的網頁設計技術[J].計算機應用研究，2009.2.

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

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

[4] 熊茜.基于虛擬表示模型的Web頁面模塊化設計方法[J].計算機應用，2008.25（2）.

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