WebForms VS. MVC(翻譯)

周見智發表於2014-10-10

(本文翻譯自CodeProject上阿三寫的一篇文章,原文地址:http://www.codeproject.com/Articles/528117/WebForms-vs-MVC,講了有關ASP、ASP.NET WebForms以及ASP.NET MVC三種技術,這篇文章有助於ASP.NET初學者理解一些基本概念。)

介紹:

我很早之前就開始從事Asp.NET的開發工作,我也比較喜歡使用WebForms來開發Web程式。在2008年,微軟推出了一個叫Asp.NET MVC的東西,我當時和很多人一樣很好奇為什麼還要再推出一個全新的Asp.NET技術呢。許多人說Asp.NET MVC代替了Asp.NET WebForms,但事實並非如此。它們兩者各有優劣,雖然沒有人告訴過我們該如何選擇哪種技術來開發web程式,但是我們可以討論一些關鍵事實來幫助我們以後作出選擇。本篇文章便是對兩種技術的介紹。

                      

我們同時也找到以下問題的答案,

  • Asp.NET是什麼?
  • Asp.NET WebForms是什麼?
  • MVC是什麼?
  • Asp.NET MVC是什麼?

如果您是一個非常有經驗的Asp.NET MVC開發者,且已經非常瞭解MVC,那麼這篇文章將會讓您重新複習一下與之相關的概念。

 

目錄:

  • 談談“視覺化”
  • Web技術
  • Web開發中的“視覺化”
  • 什麼是Asp.NET?
  • 什麼是Asp.NET WebForms?
  • Asp.NET 4.0
  • 什麼是MVC?
  • 什麼是Asp.NET MVC?
  • 如何選擇Asp.NET WebForms和Asp.NET MVC?
  • 總結

 

1.談談“視覺化”

微軟最初推出一個概念叫“視覺化”,在一些“視覺化技術”諸如Visual Basic、Visual C++等的支援下,微軟實現了圖形使用者程式(Graphical User Applications)的快速開發(RAD)。“拖”、“拽”、“智慧感知”等技術也使得開發者能夠將精力集中在系統的業務邏輯處理中而非UI介面開發上。但是,這種“視覺化”的技術僅僅限制於桌面應用程式開發(Windows桌面程式,譯者注),當涉及到Web程式開發時,微軟只能選擇ASP。

 

 

 

 

 

 

2.Web技術

當我們談到Web技術時,有我們熟悉經典的ASP,PHP,JSP,ASP.NET WebForms,ASP.NET MVC等等。經典的ASP是微軟推出的Web技術之一。ASP最大的難點是它的“義大利式”的程式碼風格不利於後期維護,我們假設這樣一個場景:有一些TextBox文字輸入框和一個按鈕,當你點選按鈕時,後臺會驗證文字框中的輸入資料,如果驗證成功,則將輸入資料存入資料庫;否則,在頁面顯示一個紅色的錯誤提示。你知道這個場景中最大的問題嗎?你必須自己手工做許多事情:

1.首先建立一個“自我提交”式頁面,即將表單Form的Action屬性值設定為頁面本身(自己處理表單中的資料,譯者注);

2.當你點選提交按鈕時,TextBox控制元件中的值會被清空,所以後臺獲得使用者輸入的唯一方式便是從頁面提交的表單資料集中去查詢(注意Post方式和Get方式的區別,譯者注);

3.如果後臺驗證資料失敗,你必須顯示地:

         1)將提交的資料一一對應地賦給每個TextBox控制元件(維持頁面上一次的狀態,譯者注);

         2)顯示錯誤提示資訊。

(使用Ajax是一種驗證資料的方式,這裡我僅僅是為了舉例來說明在經典的ASP開發中,我們必須手工完成的工作)

 

3.Web中的“視覺化”

像諸如Visual Basic這樣的視覺化技術的使用場合單一,當開發Web程式時,微軟只能選擇經典的ASP。當我們討論WEB和DESKTOP時(這裡應該是Web程式和桌面程式,譯者注),我們應該考慮兩件事:

        1.狀態管理是如何進行的?

        2.請求/回覆是如何進行的?

Web程式是基於“無狀態”的HTTP協議(有關無狀態的真實定義,參見博主前面的文章,譯者注)的,前後兩次請求之間沒有任何關聯,它不像桌面程式那樣既可以有臨時變數來儲存狀態,同時也完全地遵守“事件驅動模型”。與桌面程式類似,Web程式也需要等待使用者的輸入,但不同的是Web程式中,使用者的每次請求之間都是相互獨立的,即每次Request和Response都是全新的。最後,微軟推出了一個叫Asp.NET WebForms的東西,它被當做一個新的RAD工具並且也很容易掌握。

 

4.什麼是Asp.NET

Asp.NET是微軟釋出的一款基於CLR的Web程式開發框架,可以使用多種語言,比如C#、VB.NET等。它支援兩種開發模式:Asp.NET WebForms和Asp.NET MVC。

 

5.什麼是WebForms

微軟最開始釋出基於ASP的Asp.NET WebForms技術的目的是為了幫助Web開發者建立一個“無狀態Web”之上的抽象層,它能夠模擬“有狀態”的特性(類似桌面程式開發,譯者注)。在WebForms中引進了類似“自我提交”(將表單資料提交到頁面本身)、ViewState(在頁面提交時儲存控制元件值)等概念。最有趣的是我們甚至不用寫任何一行程式碼(一個網站就能執行起來,譯者加),在Asp.NET WebForms中,微軟試圖將類似Visual Basic這種視覺化的(桌面,譯者加)開發模式引入到Web開發中。

那麼現在我們來談談WebForms的優缺點。

本文中一切WebForms都指“Asp.NET WebForms”,譯者注

優點:

  • WebForms支援豐富的伺服器控制元件

        當我們跟HTML打交道時,我們可能會發現,頁面顯示效果並不是始終是一樣的(瀏覽器相容差異,譯者注)。在IE中看起來很好的UI效果再FireFox中很可能出現“錯位”或者其他變化。Asp.NET 伺服器控制元件能夠區分不同的瀏覽器,對應地產生與之相匹配的HTML程式碼,如果有需要,JavaScript也可能會額外產生。

        許多類似GridView或者ListView等伺服器控制元件具備“資料繫結”的能力,這大大減少了我們的工作量。(雖然資料繫結很爛,呵呵,譯者注

  • 支援ViewState

        你可能經常聽見“HTTP是一種無狀態協議”這樣的話,通常情況下,在兩次請求之間,頁面的控制元件(這裡指HTML控制元件,類似input等,譯者注)是不能夠自己儲存自己的狀態,但是在WebForms中,有一種被叫作ViewState的東西能夠以隱藏域(hidden filed)的形式存在於靜態網頁中,它能夠儲存任何一個伺服器控制元件的狀態。

  • 事件驅動程式設計

        在以下技術的幫助下,微軟在Internet世界中引入的事件驅動程式設計。

        1.Code Behind

        2.自我提交(將表單資料提交給自己處理)

        3.ViewState

        開發者在後臺處理使用者輸入資料時,不再依賴於Post方式還是Get方式。比如TA只需要拖拽一些控制元件(如Button)到頁面中,然後雙擊新增事件處理程式,再在自動生成的程式碼中編寫業務邏輯,這是開發者所需要做的東西,TA完全不用去考慮底層到底發生了什麼(如怎樣從提交的資料集合中獲得使用者的輸入、怎樣儲存頁面控制元件的狀態等等,這些全部由系統完成,開發者只需要像開發桌面程式(如WInform)那樣去開發Web程式。譯者注

  • RAD

        我認為再沒必要詳細解釋這個,上面三條足以能夠說明WebForms能夠加快Web程式的開發速度。它相當於在傳統Web開發的基礎上封裝了一個抽象層,開發者無需去弄清楚底層複雜過程。

  • 學習簡單

        使用強大的伺服器控制元件和ViewState後,開發者只需要掌握少量的HTML和JavaScript知識。

缺點:

  • 專案架構

當使用WebForms開發Web程式時,並沒有一種預先定義好的統一專案架構,開發者可以隨意地選擇他們喜歡的架構。一些人可能選擇三層架構(UI層、業務邏輯層、資料訪問層),而另外一些高手可能更喜歡Model-View-Presenter(MVP)。甚至我們可以將所有的程式碼都寫在Code Behind檔案(.cs檔案,譯者注)中,很明顯,這不是一個好的程式設計習慣。

  • 單元測試

        在WebForms中,Code Behind檔案中包含許多的事件處理程式,這使得自動單元測試變得相當艱難。

        注:據我所知,即使在一些模仿測試的幫助下(如使用MOQ或者rhinomoq),我們也幾乎模擬不出來事件處理程式中的兩個引數(sender和eventargs)(sender一般代表激發事件的控制元件,譯者注)。

  • 效能

        ViewState雖然解決了經典ASP技術面臨的一些問題(如無法自動儲存頁面狀態,參見前面,譯者注),但它同時也帶來了許多問題,ViewState以Hidden Field的形式存在於網頁中,隨網頁一起來回傳輸,這無疑增加了頁面資料量從而降低效能。

  • 重用性

我們來看看另外一個需要建立兩個UI介面的例子:

        1)需納稅員工介面

        2)無需納稅員工介面

這兩個頁面的Code Behind程式碼中有許多的邏輯是相同的。一種做法就是隻建立一個UI頁面,在該頁面的Code Behind中增加一些if的判斷語句。但這樣做會:

        1)這違背了單一職責原則(SRP)

        2)Secondly it may possible that both UI(沒清楚原文啥意思,譯者注

  • 與HTML控制元件互動困難

        在WebForms中,我們很難確定最終顯示在使用者瀏覽器中的HTML程式碼是怎樣的(因為大部分HTML程式碼由系統自動生成,譯者注),這使得我們很難在頁面中使用一些JavaScript庫,比如JQuery等。

  • SEO

        URL都是指向固定的aspx頁面(附帶一些查詢引數),這降低了使用者親和度也影響了SEO。

  • 不支援並行開發

        aspx頁面和Code Behind程式碼緊密相連,所以多人很難同時去開發一個頁面(比如一個人開發aspx頁面而另外一個人編寫Code Behind程式碼)。

 

6.Asp.NET 4.0

Asp.NET 4.0推出了許多新特性去解決上面提到的一些問題

  • ViewState

        提供了一種可以控制ViewState大小甚至禁用ViewState的方法(但是並沒有一個確定或者強制性的規則要求開發者去這樣做)。

  • URL路由

        提供了一種可以代替頁面實體地址的方法。

  • ID

        在Asp.NET 4.0中,我們能夠更好的控制頁面控制元件的ID,這樣以來,我們可以更好地去使用一些類似Jqeury的指令碼庫(但是我們還是不能完全去控制自動產生的HTML)。

即使在Asp.NET發生了革命性的更新後:

        1)它還是沒能解決單元測試遇到的問題

        2)我從沒看見某個人去禁用ViewState(個人觀點,呵呵)

        3)我們可以更好地去操控頁面HTML,但是仍然不能完全控制,依舊不能徹底地應用JavaScript指令碼庫。

 

7.什麼是MVC?

MVC是一種已經出現了很久的架構模式。很多人在Java中使用到它,它並不是微軟提出來的心概念。雖然Asp.NET MVC是我們本次討論的主題,但是我覺得在那之前,我們應該先搞清楚一些技術概念。

  • 模式

        簡單來說,模式是我們解決一個問題的解決方案。

  • 架構模式

        架構模式指在子系統級別上解決問題的方式,它主要解決與專案架構有關的問題。它告訴我們怎樣劃分系統甚至為什麼要這樣劃分。我們按照要求建立類庫、元件或者Web服務來解決最終的問題。

  • MVC

        當我們討論系統時,它一般包含使用者輸入邏輯、業務處理邏輯以及UI顯示邏輯等,MVC是一種架構模式,它能夠讓我們開發出各個模組之間鬆耦合的應用程式。MVC最主要的目的是“關注點分離”,它能夠分離開UI顯示、業務邏輯以及使用者輸入等。根據MVC的規定,一個系統應該被劃分為Model、View以及Controller三個部分:

  • Model:它被當做一個可以處理業務規則、邏輯以及資料的智慧體,同時它獨立於MVC中其它兩個部分(C和V)(不訪問Controller和View,譯者注
  • Controller:它負責接收使用者請求、分配請求給處理者,它可以訪問Model和View。
  • View:它被當做一個啞巴,專門呈現最終的資料給使用者。它可以是一個excel表單,也可以是一個包含許多記錄的web頁面甚至是一個純文字。它可以訪問Model。

 

 

 

8.什麼是Asp.NET MVC

 

Asp.NET MVC是微軟的一種新的Web程式開發框架,主要強調了功能模組的分離以及易測試性。它執行在CLR之中並以MVC為基礎,它不再支援ViewState和伺服器控制元件,所以我感覺回到了傳統Web開發。我們來討論一下Asp.NET MVC的優缺點:

優點:

  • 專案架構

      Asp.NET MVC的優點之一便是它強制要求功能塊的分離,所以把東西搞得複雜多樣的情況很少。

 

 

 

 

 

 

 

 

 

 

  • 測試驅動開發和重用

        1)在MVC中,Controller是一個單獨的類,所以自動測試稱為可能

        2)Controllers不依賴於任何View,所以它完全能夠被多個View重用。

  • 效能

        Asp.NET MVC不支援ViewState,因此它不會增加頁面資料大小。

  • 對HTML的完全控制

        Asp.NET MVC不支援伺服器控制元件,只能使用HTML控制元件。使用者在瀏覽器看到的HTML與我們在開發階段編寫的幾乎一致,在開發階段能夠對HTML元素進行很好的操控,因此我們可以很好的使用到第三方指令碼庫比如JQuery等。

  • 支援並行開發

        在Asp.NET MVC中,各個部分都是鬆耦合的,一個人可以負責Controller、另外一個一個負責View,而第三個人可以負責Model。

  • SEO, URL routing and REST

        豐富的URL路由特性讓我們可以把每個URl都當做一個資源。同時URL的易讀性也增加了使用者親和度並且有利於SEO。

  • 擴充套件性

        Asp.NET MVC中支援多檢視引擎。

  • 已有的Asp.NET特性

        由於Asp.NET MVC是基於成熟的Asp.NET框架的,因此原有的許多優秀特性都可以繼續試用,如Windows身份驗證、Session等等。

缺點:

  • 不易學習

        事件驅動以及ViewState的缺失使Asp.NET MVC不再簡單易學,尤其對於一些沒有Web開發經驗的人。

 

9.Asp.NET MVC執行機制

 

1.使用者使用URL請求伺服器

2.請求先進入Controller(路由引擎決定一個請求應該由哪個Controller處理,本文未談及此內容)

3.如果有需要,Controller會訪問Model來獲取資料

4.Model訪問資料庫,並且資料返回給Controller

5.Controller選擇一個合適的View(比如包含HTML表格頁面)

6.Controller將資料(第4步由Model返回的)傳給第5步選擇的View

7.Controller將View傳送給使用者(瀏覽器)。

以上只是Get方式的請求,Post方式類似。唯一的區別就是,使用者不是在位址列中輸入URL,而是在已返回的頁面上點選按鈕等操作,之後伺服器端的處理流程類似。

 

10.如何選擇Asp.NET WebForms還是Asp.NET MVC

對於一個特定的系統或者一個特定的團隊成員組成,兩者都有可能稱為“最好的選擇”。當面臨選擇其中的一種技術作為開發平臺時,瞭解兩者的技術優劣非常重要。

當你要做出選擇時,有兩個非常重要的因素是:

1.RAD(Rapid Application Development)

       如果你想快速開發出系統(比如一個演示demo,譯者注),Asp.NET WebForms是你最好的選擇,你甚至根本不用考慮使用Asp.NET MVC去實現“快速開發”。

2.單元測試

      對於你的系統,如果自動單元測試非常重要,那麼Asp.NET MVC是你的選擇。

除了上面2條,你最好將你專案的需求寫下來,然後再比較WebForms和MVC的優缺點,如果可以的話,你可以試圖問問自己以下問題:

1.你的團隊有很好的WebForms或者Windows Forms開發經驗嗎?

嗯,如果回答是正確的,那麼讓你的團隊再去學習Asp.NET MVC將是一件困難的事情,因為他們已經熟悉了事件驅動程式設計以及習慣了ViewState,“改變習慣”是一件很艱難的工作。這時候,給Asp.NET WebForms投上一票。

2.你的團隊有很好的Asp.NET MVC開發經驗嗎?

回答如果是,投Asp.NET MVC一票。

3.你的團隊有ASP經驗,或者一些非微軟技術(Android、ios、JSP、ROR、PHP)開發經驗嗎?

如果你曾經是一個ASP或者JSP開發者,那麼你可能很熟悉HTTP的兩種請求方式(GET和Post),你甚至也很瞭解MVC,因為那些技術大多數預設採用了MVC。這時候投Asp.NET MVC一票。

4.JavaScript是否需要大範圍被使用?

如果是,那麼投Asp.NET MVC一票,因為它完全可以操控HTML元素。

5.追求高效能嗎?

Asp.NET MVC不支援ViewState,因此能夠有更好的效能。這時候投Asp.NET MVC一票。

6.計劃重用相似的輸入邏輯程式碼嗎?

如果是,投Asp.NET MVC一票。

 

總結

我認為,你應該瞭解足夠的資訊之後,再決定使用哪種技術,而這些很大程度依賴於你的專案和你的開發團隊。希望你們喜歡這篇文章,謝謝你們耐心閱讀本文。

 

-------------------------

以上為翻譯全文,斜體字為譯者自行增加的內容。全文並沒有一字一句的按照原文翻譯,部分屬於譯者自己理解而寫出來的。

相關文章