基于MVC設(shè)計(jì)模式的前端設(shè)計(jì)

◆嚴(yán) 偉 郭 丹

（北京大學(xué)軟件與微電子學(xué)院 北京 100000）

基于MVC設(shè)計(jì)模式的前端設(shè)計(jì)

◆嚴(yán) 偉 郭 丹

（北京大學(xué)軟件與微電子學(xué)院 北京 100000）

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

MVC設(shè)計(jì)模式；Web前端技術(shù)；用戶體驗(yàn)

0 引言

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

1 模塊化設(shè)計(jì)思想

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

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

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

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

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

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

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

（4）代碼難以維護(hù)管理。傳統(tǒng)的前端設(shè)計(jì)中，往往不具模塊化的特點(diǎn)，這導(dǎo)致了代碼冗余混亂嚴(yán)重，不利于后期的維護(hù)與管理。

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

3 基于MVC 設(shè)計(jì)模式的前端設(shè)計(jì)方案

該前端設(shè)計(jì)將前端各構(gòu)件分為Module-View-Controller三層：Module（模型層）負(fù)責(zé)與數(shù)據(jù)相關(guān)的部分，功能是將數(shù)據(jù)從服務(wù)器端獲得，并對數(shù)據(jù)進(jìn)行邏輯運(yùn)算操作，與此同時(shí)，因?yàn)榭蛻舳舜嬖诘拇鎯?chǔ)機(jī)制，它負(fù)責(zé)把沒有更改過并且需要多次使用的數(shù)據(jù)存儲(chǔ)到本地緩存中。Controller（控制器層）負(fù)責(zé)整體的調(diào)度工作。View（視圖層）負(fù)責(zé)圖形界面等顯示操作。

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

本前端設(shè)計(jì)中，與數(shù)據(jù)相關(guān)的內(nèi)容由模型層控制。控制器負(fù)責(zé)整體調(diào)度，視圖接收交互邏輯處理的結(jié)果并顯示在客戶端。視圖層和模型之間不存在直接交互，這正符合展現(xiàn)與數(shù)據(jù)分離的思想。模型層可以被重復(fù)使用，進(jìn)而減小前端代碼的編寫數(shù)量。

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

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

Controller層位于模型層和視圖層之間，負(fù)責(zé)整體調(diào)度工作，它監(jiān)聽事件和視圖上的輸入，并對其進(jìn)行相應(yīng)的處理工作，同時(shí)對用戶事件進(jìn)行響應(yīng)視圖。

4 測試結(jié)果