剛過去的周五（3-14）例行地主持了技術會議，主題正好是《UI層的設計模式——從Script、Code Behind到MVC、MVP、MVVM》，是前一天晚上才定的，中午花了半小時準備了下就開講了。

今天看到了大家在為MVVM knockout.js友(ji)好(lie)地交流，所以就整理下然後更擴展地分享。

主要目的也不是為了爭論，畢竟只是正巧主題相近，原本的打算也就是一次技術分享並且記錄下來。

那麽我們就按照大致的歷史進程將這些概念進行劃分：

• Script
• Code Blocks、Code Behind
• MVC、MVP、MVVM

我們知道的是現實的歷史發生順序並不如上，因為思想都是相似的，比如MVC很早很早就出現了，解釋型語言至今基本上也有很多分支而且在互聯網時代大行其道。

但我要說的是：不要在意這些細節！

當然了，這是玩笑，我的意思是，這些內容我懶得應該在另外獨立的主題探討，篇幅也有限。

Script

這裏腳本的意思不是指當時是用腳本開發，而是像寫腳本一樣開發。它們都有一個特點：功能單一、管理單一、入口單一。

我們最早的程序是匯編，當時的碼農的工作是兼職，工作內容是編寫一套壽命不長的機器控制指令，有些甚至是命令，比如至今依然保留的Command（亮點自尋）：

到後來計算機被用於科學計算等，需求推動了需要更高的開發效率，所以我們有了高級語言。

那個時候碼農其實多是數學家，程序的作用很簡單，就是執行一些數學計算，類似今天ICPC的一些算法問題，比如Hello World：

main()
{
    printf("hello,world\n");
}

這時候，程序還可以被歸結為輸入到輸出的過程，我們還能去講講馮諾依曼模型。

在這個時代，開發是指編寫機器指令，甚至都不配用“開發”這個詞來描述這項工作。

軟件、UI和Markup Language

在那個時代講UI等於放屁，根本不存在這種概念。但全賴我們有神器——摩爾定律。

但我個人認為摩爾定律是不足以讓一個敲命令行的時代在幾十年間轉變成這種各類框架技術架構實踐模式的時代，真正推動計算機形成自有的工程學體系的是還有兩樣東西就是：

• 人的能力並沒有變強，至少沒有在同級數下變強。
• 人類一定會物盡其用

因為人的能力並沒有“跟上”機器，所以才會出現各種模式、方法、工具等等來補足人的不足，以最大地透支機器性能。就像我前幾天在閃存無聊時突然想到的一句： 架構是對客觀不足的妥協，規範是對主觀不足的妥協

當我們需要機器做的事情多了起來，我們就沒辦法在一個芯片上解決所有事情，所以才會有馮諾依曼模型、計算機架構，沒辦法用一臺機器解決，所以才要互聯網、分布式、雲計算。

同樣，隨著計算機的發展，要做的事情多了，就出現了軟件的概念。當“開發”正式化，我們需求的軟件就變得：功能繁雜、管理統一、多入口。

真正變化的不是客觀本質，而是需求。就像這裏說的“軟件入口”在客觀上我們還是只有一個，原理上始終都只有一個啟動程序、一個啟動代碼片段。但“軟件的入口”，已經從指代Main函數變成了指代起始UI，用戶已經從指代專業人士變成了指代一般消費者，先有軟件的需求，才有軟件的定義，而需求是在變化的。

一個軟件需要比當時多幾個數量級的代碼：

• 客觀上我們沒辦法做一個能顯示所有代碼的顯示器
• 主觀上我們沒辦法在超快速滾動中看清所有代碼

所以我們需要添加索引、用多個文件組織代碼。

機器的發展和軟件的需求擴大和細化，我們開始出現了用戶界面（User Interface）的概念和最適合用於界面的語言——標記語言（Markup Language）。當然，ML不是為UI而生的，它只是十分適合UI，所以才和UI墜入愛河。

因為有了更高UI的需求，所以代碼才正式被分化為描述做什麽（業務邏輯）和有什麽（UI）的兩部分，因為我們開發時沒辦法在兩種思維方式下同時工作，開發時的人腦是單線程的。我們所看到的同時進行UI和邏輯開發只不過是我們學會了在兩種模式下快速切換，看起來像同時進行，而不是真正的同時進行。同樣的情況也發生在不同的代碼片段的開發中。

分化的情況除了UI，還發生在方方面面，比如數據操作、UI的對象和樣式分離，我們還是繼續從UI講下去吧。

Code Block和Code Behind（其實還有Code Inside，比如onclick="javascript:alert(‘哎呀我*‘)"）

UI和邏輯分開了兩種語言來寫，但是它們也要放在同一個項目中，因為它們原本就是要一起工作的。即使是分開，也需要相連，因為這是它們本來要解決的問題。

這時候我們出現的（通常的）解決方案就是Code Block和Code Behind。雖然從時間上似乎Code Block比Code Behind要早，有種感覺就是越新越好，但實質上它們正交替地發展著，因為誰也沒辦法解決UI和邏輯代碼分化後的一個哲學問題——UI和邏輯是一起的，但是它們卻不是一起的。

Code Block能很好地處理UI和邏輯間在一起的關系，你在同一個地方可以同時維護UI和邏輯：

 1 @model GM.OA.Finance2.Web.Models.FinancialBase.CurrencyModel
 2 @{
 3     ViewBag.Title = "EditCurrencyDrawer";
 4     Layout = "~/Views/Shared/_DrawerLayout.cshtml";
 5 }
 6 
 7 @section styles {
 8     <link href="/Content/base/table-form.css" rel="stylesheet" />
 9     <link href="/Content/base/drawer.bigtitle.css" rel="stylesheet" />
10 }

<a href="#" class="addcurrency oa-btn" oa-style="green">添加新幣別</a>

<script type="text/javascript">
    $(document).ready(function () {
        $(‘.addcurrency‘).click(function () {
            $.oa.drawer.openUrl(‘AddCurrencyDrawer/‘, ‘addcurrency‘, {
                width: 300
            });
        });
    });
</script>

Code Behind能很好地處理UI和邏輯各自分開的關系，你可以讓UI和邏輯各自做好各自的事情：

<asp:Button ID="RemoveSelectedCurrency_Button" runat="server" Text="刪除選中幣別" OnClick="RemoveSelectedCurrency_Button_Click" />
<asp:Button ID="RemoveAllCurrencies_Button" runat="server" Text="刪除所有幣別" OnClick="RemoveAllCurrencies_Button_Click" />

 1 protected void RemoveSelectedCurrency_Button_Click(object sender, EventArgs e)
 2         {
 3             var currencyId = Currencies_ListBox.SelectedItem.Value;
 4             currencyManager.Remove(currencyId);
 5         }
 6 
 7         protected void RemoveAllCurrencies_Button_Click(object sender, EventArgs e)
 8         {
 9             currencyManager.RemoveAll();
10         }

因為存在兩種實現方式，所以就存在了對比，因為存在了對比，所以就存在了爭論。就像是Java和.NET、PHP和.NET、WebForm和MVC、Mac OS和Windows、iOS和Android、騰訊和所有其他互聯網公司，等等。

問題不在哪個更好，而是我們要解決什麽問題。當然，這聽(ben)著(lai)像(jiu)是客氣話了。

真正在UI和邏輯分化後帶來的實質問題是：

• 是按邏輯和UI劃分地管理，還是按單界面的事務進行劃分地管理

至少UI和邏輯剛分化的時代，在軟件上，我們還認為同一項事務是基於同一個UI的一系列操作完成的。

在摩爾定律還持續發揮作用的時候，計算機領域依舊高速發展，所以通常我們還在為一樣事物爭論、思考、辯證的時候，它已經發生了質變了，不變的只是我們要解決的問題。

事務，以及界面、數據、事件、業務

在之前說到過了，當需求變得龐大，解決方案也會變得龐大；當解決方案變得龐大，就會出現細分；當出現細分，就會出現按哪種方式管理的問題。

軟件從處理一件事務發展到了要處理許多事務，各事務間有包含、順序、主次等等的關系，變得越來越復雜。因為數據與邏輯龐大了，所以數據與邏輯就分離了，然後事件和業務分離了。

它們的關系已經在我們還理得清之前持續發展而變得更加難理得清，但在一個時間點上，它們UI的領域大致分化成這些原子：

• 界面
• 數據
• 事件
• 業務

你要細化的話會有更多繁雜的細節，但相信這麽寫的話爭議性比較小。

當一個問題出現一次的時候它是一個問題，當一個問題出現了無數次的時候它會成為歷史，當一個問題將會出現無數次的時候，它將需要一個明確的定義和解決方案。

其中，數據的更新和界面的更新這一特殊事件的問題被放大了無數倍，因為它出現了無數次。

Model-View-Controller

在ASP還在奮鬥的時候WebForm突然到來，正如WebForm還在奮鬥的時候MVC突然到來。當然，我這裏講的MVC還是最原始的MVC，因為MVC在我們還在爭論的時候已經發展了許多不同分支了。

有一點相信大家同意的就是，我們今天討論爭論的MVC、MVP、MVVM、Code Behind等等都源自於職能分化和規劃的思想與目的，MVC不是它們的開始，但是一個很好的開始。

相信MVC的模型大家很熟悉，也很容易找到，我們這裏用一下某百科的圖：

我們可以看到的是，界面被分到了View，數據分到了載體Model上由Model“攜帶”，業務集中在Controller中，而推動業務的事件由用戶與View交互，通過View向Controller發動。

當然，實現由很多種，每種細節上都有不同，所以我才只講也只能講大致的MVC。MVC的其中一個缺點便是沒有明確的定義，所以不同的實現（比如Struts和ASP.NET MVC）細節上都是不一樣的。

我們需要知道的是，MVC並不是像上面所說的一些事情那樣是一種“必然的”結果，它是一系列必然結果問題中的一種解決方案，而且是不完美的解決方案。我們順著推理去到一個地方很容易犯的一個錯誤就是認為路只有這一條而忽視其他可能性（估計這也是導致很多爭鬥的原因）。另外，我們在討論一件事物不完美的時候是有一個情境的，所以請不要像“我說它色彩單一，然後你把它塗成彩色後證明我是錯的”。

MVC的一般流程是這樣的：View（界面）觸發事件--》Controller（業務）處理了業務，然後觸發了數據更新--》不知道誰更新了Model的數據--》Model（帶著數據）回到了View--》View更新數據

這裏也不多再陳述MVC的原理、實踐等等，因為這就太長篇大論了。

Model-View-Presenter和一些衍生

像我們之前推理的，分化是一種需求的必然結果，但卻沒有個一個確定的結果，比如Code Behind和Code Block的問題等等。

MVC順著需求把UI相關的工作分化成了三份，這點經過實踐證明無可厚非。但是它們的三角關系卻被一些人認為帶來了一些問題，或者應該說他們有“更好的”解決方案。

在只有Code Behind和Code Block的那個時候維護是很直接的，不是在同一段代碼內解決就是在同一個關聯的事件上解決。三角關系的問題就是維護問題。在MVC，當你有變化的時候你需要同時維護三個對象和三個交互，這顯然讓事情復雜化了。

我們之前說到，隨著摩爾定律，軟件的需求不斷地變化和變得龐大。隨著需求變得龐大的時候，需求變化也變得頻繁，這是一個出現了無數次以後也將會出現無數的無數次的一個問題，所以它需要一個解決方案，哪怕它不一定能被解決。

為了解決需求變化，從《人月神話》到敏捷到DDD，它不是我們已經解決了的問題，而是我們正在解決的問題。放在UI的模式和MVC上來講，就是優化或者替代MVC模式，其中之一就是Model-View-Presenter（MVP）模式。

我們先看看兩個MVP模式的圖：

（圖一）

（圖二）

兩幅圖是不同的，但是對MVC的改進的思想卻是一樣的：切斷的View和Model的聯系，讓View只和Presenter（原Controller）交互，減少在需求變化中需要維護的對象的數量。

這種方式很符合我們的期待，因為我們傾向於：

• 用更低的成本解決問題
• 用更容易理解的方式解決問題

許多時候並不是一種模式不好，而是因為人沒辦法執行，比如不容易理解，我們就會選擇容易理解的方式。計算機依賴摩爾定律用數量的增長來解決問題，而人是用方式的改變來解決問題的。同樣因為客觀原因我們不善於維護多個對象和多個對象之間的關系，所以我們改變了，或者說簡化了這種方式。

MVP定義了Presenter和View之間的接口，讓一些可以根據已有的接口協議去各自分別獨立開發，以此去解決界面需求變化頻繁的問題。上面兩圖都有接口，不過接口的實現和使用細節不一樣，不過思想上是一致的。

在這裏要提到的是，事實上，需求變化最頻繁的並不一定是最接近用戶的界面，但基本可以確定的是，最接近用戶的界面是因為需求變化而需要最頻繁更改的。當然，如果View如果是API而不是UI，那就另說了。

還有一些用來“解決”MVC這項缺點的比如有：ASP.NET MVC的ViewBag，Cocoa的delegate。它們都為了簡化數據更新的問題而存在，包括MVVM。

Model-View-ViewModel

先直接看看Model-View-ViewModel（MVVM）的圖：

從圖上看是比MVP簡單了，更不用說MVC了。個人不認為MVVM是從MVP進化而來，我只覺得這是在MVP之後出現的一種“更好的”UI模式解決方案，但是用MVP來與之對比比較容易說明問題。

ViewModel大致上就是MVP的Presenter和MVC的Controller了，而View和ViewModel間沒有了MVP的界面接口，而是直接交互，用數據“綁定”的形式讓數據更新的事件不需要開發人員手動去編寫特殊用例，而是自動地雙向同步。數據綁定你可以認為是Observer模式或者是Publish/Subscribe模式，原理都是為了用一種統一的集中的方式實現頻繁需要被實現的數據更新問題。

比起MVP，MVVM不僅簡化了業務與界面的依賴關系，還優化了數據頻繁更新的解決方案，甚至可以說提供了一種有效的解決模式。

至此，我們能理解為什麽許多人認為MVVM是最好的一種模式，沒有之一。但事實上，MVVM也是依賴於我們至今所講的“特有的情境”。

當然，最優雅的也是第一個能作代表的實踐就是Windows Presentation Foundation（WPF）了。

Web

之上，我們在模式演變的推論基本上都還是基於桌面軟件的，但是過去十年卻是互聯網的時代。實際上大部分讓大家爭議的並不是在桌面領域最合適的是那個，而是在Web領域的模式問題，也就是在B/S場景下的問題。

當軟件離開單機，去到網絡的時候，因為場景變了，所以原有的解決方案也變了，不過需求依然是不變的。我們依然要解決的問題是用戶交互與數據更新的問題，還有維護等等的問題。

當場景變到Web的時候，我們發現MVVM用來做服務端是極其不適用的，至少現在是不適用的。而MVP你提都不用提。為什麽呢？因為：

• 網絡資源成本過高
• 開發成本過高

問大家一個問題，當一個網頁的數據更新後，你希望更新用戶看到的數據，你會怎麽做？

一般情況下，你會：

window.location.reload();

就算你不這麽做，用戶也會：

F5

就像之前說的，我們會選擇更直接的方式解決問題。直接刷新頁面的原因是因為這樣更直接，更容易解決數據更新的問題。

很多時候你不會願意為了一個數據更新寫一個AJAX，更別說這個AJAX要帶來Loading、事件順序處理、網絡問題、異常處理等等，這就是開發成本過高。

另一個網絡成本過高就更容易解釋了，雖然寬帶是基本包月的，但也不帶這麽用的，何況還有移動用戶。更主要的原因是，在本地軟件，更新數據是一個引用問題，而在網絡應用上，這是一個傳輸問題。傳輸成本遠高於引用成本，引用之上頂多是在本地內存中再進行一次內存拷貝。

這個時候，我們會更傾向於用MVC模式，因為在Web層面，我們更傾向於一次性更新數據。

Web的MVVM

所有問題都不是問題，就算有問題也要解決問題。

為什麽這個標題下突然冒出這麽一句話？我想說的是，需求依舊是不變的，是推動進步的原動力。

還有我之前說過，當我們討論或者爭論一個問題的時候，問題的對象已經發生改變了，而且這次是在我們討論這個問題之前已經發生改變了。

網絡資源成本不斷下降，相信已經不需要多提及。摩爾定律和相近的一些原理正在發揮著它應用的作用，網絡帶寬越來越高、相應速度越來越快。

如果傳輸因為相對成本下降而導致數據傳輸的成本低於開發人員拒絕客戶的成本，那麽它就會被實現而不是被拒絕。

另外還有一點就是因為技術的進步，技術的資源不斷被更大規模地壓榨，需求也不斷地增長，那麽需求始終會增長超過相對不變的開發成本的。比如jQuery的出現解決了很多問題，我們現在更多地去使用AJAX，哪怕很大一部分依然是為了解決網絡資源不足的問題；我們會用更多的樣式代碼而用了相對更少的圖片；我們不再那麽依賴Flash一類的矢量圖解決方案而直接錄制視頻。

至少上一節我們說到的兩個導致大家選用MVC的問題都正在被解決，所以我們有理由相信未來Web不僅僅需要MVC，可能會需要MVVM或其他解決方案。至少我們能理解容易理解為什麽前端會出現一些MVVM的框架，比如先驅knockout.js和AngularJs。這些框架本身的好壞就不作討論了，因為我們討論的是模式。

在Web上，MVVM的對比對象就不是MVC，而是Code Block。

數據即時更新的需求在擴大，但未必有達到一定要用MVVM這一等級的高大上的模式，實際上如果你要更新一個數據，你還是會采取：

$(‘.notice‘).html(‘發送成功！‘);

因為......我們依然會采取更直接的方式解決問題......

實際上，現在Web MVVM主要並不是用在了Web或者Wap上，而是移動App上。按照前面的說法，只可能是：

• HTML+JS比原生在一些場景上更適合Native
• 在移動App上比Web上更適合使用MVVM

哪怕是Native開發，實際上iOS的開發上也是用類似的數據綁定的方式的。這裏也不深究了，畢竟我也不算懂iOS。

要說的是，在Web MVVM或者Web的模式上，也就是Web的富應用上，現在還不過是個初期由膨脹的需求推動的階段。重要的不是技術會怎麽走，而是需求和客觀條件會怎麽走。

可能Webform會因為高速開發而煥發第二春，它的AJAX的模式也十分滿足於簡單開發，但似乎大家需要的不是GUI式的網頁。

結尾語

我們不一定需要MVVM，但我們一定需要更強大的方式去解決不斷膨脹的Web需求。

我們可以預見的是：

• 會有更強大的瀏覽器
• 會有更強大的JavaScript或者框架
• 會有更加適合的模式

除去客氣話的部分，我還是想說，在不同的需求下其實有最適合的解決方案，通常讓我們糾結的不是因為哪個解決方案更好，而是我們看到的條件不夠多。

編譯語言當然比解釋語言效率高，但考慮到開發和維護成本，JavaScript等始終會大行其道，比如Node.JS、Python；.NET和微軟當然很強大，移植.NET到其他平臺也很容易，但微軟是家有自己商業模式和要賺錢的公司；當然有些實踐和技術更好，但其他開發人員會避開甚至否定自己不擅長的東西，大家都喜歡確定的東西；有些技術更強大，但是只是基於特殊的客觀條件和需求，如果你想做大，要麽創造客觀條件，要麽把它結合需求......

之前有要交流的園友會用園子的短消息，好像個人資料裏也沒有把郵箱顯示出來。有興趣交流的就直接[email protected]吧。

從Script到Code Blocks、Code Behind到MVC、MVP、MVVM