基于WEB開發(fā)框架的研究

楊毅

摘要：程序開發(fā)框架的選擇，始終是個(gè)仁者見仁、智者見智的事情。尤其是WEB層的開發(fā)框架，數(shù)量非常多，而且各有特色，常見的有MVC、MVP、AOP、ORM、MVVM等，文章將主要對(duì)MVC、MVP、MVVM三種框架進(jìn)行分析，敘述其優(yōu)缺點(diǎn)，以方便開發(fā)人員進(jìn)行選擇。

關(guān)鍵詞：MVC；MVP；MVVM

1MVC框架

MVC（Model View Controller）是把軟件系統(tǒng)分為模型、視圖、控制器3個(gè)基本部分。M是指數(shù)據(jù)模型，V是指用戶界面，c則是控制器。使用MVC的目的是將M和V的實(shí)現(xiàn)代碼分離，從而使同一個(gè)程序可以使用不同的表現(xiàn)形式。比如一批統(tǒng)計(jì)數(shù)據(jù)可以分別用柱狀圖、餅圖來(lái)表示。C存在的目的則是確保M和V的同步，一旦M改變，V應(yīng)該同步更新。

圖1為Java實(shí)現(xiàn)的MVC模型，Java MVC模式是將Servlet，Jsp和JavaBean結(jié)合起來(lái)的技術(shù)。Servlet適合數(shù)據(jù)處理，JavaBean用于模型，而Jsp適合顯示。這個(gè)模式充分發(fā)揮了每項(xiàng)技術(shù)的優(yōu)點(diǎn)。

在早期的WEB開發(fā)中，因?yàn)闃I(yè)務(wù)比較簡(jiǎn)單，并沒有這3層的劃分。用戶數(shù)據(jù)的呈現(xiàn)及輸入的接收、封裝、驗(yàn)證、處理、以及對(duì)數(shù)據(jù)庫(kù)的操作，都放在Jsp頁(yè)面中。隨著業(yè)務(wù)越來(lái)越復(fù)雜，需要考慮更好的利用OOP來(lái)解決問(wèn)題。于是便把業(yè)務(wù)邏輯抽取出來(lái)并形成與顯示和持久化無(wú)關(guān)的一層，能夠讓業(yè)務(wù)邏輯清晰，產(chǎn)品更便于維護(hù)。這就是SUN當(dāng)初倡導(dǎo)的JSP Model1開發(fā)方式。

Modell模式的實(shí)現(xiàn)比較簡(jiǎn)單，適用于快速開發(fā)小規(guī)模項(xiàng)目。但從工程化的角度看，局限性非常明顯：JSP頁(yè)面身兼View和Controller2種角色，將控制邏輯和表現(xiàn)邏輯混雜在一起，從而導(dǎo)致代碼的重用性非常低，增加了應(yīng)用的擴(kuò)展性和維護(hù)的難度。

Jsp Model2中引入了MVC框架，使用了3種技術(shù)JSP、Servlet和JavaBeans，Jsp負(fù)責(zé)生成動(dòng)態(tài)網(wǎng)頁(yè)，只用做顯示頁(yè)面。Servlet負(fù)責(zé)流程控制，用來(lái)處理各種請(qǐng)求的分派。JavaBeans負(fù)責(zé)業(yè)務(wù)邏輯，對(duì)數(shù)據(jù)庫(kù)的操作。

大部分Web應(yīng)用程序都是用像ASP，PHP，或者JSP來(lái)創(chuàng)建的。造成了數(shù)據(jù)庫(kù)查詢語(yǔ)句這樣的數(shù)據(jù)層代碼和像HTML這樣的表示層代碼混在一起。由經(jīng)驗(yàn)的開發(fā)者會(huì)將數(shù)據(jù)從表示層分離開來(lái)，交由后臺(tái)處理，但這通常不是很容易做到的，它需要精心的計(jì)劃和不斷的嘗試。而使用MVC框架，應(yīng)用程序被分成3個(gè)核心部件：模型、視圖、控制器，各自處理自己的任務(wù)。盡管使用MVC框架需要付出一些額外的工作，但是給人們帶來(lái)的好處是無(wú)庸質(zhì)疑的。

視圖（View）代表用戶交互界面，通常由網(wǎng)頁(yè)組成。在早期WEB開發(fā)中，網(wǎng)頁(yè)的數(shù)據(jù)嵌入在頁(yè)面中，無(wú)論頁(yè)面打開多少次，頁(yè)面內(nèi)容也不會(huì)發(fā)生變化，這種頁(yè)面稱為靜態(tài)網(wǎng)頁(yè)。而MVC框架中View視圖中的數(shù)據(jù)來(lái)源于數(shù)據(jù)庫(kù)，隨著數(shù)據(jù)庫(kù)數(shù)據(jù)的變化，頁(yè)面中的數(shù)據(jù)也會(huì)隨著發(fā)生改變，稱之為動(dòng)態(tài)網(wǎng)頁(yè)，現(xiàn)在比較流行的動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)技術(shù)由Jsp、Asp和Php。Java的MVC模型就是采用的Jsp動(dòng)態(tài)開發(fā)技術(shù)，因此View的頁(yè)面由jsp網(wǎng)頁(yè)組成。在View層只涉及數(shù)據(jù)的顯示，和數(shù)據(jù)的采集，不涉及視圖的業(yè)務(wù)處理。比如最常見的登錄頁(yè)面，登錄視圖只是把登錄的信息進(jìn)行收集并提交，不對(duì)登錄的信息做判斷。

模型（Model）：就是業(yè)務(wù)流程/狀態(tài)的處理以及業(yè)務(wù)規(guī)則的制定。在MVC的3個(gè)部件中，模型擁有最多的處理任務(wù)。視圖中的數(shù)據(jù)由Model來(lái)提供，當(dāng)需要改變視圖中的數(shù)據(jù)時(shí)，不需要修改WEB頁(yè)面，只需要修改相應(yīng)的Model即可。MVC框架中Model層的主要關(guān)注點(diǎn)是如何把請(qǐng)求的數(shù)據(jù)自動(dòng)裝配成Action所需要的bean，除此外，框架Model層還可以提供復(fù)合bean自動(dòng)裝配、輸入校驗(yàn)、本地化及國(guó)際化、字符集編碼轉(zhuǎn)換、多重輸出等功能。比如上述的登錄系統(tǒng)，就是由Model層來(lái)完成登錄賬號(hào)和密碼的判定。由于應(yīng)用于模型的代碼只需寫一次就可以被多個(gè)視圖重用，所以減少了代碼的重復(fù)性。

控制（Controller）接受用戶的輸入并調(diào)用模型和視圖去完成用戶的需求。Java MVC中的控制層由Servlet來(lái)實(shí)現(xiàn)?？刂茖硬⒉粚?duì)數(shù)據(jù)做處理，而是根據(jù)視圖的提交要球，來(lái)決定調(diào)用相對(duì)應(yīng)的模型。比如上述的登錄系統(tǒng)，控制器的作用就是接收View層提交的信息，并把這個(gè)信息傳給對(duì)應(yīng)的Model去處理，然后把處理后的結(jié)果，再返回給View層。

MVC的優(yōu)點(diǎn)：（1）可以為一個(gè)模型在運(yùn)行時(shí)同時(shí)建立和使用多個(gè)視圖。變化-傳播機(jī)制可以確保所有相關(guān)的視圖及時(shí)得到模型數(shù)據(jù)變化，從而使所有關(guān)聯(lián)的視圖和控制器做到行為同步。（2）視圖與控制器的可接插性，允許更換視圖和控制器對(duì)象，而且可以根據(jù)需求動(dòng)態(tài)的打開或關(guān)閉、甚至在運(yùn)行期間進(jìn)行對(duì)象替換。（3）模型的可移植性。因?yàn)槟Ｐ褪仟?dú)立于視圖的，所以可以把一個(gè)模型獨(dú)立地移植到新的平臺(tái)工作。需要做的只是在新平臺(tái)上對(duì)視圖和控制器進(jìn)行新的修改。（4）潛在的框架結(jié)構(gòu)?？梢曰诖四Ｐ徒?yīng)用程序框架，不僅僅是用在設(shè)計(jì)界面的設(shè)計(jì)中。

MVC的不足體現(xiàn)在以下幾個(gè)方面：（1）MVC并沒有很明確的定義，所以完全理解MVC并不是很容易。并且內(nèi)部實(shí)現(xiàn)原理比較復(fù)雜和多樣，對(duì)于新手來(lái)說(shuō)需要花費(fèi)一些時(shí)間去思考。（2）視圖與控制器的可接插性，造成模型和視圖的分離，這樣也給調(diào)試應(yīng)用程序帶來(lái)了一定的困難。（3）MVC的實(shí)現(xiàn)比較復(fù)雜，并不適合小型甚至中等規(guī)模的應(yīng)用程序，花費(fèi)大量時(shí)間將MVC應(yīng)用到規(guī)模并不是很大的應(yīng)用程序通常會(huì)得不償失。

2MVP框架

MVC（Model-View-Controller，模型-視圖-控制器）模式是80年代Smalltalk-80出現(xiàn)的一種軟件設(shè)計(jì)模式，后來(lái)得到了廣泛的應(yīng)用，其主要目的在于促進(jìn)應(yīng)用中模型、視圖、控制器間的關(guān)注的清晰分離。MVP（Model-View-Presenter，模型視圖-表示器）模式則是由IBM開發(fā)出來(lái)的一個(gè)針對(duì)C++和Java的編程模型，大概出現(xiàn)于2000年，是MVC模式的一個(gè)變種，主要用來(lái)隔離UI、UI邏輯和業(yè)務(wù)邏輯、數(shù)據(jù)。

Model-View-Presenter旨在應(yīng)用程序分層和提高測(cè)試效率，主要目標(biāo)是將顯示邏輯與業(yè)務(wù)邏輯分離，正如設(shè)計(jì)面向?qū)ο蟪绦蛑袆?chuàng)建松散耦合并可重用的對(duì)象。MVP的另一個(gè)目標(biāo)是提高針對(duì)View的測(cè)試效率。編寫依賴Session，ViewState，AJAX，HTML或web控件和業(yè)務(wù)實(shí)體的單元測(cè)試類較為復(fù)雜，因此將各視圖的顯示邏輯保留在ASPX/ASCX文件類中，并將業(yè)務(wù)邏輯從中分離出來(lái)放在相應(yīng)的類中，在MVP中Presenter充當(dāng)視圖和業(yè)務(wù)邏輯的緩沖層。

MVC和MVP的區(qū)別：在MVP里，Presenter把Model層和View層進(jìn)行了完全的分離，View并不直接使用Model，主要的業(yè)務(wù)邏輯在Presenter里實(shí)現(xiàn)。而且，Presenter與具體的View是沒有直接關(guān)聯(lián)的，而是通過(guò)定義好的接口進(jìn)行交互，從而使得在變更View時(shí)候可以保持Presenter的不變，達(dá)到了重用的效果，而在MVC中View會(huì)從直接Model中讀取數(shù)據(jù)而不是通過(guò)Controlle如圖2所示。

從圖中可以看到，在MVC里，View是可以直接訪問(wèn)Model的，View里會(huì)包含Model信息，因此不可避免的還要包括一些業(yè)務(wù)邏輯。在MVC模型里，更注重業(yè)務(wù)的邏輯，也就是Model的不變，而針對(duì)Model，則有不同的顯示及View。所以，在MVC模型里，View是依賴于Model的，但是Model不依賴于View。并且，如果有一些業(yè)務(wù)邏輯在View里實(shí)現(xiàn)了，則導(dǎo)致要更改View也是比較困難的，因?yàn)閂iew中的業(yè)務(wù)邏輯是無(wú)法重用的。

在MVP模式里，View只有簡(jiǎn)單的Set/Get的方法，用來(lái)輸入和設(shè)置界面顯示的內(nèi)容，除此就不應(yīng)該有更多的內(nèi)容，絕不容許直接直接訪問(wèn)Model，而這就是與MVC很大的不同之處。

MVP的優(yōu)點(diǎn)：（1）View和Model實(shí)現(xiàn)了完全分離，可以修改View而不影響Model。（2）業(yè)務(wù)邏輯的處理更加集中，便于控制。（3）多個(gè)View可以共用一個(gè)Presener，便于代碼的重用。（4）業(yè)務(wù)邏輯集中在Presenter中，便于進(jìn)行單元測(cè)試。

MVP的缺點(diǎn)：由于對(duì)View的控制放在了Presenter中，造成了View和Persenter的交互會(huì)過(guò)于頻繁。這樣會(huì)增加View和Presenter的耦合性，一旦View發(fā)生了變化，Presenter也需要進(jìn)行變化。比如，原來(lái)的Html網(wǎng)頁(yè)顯示的是Word文檔，但是新求需要將Word文檔轉(zhuǎn)換為PDF文檔顯示，那么就需要更改View和Presenter。

3MVVM框架

MVVM是3層架構(gòu)，M層（Model實(shí)體層）、V層（View表示層）、VM層（ViewModel層，對(duì)Model層進(jìn)行CRUD進(jìn)行操作，同時(shí)對(duì)V層提供數(shù)據(jù)綁定）。對(duì)這種模式的實(shí)現(xiàn)，大部分都是通過(guò)在view層聲明數(shù)據(jù)綁定來(lái)和其他層分離的，這樣就方便了前端開發(fā)人員和后端開發(fā)人員的分工，前端開發(fā)人員在html標(biāo)簽中寫對(duì)Viewmodel的綁定數(shù)據(jù)，Model和Viewmodel是后端開發(fā)人員通過(guò)開發(fā)應(yīng)用的邏輯來(lái)維護(hù)這兩層。

最近幾年，MVVM模式在Javascript中開始有人實(shí)現(xiàn)，目前比較成熟的框架有KnockoutJS，Avalon MVVM和Knockback.js，原理如圖3所示。

（1）infoChannel：信息通道，主要用于向后臺(tái)發(fā)起數(shù)據(jù)請(qǐng)求。（2）dataChannel：數(shù)據(jù)通道，主要用于存儲(chǔ)從后臺(tái)獲取到的數(shù)據(jù)。（3）moleManage：數(shù)據(jù)操作，主要用于操作數(shù)據(jù)通道中的數(shù)據(jù)，如crud操作。（4）modulePool：數(shù)據(jù)倉(cāng)庫(kù)，主要存儲(chǔ)后臺(tái)返回的數(shù)據(jù)。（5）crudStorePool：crud實(shí)例池，增刪改的數(shù)據(jù)，在持久化到數(shù)據(jù)庫(kù)之前，都會(huì)先存在于此池中。（6）action：后臺(tái)數(shù)據(jù)處理及數(shù)據(jù)庫(kù)訪問(wèn)模塊

執(zhí)行流程如下：（1）infoChannel通過(guò)調(diào)用服務(wù)器端action獲取數(shù)據(jù)庫(kù)數(shù)據(jù)。（2）infoChannel把獲取的數(shù)據(jù)放到內(nèi)存中的modulePool中。（3）dataChannel從modulePool中取數(shù)據(jù)，并傳遞到View端。（4）View端的數(shù)據(jù)通過(guò)moleManage取出。（5）moleManage把取出的數(shù)據(jù)放到內(nèi)存的crudStorePool中。（6）通過(guò)infoChannel把crudStorePool中的數(shù)據(jù)傳遞到后臺(tái)，實(shí)現(xiàn)數(shù)據(jù)的持久化操作。

ViewModel的具體應(yīng)用：（1）在前端開發(fā)中如需初始化某一模塊的數(shù)據(jù)可以調(diào)用dataChnannel中的initViewData（viewld，dataStoreParam）方法。（2）如需查詢某一節(jié)點(diǎn)的數(shù)據(jù)集，可以調(diào)用dataChnannel中的getDataByPath（viewId，path）。（3）如需進(jìn)行crud操作，可以調(diào)用moleManage中的相關(guān)方法。

ViewModel解決的問(wèn)題：（1）向后臺(tái)的多請(qǐng)求操作改為通過(guò)接口統(tǒng)一調(diào)用。（2）是一個(gè)前后端通信的中間件，具有可插拔性，適用于文檔型及關(guān)系型數(shù)據(jù)庫(kù)。（3）實(shí)現(xiàn)了單例模式，避免多個(gè)實(shí)例操作同一個(gè)對(duì)象。（4）緩存大數(shù)據(jù)，避免頻繁向后臺(tái)請(qǐng)求數(shù)據(jù)。

4Model層

Model層同其他的MVC框架一樣，Model代表特定領(lǐng)域的數(shù)據(jù)或者應(yīng)用所需的數(shù)據(jù)，一個(gè)典型的特定領(lǐng)域的數(shù)據(jù)如用戶信息，或者一部電影的信息。

Model僅僅關(guān)注數(shù)據(jù)信息，不關(guān)心任何行為；不格式化數(shù)據(jù)或者影響數(shù)據(jù)在瀏覽器中的展現(xiàn)；格式化數(shù)據(jù)是View層的任務(wù)，同時(shí)業(yè)務(wù)邏輯層被封裝在Viewmodel中，用來(lái)和Model進(jìn)行交互。在Model層做的一個(gè)比較意外的行為是對(duì)數(shù)據(jù)的驗(yàn)證，比如當(dāng)用戶輸入用戶名的時(shí)候，判斷用戶名的格式是否正確，是否有非法字符等。Model基本是按照上面的定義來(lái)實(shí)現(xiàn)的，但是會(huì)有通過(guò)ajax調(diào)用服務(wù)器服務(wù)來(lái)進(jìn)行讀寫Model數(shù)據(jù)。

MVVM框架是衍生于MVC框架的，兩者之間的最大區(qū)別在于，MVC框架中的Controller是由是由高級(jí)編程語(yǔ)言實(shí)現(xiàn)的，比如用Java實(shí)現(xiàn)的MVC框架，Controller是由servlet實(shí)現(xiàn)，而在View中，也會(huì)用到部分的Jsp代碼；而MVVM框架中的ViewModel則是由腳本語(yǔ)言Javascript實(shí)現(xiàn)，在View界面將不會(huì)用到Jsp代碼，從而實(shí)現(xiàn)了前端和后臺(tái)的完整分離。

優(yōu)點(diǎn)：（1）MVVM使并行開發(fā)更加容易，使前端開發(fā)和后端開發(fā)人員互不影響。（2）抽象化View層，減少了代碼中的業(yè)務(wù)邏輯。（3）ViewModel比事件驅(qū)動(dòng)更容易測(cè)試。（4）ViewModel的測(cè)試不用關(guān)心UI的自動(dòng)化和交互。

缺點(diǎn)：（1）對(duì)于簡(jiǎn)單的UI，使用MVVM有點(diǎn)太重。（2）聲明式的數(shù)據(jù)綁定不利于調(diào)試，因?yàn)槊钍降拇a可以和容易的設(shè)置斷點(diǎn)，這種模式就不利于設(shè)置這樣的斷點(diǎn)。（3）在不挑剔（non-trivial）的應(yīng)用里數(shù)據(jù)綁定可以創(chuàng)建大量的簿記（book-keeping）。（4）在大的應(yīng)用中，在獲取大量的概要（generalization）前很難設(shè)計(jì)視圖模型層。

5結(jié)語(yǔ)

本章主要闡述了比較流行的3個(gè)WEB框架，MVC、MVP和MVVM，并對(duì)其工作原理以及優(yōu)缺點(diǎn)進(jìn)行了分析和比較，并著重介紹了MVVM框架，以及如何實(shí)現(xiàn)MVVM框架的。