MVVM架构~mvc,mvp,mvvm大话开篇

简介:

百度百科的定义:

MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示。作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会从直接Model中读取数据而不是通过 Controller。

MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些 业务逻辑。 在MVC模型里,更关注的Model的不变,而同时有多个对Model的不同显示,及View。所以,在MVC模型里,Model不依赖于View,但是 View是依赖于Model的。不仅如此,因为有一些业务逻辑在View里实现了,导致要更改View也是比较困难的,至少那些业务逻辑是无法重用的。

MVVM在概念上是真正将页面与数据逻辑分离的模式,在开发方式上,它是真正将前台代码开发者(JS+HTML)与后台代码开发者分离的模式(asp,asp.net,php,jsp)。

MVP与传统MVC的区别,但目前我们提倡的MVC已经走向MVP了

在MVP里,Presenter完全把Model和View进行了分离,主要的程序逻辑在Presenter里实现。而且,Presenter与具体的 View是没有直接关联的,而是通过定义好的接口进行交互,从而使得在变更View时候可以保持Presenter的不变,即重用!

不仅如此,我们还可以编写测试用的View,模拟用户的各种操作,从而实现对Presenter的测试--而不需要使用自动化的测试工具。 我们甚至可以在Model和View都没有完成时候,就可以通过编写Mock Object(即实现了Model和View的接口,但没有具体的内容的)来测试Presenter的逻辑。

在MVP里,应用程序的逻辑主要在Presenter来实现,其中的View是很薄的一层。因此就有人提出了Presenter First的设计模式,就是根据User Story来首先设计和开发Presenter。在这个过程中,View是很简单的,能够把信息显示清楚就可以了。在后面,根据需要再随便更改View, 而对Presenter没有任何的影响了。 如果要实现的UI比较复杂,而且相关的显示逻辑还跟Model有关系,就可以在View和Presenter之间放置一个Adapter。由这个 Adapter来访问Model和View,避免两者之间的关联。而同时,因为Adapter实现了View的接口,从而可以保证与Presenter之 间接口的不变。这样就可以保证View和Presenter之间接口的简洁,又不失去UI的灵活性。 在MVP模式里,View只应该有简单的Set/Get的方法,用户输入和设置界面显示的内容,除此就不应该有更多的内容,绝不容许直接访问 Model--这就是与MVC很大的不同之处。

目前我们提倡的MVC已经与MVP没有太大区别,View依然是很薄的一层,不进行与Model的逻辑处理,只进行简单的页面显示的逻辑处理。

MVVM是Model-View-ViewModel的简写。

微软的WPF带来了新的技术体验,如Sliverlight、音频、视频、3D、动画……,这导致了软件UI 层更加细节化、可定制化。同时,在技术层面,WPF(原来winform那边的)也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM(Model-View- ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。 它立足于原有MVP框架并且把WPF的新特性揉合进去,以应对客户日益复杂的需求变化。

MVC中引入MVVM的意义

前端工程师们与程序开发人员们实现了真正的分离,当然,为了减少重复代码量,前端人员有必要了解一个数据库结构。

前端进行MVVM的JS插件,knockoutjs

Knockoutjs可以灵活的实现数据的绑定工作,对于前台开发人员来说,不需要关心后台数据以何种方式产生,它们只需要关心数据的属性签名即可,对于程序开发人员来说,它们关心的是数据产生的接口,包括简单的CURD操作接口,程序开发人员完成可以把这些逻辑写在单独的JS文件中,由HTML页面指定引用,真实数据即可完成绑定工作。

使用knockoutjs来实现MVC中的MVVM模式

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代码用来绑定数据和实现页面的交互

  <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("http://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,到了这里,一个MVVM风格的实例已经讲解完了,下回我们将逐步来学习knockoutjs。

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~mvc,mvp,mvvm大话开篇,如需转载请自行联系原博主。

目录
相关文章
|
20天前
|
设计模式 前端开发 数据库
哇塞!Rails 的 MVC 架构也太牛了吧!快来看看这令人惊叹的编程魔法,开启新世界大门!
【8月更文挑战第31天】《Rails中的MVC架构解析》介绍了Ruby on Rails框架核心的MVC设计模式,通过模型(Model)、视图(View)和控制器(Controller)三部分分离应用逻辑,利用Active Record进行数据库操作,ERB模板渲染视图,以及控制器处理用户请求与业务逻辑,使代码更易维护和扩展,提升团队开发效率。
37 0
|
17天前
|
设计模式 前端开发 数据库
理解mvc架构
mvc架构
13 4
|
29天前
|
设计模式 存储 前端开发
MVC革命:如何用一个设计模式重塑你的应用架构,让代码重构变得戏剧性地简单!
【8月更文挑战第22天】自定义MVC(Model-View-Controller)设计模式将应用分为模型、视图和控制器三个核心组件,实现关注点分离,提升代码可维护性和扩展性。模型管理数据和业务逻辑,视图负责数据显示与用户交互,控制器处理用户输入并协调模型与视图。通过示例代码展示了基本的MVC框架实现,可根据需求扩展定制。MVC模式灵活性强,支持单元测试与多人协作,但需注意避免控制器过度复杂化。
25 1
|
19天前
|
前端开发 开发者 C#
WPF开发者必读:MVVM模式实战,轻松实现现代桌面应用架构,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离应用程序的逻辑和界面,提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定和逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式,开发者可以构建更加高效和可扩展的桌面应用程序。
43 0
|
19天前
|
开发者 前端开发 Java
架构模式的诗与远方:如何在MVC的田野上,用Struts 2编织Web开发的新篇章
【8月更文挑战第31天】架构模式是软件开发的核心概念,MVC(Model-View-Controller)通过清晰的分层和职责分离,成为广泛采用的模式。随着业务需求的复杂化,Struts 2框架应运而生,继承MVC优点并引入更多功能。本文探讨从MVC到Struts 2的演进,强调架构模式的重要性。MVC将应用程序分为模型、视图和控制器三部分,提高模块化和可维护性。
31 0
|
19天前
|
存储 前端开发 数据库
神秘编程世界惊现强大架构!Web2py 的 MVC 究竟隐藏着怎样的神奇魔力?带你探索实际应用之谜!
【8月更文挑战第31天】在现代 Web 开发中,MVC(Model-View-Controller)架构被广泛应用,将应用程序分为模型、视图和控制器三个部分,有助于提高代码的可维护性、可扩展性和可测试性。Web2py 是一个采用 MVC 架构的 Python Web 框架,其中模型处理数据和业务逻辑,视图负责呈现数据给用户,控制器则协调模型和视图之间的交互。
23 0
|
2月前
|
存储 前端开发 算法
MVC(Model-View-Controller)架构
MVC架构帮助开发者构建清晰、可维护和可扩展的Web应用程序。
25 2
|
3月前
|
设计模式 前端开发 Java
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
39 1
|
3月前
|
JSON JavaScript 前端开发
技术经验分享:ExtJS4MVC架构讲解
技术经验分享:ExtJS4MVC架构讲解
19 0
|
3月前
|
设计模式 存储 前端开发
【设计模式】MVC与MVVM详尽解读与实战指南
【设计模式】MVC与MVVM详尽解读与实战指南
604 0