基于MVC設計模式的前端設計

◆嚴 偉 郭 丹

（北京大學軟件與微電子學院 北京 100000）

基于MVC設計模式的前端設計

◆嚴 偉 郭 丹

（北京大學軟件與微電子學院 北京 100000）

隨著互聯(lián)網(wǎng)進入Web2．0時代，網(wǎng)絡應用層出不窮，網(wǎng)站的前端也發(fā)生著深刻的變革，各種互動流媒體加入進來，網(wǎng)頁承載的信息量越來越大。與此同時，更強大的網(wǎng)頁交互形式增強了Web應用的用戶體驗，同時，Web前端技術在近年來伴隨著在應用程序的開發(fā)也得到了越來越多的使用。Web應用的普遍使用使得用戶對網(wǎng)站的期望值越來越高，這直接導致網(wǎng)站前端建設工作量擴大，前端腳本越來越多，隨著代碼量得擴大，組織與維護變得更加困難，而且，前端腳本較之后端代碼得重用性更低，擴展性并不良好。因此，亟待建立合理的前端開發(fā)框架。

MVC設計模式；Web前端技術；用戶體驗

0 引言

Web開發(fā)已越來越受到用戶的關注，各大公司不只要做好服務器端的開發(fā)，而且要最大限度地利用瀏覽器和客戶端資源，做好客戶端和服務器間的平衡。此外，Web頁面動態(tài)交互的需求也在逐漸地增多，帶來的后果是處理數(shù)據(jù)的代碼與用于顯示的代碼重疊交叉，怎樣處理好前端代碼，使Web應用前端代碼結構化，易于理解和維護，成為當前亟待解決的重要課題。如今，網(wǎng)絡成為人們獲取信息的主要來源，信息成量級增長，網(wǎng)絡規(guī)模迅速擴張。各種社交平臺如微信、微博以及移動端設備的普及，互聯(lián)網(wǎng)逐漸成為最廣泛的傳輸媒介。但是與互聯(lián)網(wǎng)的蓬勃發(fā)展比較，國內的互聯(lián)網(wǎng)網(wǎng)絡傳輸質量卻被遠遠落在后邊，這使得互聯(lián)網(wǎng)的數(shù)據(jù)通信顯得捉襟見肋。與此同時，Web站點的用戶量急劇增長，在服務器條件同等下，用戶的個人體驗與Web站點的性能優(yōu)化程度成正相關。國內更加重視后臺和客戶端優(yōu)化，而Web前端優(yōu)化往往被忽略。但是我們要重視Web前端優(yōu)化給站點帶來的益處。較之后臺與客戶端優(yōu)化，Web前端優(yōu)化消耗資環(huán)較少，卻可以大幅提高網(wǎng)站的易用性，從而降低了服務器與網(wǎng)絡通信的壓力。

1 模塊化設計思想

隨著計算機網(wǎng)絡技術的迅猛發(fā)展，程序設計思想幾經(jīng)變革，最開始為功能分解法，按照功能進行接口定義，之后是結構化程序設計方法，其中心思想為模塊化，即實現(xiàn)對數(shù)據(jù)與方法的封裝。架構設計的難度與軟件的規(guī)模正相關，因此就要求構建更加高效靈活的開發(fā)架構。模塊化有利于程序員設計實現(xiàn)，減少BUG。此外，模塊化還能降低出錯率，提高代碼復用性，延長生命周期。

前端設計中，模塊化的地位越來越高，它在前端代碼的開發(fā)與維護，以及代碼未來的優(yōu)化中都顯得不可或缺。

2 目前前端開發(fā)存在的問題

傳統(tǒng)的前端設計里，程序員幾乎不會去約定規(guī)范，代碼既不規(guī)范也無法統(tǒng)一，只是對交互效果的簡單實現(xiàn)。隨著前端交互量的大幅提與用戶體驗的要求，再按照傳統(tǒng)的開發(fā)方式去編寫的代碼，終將會被淘汰。Javascript與傳統(tǒng)強類型語言不同，其類型檢查并不嚴格。全局變量的定義很隨意，不同程序員的代碼整合到一起，很難運行成功，常出現(xiàn)以下問題：

（1）代碼復用性很低，相似功能之間代碼不能復用，而是重復編寫一次，代碼冗余嚴重，網(wǎng)絡帶寬壓力很大，同時，眾多的ajax請求嚴重影響用戶的用戶體驗。

（2）不具規(guī)范性，隨著站點的發(fā)展壯大，程序員之間有著各自不同的代碼編寫風格，當代碼進行拼接整合時，各種問題隨之而來。常常造成代碼污染，更嚴重會影響到整個系統(tǒng)的運行。

（3）不具可擴充性。在代碼編寫過程中，由于程序員的編寫風格不同，而且往往不會考慮后續(xù)的擴充情況，只是實現(xiàn)現(xiàn)有的功能與交互需求。

（4）代碼難以維護管理。傳統(tǒng)的前端設計中，往往不具模塊化的特點，這導致了代碼冗余混亂嚴重，不利于后期的維護與管理。

基于以上原因，構建能夠適應現(xiàn)有需求的前端框架成為業(yè)界研究的熱點。

3 基于MVC 設計模式的前端設計方案

該前端設計將前端各構件分為Module-View-Controller三層：Module（模型層）負責與數(shù)據(jù)相關的部分，功能是將數(shù)據(jù)從服務器端獲得，并對數(shù)據(jù)進行邏輯運算操作，與此同時，因為客戶端存在的存儲機制，它負責把沒有更改過并且需要多次使用的數(shù)據(jù)存儲到本地緩存中。Controller（控制器層）負責整體的調度工作。View（視圖層）負責圖形界面等顯示操作。

本架構將一個Web Appliaction按照不同的功能行為劃分為N個互為獨立的子功能模塊，采用異步加載的方式完成模塊之間的通信機制。在Web Appliaction中，如果要實現(xiàn)全部的功能，就需要不同的子模塊之間互相配合，每個模塊都采用MVC設計模式，由模塊間關系可知，在構建架構的過程里，抽象只是針對不同層次之間進行的，并且要盡量做到避免去表達應用的需求，要盡量在最核心構件的的封裝上對問題進行思考，要找到其中的共性并進行抽象設計。

本前端設計中，與數(shù)據(jù)相關的內容由模型層控制?？刂破髫撠熣w調度，視圖接收交互邏輯處理的結果并顯示在客戶端。視圖層和模型之間不存在直接交互，這正符合展現(xiàn)與數(shù)據(jù)分離的思想。模型層可以被重復使用，進而減小前端代碼的編寫數(shù)量。

動態(tài)獲取服務器端的數(shù)據(jù)由Module層完成，并且根據(jù)響應，對數(shù)據(jù)進行相應的增、刪、改、查等邏輯運算。數(shù)據(jù)存儲在模型，因此不必在意控制器與視圖，它只是對數(shù)據(jù)的存儲和相應的邏輯操作。任何和這個模型無關的事件處理操作、視圖模板都不在其內部存在，實現(xiàn)模型和應用程序其他部分的完全解耦。

View層的功能是展示操作，控制器傳給視圖層需要的命令，根據(jù)控制器的控制命令，View層控制頁面的DOM或者XHTML元素生成，利用從控制器傳遞過來的數(shù)據(jù)，去渲染前端樣式。視圖是應用程序和用戶的接口，是用戶直接可見的部分。這些HTML片段，受到控制器的操作，負責事件響應和數(shù)值插入操作。視圖是客戶端顯示的內容相對于服務器端的數(shù)據(jù)結構上改變最大的部分，這很輕易就破壞了MVC的抽象概念，很容易將邏輯等內容在視圖上展現(xiàn)出來?；贛VC的前端架構，僅需要將HTML片段插入服務器端的數(shù)據(jù)中就可以構建新的顯示頁面。由于視圖層沒有數(shù)據(jù)存取的權限，客戶端需要加載模型層，模型層利用Ajax把數(shù)據(jù)傳到客戶端。HTML不再由服務器端進行渲染，客戶端代理了全部的渲染工作。這就表明，視圖的渲染不依賴于服務器端生成。

Controller層位于模型層和視圖層之間，負責整體調度工作，它監(jiān)聽事件和視圖上的輸入，并對其進行相應的處理工作，同時對用戶事件進行響應視圖。

4 測試結果