引言

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

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

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

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

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

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

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

2.1 傳統模塊化開發策略

傳統模塊化開發首先將每個頁面拆分成很多個基本模塊，比如logo、導航、內容1、內容2、尾部導航、版權信息等等，然后將每個模塊生成一個單獨的文件。當頁面要求加載時，使用載入CSS，使用Ajax技術分別載入。

 這樣做看上去簡單易行，卻存在很多問題。首先會出現大量模塊，不但不便于管理，還會使請求數猛增。例如一個頁面有四個模塊，那就至少會產生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兩個模塊。所有頁面和其所依賴的模塊關系都由開發者寫在頁面級的設定文件中。當某個頁面請求其所需模塊時，通過一些工具，例如Mini工具，依據設定文件將所需模塊合并及最小化，這樣只需一個請求，就可以得到請求頁面所需的所有模塊，解決了傳統模塊化開發中請求數量過多和內容未壓縮的問題。

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

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

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

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

3 結束語

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