返回目錄

百度百科的定義：

MVP 是(shi)(shi)從(cong)經典的(de)(de)(de)(de)模式(shi)MVC演變(bian)而(er)來，它(ta)們(men)的(de)(de)(de)(de)基本(ben)思想有(you)相(xiang)通的(de)(de)(de)(de)地方：Controller/Presenter負(fu)責(ze)邏(luo)輯的(de)(de)(de)(de)處理(li)，Model提供數據，View負(fu) 責(ze)顯示。作為一(yi)種新的(de)(de)(de)(de)模式(shi)，MVP與MVC有(you)著一(yi)個重大的(de)(de)(de)(de)區(qu)別：在MVP中View并不直接(jie)使用Model，它(ta)們(men)之間的(de)(de)(de)(de)通信(xin)是(shi)(shi)通過(guo)Presenter (MVC中的(de)(de)(de)(de)Controller)來進(jin)行(xing)的(de)(de)(de)(de)，所有(you)的(de)(de)(de)(de)交(jiao)互(hu)都發生在Presenter內部，而(er)在MVC中View會從(cong)直接(jie)Model中讀取數據而(er)不是(shi)(shi)通過(guo) Controller。

在MVC里(li)，View是可(ke)以直(zhi)接訪(fang)問Model的(de)！從而(er)，View里(li)會包含(han)Model信息(xi)，不可(ke)避免的(de)還要(yao)(yao)包括一些(xie) 業務邏(luo)輯(ji)。 在(zai)MVC模型(xing)里(li)，更關注的(de)Model的(de)不變，而(er)同時有(you)多個對Model的(de)不同顯(xian)示(shi)，及View。所以，在(zai)MVC模型(xing)里(li)，Model不依賴(lai)(lai)于(yu)View，但(dan)是 View是依賴(lai)(lai)于(yu)Model的(de)。不僅如此，因為有(you)一些(xie)業務邏(luo)輯(ji)在(zai)View里(li)實現了，導(dao)致(zhi)要(yao)(yao)更改(gai)View也是比較(jiao)困難的(de)，至少那些(xie)業務邏(luo)輯(ji)是無法重用的(de)。

MVVM在概念上是真正(zheng)將頁面與數據(ju)邏(luo)輯分(fen)離的模式，在開(kai)(kai)發方式上，它是真正(zheng)將前臺(tai)代碼開(kai)(kai)發者(zhe)（JS+HTML）與后臺(tai)代碼開(kai)(kai)發者(zhe)分(fen)離的模式（asp,asp.net,php,jsp）。

MVP與傳統MVC的區別，但目前我們提倡的MVC已經走向MVP了

在MVP里，Presenter完全把Model和View進(jin)行了分(fen)離，主(zhu)要的(de)程序邏輯(ji)在Presenter里實現。而且，Presenter與(yu)具體的(de) View是沒(mei)有(you)直接(jie)關聯(lian)的(de)，而是通過定義好的(de)接(jie)口進(jin)行交互，從(cong)而使(shi)得(de)在變(bian)(bian)更View時候可以(yi)保持(chi)Presenter的(de)不變(bian)(bian)，即重用！

不(bu)僅(jin)如此，我(wo)們還(huan)可(ke)以(yi)(yi)編(bian)寫測(ce)試用(yong)的(de)View，模擬用(yong)戶(hu)的(de)各種(zhong)操作，從而(er)實(shi)現對Presenter的(de)測(ce)試--而(er)不(bu)需(xu)要使用(yong)自(zi)動(dong)化(hua)的(de)測(ce)試工具。 我(wo)們甚(shen)至可(ke)以(yi)(yi)在Model和View都沒有完成時候，就可(ke)以(yi)(yi)通過編(bian)寫Mock Object（即(ji)實(shi)現了Model和View的(de)接口，但沒有具體的(de)內容的(de)）來(lai)測(ce)試Presenter的(de)邏(luo)輯。

在(zai)(zai)(zai)MVP里，應用(yong)程(cheng)(cheng)序的(de)(de)邏輯主要在(zai)(zai)(zai)Presenter來(lai)實(shi)現(xian)(xian)，其中的(de)(de)View是(shi)(shi)很(hen)薄的(de)(de)一(yi)層。因此就有(you)人(ren)提出了(le)(le)Presenter First的(de)(de)設計模(mo)式(shi)，就是(shi)(shi)根據User Story來(lai)首先(xian)設計和開發Presenter。在(zai)(zai)(zai)這(zhe)(zhe)個(ge)過程(cheng)(cheng)中，View是(shi)(shi)很(hen)簡(jian)單的(de)(de)，能夠(gou)把信(xin)息顯示(shi)清楚就可(ke)(ke)以(yi)了(le)(le)。在(zai)(zai)(zai)后面，根據需要再隨便更改View， 而(er)對Presenter沒(mei)有(you)任何的(de)(de)影響(xiang)了(le)(le)。 如果要實(shi)現(xian)(xian)的(de)(de)UI比較復雜(za)，而(er)且相關的(de)(de)顯示(shi)邏輯還跟Model有(you)關系，就可(ke)(ke)以(yi)在(zai)(zai)(zai)View和Presenter之(zhi)(zhi)(zhi)間(jian)(jian)放置一(yi)個(ge)Adapter。由這(zhe)(zhe)個(ge) Adapter來(lai)訪(fang)問Model和View，避免兩者之(zhi)(zhi)(zhi)間(jian)(jian)的(de)(de)關聯。而(er)同時，因為(wei)Adapter實(shi)現(xian)(xian)了(le)(le)View的(de)(de)接口，從(cong)而(er)可(ke)(ke)以(yi)保證與Presenter之(zhi)(zhi)(zhi) 間(jian)(jian)接口的(de)(de)不變。這(zhe)(zhe)樣就可(ke)(ke)以(yi)保證View和Presenter之(zhi)(zhi)(zhi)間(jian)(jian)接口的(de)(de)簡(jian)潔，又不失去UI的(de)(de)靈活性。 在(zai)(zai)(zai)MVP模(mo)式(shi)里，View只應該有(you)簡(jian)單的(de)(de)Set/Get的(de)(de)方法，用(yong)戶輸入和設置界(jie)面顯示(shi)的(de)(de)內容，除此就不應該有(you)更多的(de)(de)內容，絕不容許直接訪(fang)問 Model--這(zhe)(zhe)就是(shi)(shi)與MVC很(hen)大(da)的(de)(de)不同之(zhi)(zhi)(zhi)處。

目前我們提倡的MVC已經與MVP沒有太大區別，View依(yi)然是很薄的(de)(de)(de)一層，不進行(xing)與Model的(de)(de)(de)邏(luo)輯(ji)處理(li)，只進行(xing)簡單(dan)的(de)(de)(de)頁面顯示的(de)(de)(de)邏(luo)輯(ji)處理(li)。

MVVM是Model-View-ViewModel的簡寫。

的(de)(de)(de)(de)WPF帶來(lai)了新(xin)的(de)(de)(de)(de)技(ji)術體(ti)驗，如Sliverlight、音頻、視頻、3D、動畫(hua)……，這導致了UI 層更加細(xi)節(jie)化、可(ke)定制化。同(tong)時(shi)，在(zai)技(ji)術層面(mian)，WPF（原(yuan)來(lai)winform那邊的(de)(de)(de)(de)）也帶來(lai)了 諸(zhu)如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新(xin)特(te)(te)性。MVVM（Model-View- ViewModel）框架(jia)的(de)(de)(de)(de)由來(lai)便是MVP（Model-View-Presenter）模(mo)式與WPF結合的(de)(de)(de)(de)應用方式時(shi)發展演變過來(lai)的(de)(de)(de)(de)一種新(xin)型架(jia)構框架(jia)。 它立(li)足于(yu)原(yuan)有MVP框架(jia)并(bing)且把WPF的(de)(de)(de)(de)新(xin)特(te)(te)性揉合進去，以(yi)應對客戶日益(yi)復雜的(de)(de)(de)(de)需求變化。

MVC中引入MVVM的意義

前(qian)端工程師們與程序開發(fa)人(ren)員(yuan)們實現了(le)真正(zheng)的分離，當然，為(wei)了(le)減(jian)少(shao)重復代碼量，前(qian)端人(ren)員(yuan)有必要了(le)解一個數據庫結構。

前端進行MVVM的JS插件，knockoutjs

Knockoutjs可(ke)以靈活的(de)實現(xian)數據(ju)的(de)綁定工作，對(dui)于(yu)前臺(tai)開發人(ren)員來說(shuo)，不需要關(guan)心(xin)后臺(tai)數據(ju)以何種方式產生，它們只需要關(guan)心(xin)數據(ju)的(de)屬性簽名即(ji)可(ke)，對(dui)于(yu)程序開發人(ren)員來說(shuo)，它們關(guan)心(xin)的(de)是數據(ju)產生的(de)接口，包括簡單的(de)CURD操(cao)作接口，程序開發人(ren)員完(wan)成(cheng)可(ke)以把這些邏輯寫在單獨(du)的(de)JS文件(jian)中，由(you)HTML頁面指定引用，真實數據(ju)即(ji)可(ke)完(wan)成(cheng)綁定工作。

使用knockoutjs來(lai)實現MVC中的MVVM模式(shi)

html代碼：

<table>
        <thead>
            <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>電話</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody data-bind="template:{name:'list',foreach: lines}">
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <button data-bind='click: addLine'>Add</button></td>
            </tr>
        </tfoot>
    </table>
    <script type="text/html" id="list">
        <tr>
            <td><span data-bind="text:Id"></span></td>
            <td>
                <span data-bind="text: Name"></span>

            </td>
            <td>
                <span data-bind="text: PhoneNo"></span>

            </td>
            <td>
                <a href='#' data-bind='click: $parent.removeLine'>Remove</a>
            </td>
        </tr>
    </script>

controller層C#代碼得到數據：

       public IEnumerable<Contact> Get()
        {
            Contact[] contacts = new Contact[]
            {
                new Contact{Id=1, Name="張三", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
                new Contact{Id=2, Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},
                new Contact{Id=3, Name="王五", PhoneNo="789", EmailAddress="wangwu@gmail.com"},
            };
            return contacts;
        }

 knockoutjs代(dai)碼用來綁定數(shu)據和實現(xian)頁(ye)面(mian)的交互

  <script type="text/javascript">
        var CartLine = function () {
            var self = this;
            self.Id = ko.observable();
            self.Name = ko.observable();
            self.PhoneNo = ko.observable(135);
            self.EmailAddress = ko.observable("@");
        };

        $.getJSON("//localhost:2166/api/values/", function (data) {
            var Cart = function () {
                // Stores an array of lines, and from these, can work out the grandTotal
                var self = this;
                //self.lines = ko.observableArray([new CartLine()]);
                self.lines = ko.observableArray(data);
                // Operations
                self.addLine = function () { self.lines.push(new CartLine()) };
                self.removeLine = function (line) { self.lines.remove(line) };
            }
            ko.applyBindings(new Cart());
        });

OK，到(dao)了這里(li)，一個MVVM風格的實例已經講解完(wan)了，下回我們將(jiang)逐(zhu)步來學習knockoutjs。

返回目錄