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

引言

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

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

前端模塊化開發就是將網站的前端按照佈局和功能分紅若干個模塊，每一個模塊完成特定的功能[1]，而後，將全部模塊按必定組織方式造成一個總體，完成整 個系統的功能。這樣就極大地下降了程序員開發時彼此之間的干擾，更加有利於多人協同開發。並且，基於前端模塊化開發技術的應用還具備提升網頁瀏覽速度、高 效組織與維護網絡信息資源、減小代碼冗餘等優勢。

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

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

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

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

2.1 傳統模塊化開發策略

傳統模塊化開發首先將每一個頁面拆分紅不少個基本模塊，好比logo、導航、內容一、內容二、尾部導航、版權信息等等，而後將每一個模塊生成一個單獨的文件。當頁面要求加載時，使用載入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 結束語

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

【編輯推薦】

1. 前端模塊化開發的價值
2. 前端模塊化開發那點歷史
3. 前端模塊化設計思路

轉載地址  http://mobile.51cto.com/web-407715.htm