[转]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大话开篇
[转]MVVM架构~mvc,mvp,mvvm大话开篇的更多相关文章
- MVVM架构~mvc,mvp,mvvm大话开篇
返回目录 百度百科的定义: MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示.作为一种新 ...
- 架构 MVC MVP MVVM 简介 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- Android App的设计架构:MVC,MVP,MVVM与架构经验谈
相关:http://www.cnblogs.com/wytiger/p/5996876.html 和MVC框架模式一样,Model模型处理数据代码不变在Android的App开发中,很多人经常会头疼于 ...
- 前端mvc mvp mvvm 架构介绍(vue重构项目一)
首先 我们为什么重构这个项目 1:我们现有的技术是前后台不分离,页面上采用esayUI+jq构成的单页面,每个所谓的单页面都是从后台胜场的唯一Id 与前端绑定,即使你找到了那个页面元素,也找不到所在的 ...
- Android App的设计架构:MVC,MVP,MVVM与架构AAAAA
1. 架构设计的目的1.1 通过设计使程序模块化,做到模块内部的高聚合和模块之间的低耦合.1.2 这样做的好处是使得程序在开发的过程中,开发人员只需要专注于一点,提高程序开发的效率,并且更容易进行后续 ...
- MVC, MVP, MVVM比较以及区别(上)
MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...
- android MVC && MVP && MVVM分析和对比
相关:http://www.cnblogs.com/wytiger/p/5305087.html 出处http://blog.csdn.net/self_study,对技术感兴趣的同鞋加群544645 ...
- MVC, MVP, MVVM比较以及区别
MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...
- 浅谈Android架构之MVP,MVVM
概述 MVP(Model-View-Presenter)是传统MVC(Model-View-Controller)在Android开发上的一种变种.进化模式.主要用来隔离UI.UI逻辑和业务逻辑.数据 ...
随机推荐
- mysql数据同步
随着各行业信息化水平的不断提升,各种各样的信息管理系统都被广泛使用,各系统间数据完全独立,形成了大量的信息孤岛.出于管理及决策方面的需求,实现各平台的数据同步是一个很迫切的需求,TreeSoft数据库 ...
- Java设计模式—备忘录模式
个人感觉备忘录模式是一个比较难的设计模式,备忘录模式就是一个对象的备份模式,提供了一种程序数据的备份方法. 定义如下:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以 ...
- Install Python on Mac
1. 从官网下载最新版Python 3.X 后安装:由于Mac OS X EI Capitan中默认已经集成了 Python 2.7,因此需要在Terminal中输入 Python3 来检测是否安装成 ...
- OllyDbg的基本使用
注:内容整理自<逆向工程核心原理>,结合我的OllyDbg版本修改了一些内容 1. OllyDbg常用命令及其快捷键 指令 快捷键 含义 Restart Ctrl+F2 重新开始调试 St ...
- *.vue文件的template标签内使用form标签
由于form表单有重复提交的问题,所以在vue文件内直接使用form标签时需要注意这个问题,否则会导致页面重复刷新跳转不成功的问题 解决方案: <form @submit.prevent> ...
- Qt初学——我的第一个UI
第一次打开Qt的时候,我是一脸懵逼的.没学过c++,里面的程序都看不懂.按照套路,我开始看教程,上手实践.连着搞了3天之后,我开始渐渐明白怎么写UI. 我现在的理解是:UI = 界面设计 + 信号槽响 ...
- js重名的处理
### 关于重名的处理 > 在变量提升阶段,如果名字重复了,不会重新的进行声明,但是会重新的进行定义(后面赋的值会把前面赋的值给替换掉) ```javascript //=>变量提升:fn ...
- 关闭TCP中135、139、445、593、1025 等端口的操作方法 (转)(记录下)
操作要领:封闭端口,杜绝网络病毒对这些端口的访问权,以保障计算机安全,减少病毒对上网速度的影响. 近日发现有些人感染了新的网络蠕虫病毒,该病毒使用冲击波病毒专杀工具无法杀除,请各位尽快升级计算机上的杀 ...
- Windows ->> Windows下安装MSI程序遇到2503和2502错误
三个步骤可以解决这个问题: 1) 以管理员身份开启命令行模式并键入msiexec /package <msi文件路径> 2) 修改组策略 计算机配置 ->> 管理模板 -> ...
- Connection to linux server with ORACLE SQL DEVELOPER
1.Link name is random 2.username and password is database account 3.host name is ip address ifconf ...