相信首次听说MVVM的人,内心都是充满疑惑的!这是个嘛???能干嘛???

MVVM是Model-View-ViewModel的简写。它本质上就是MVC (Model-View- Controller)的改进版。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。

总结:在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去,以应对客户日益复杂的需求变化。

对于第一次接触的人看了上面的解释之后,可能还是似懂非懂,那么让我们从基础的看起吧,刚才我们说过MVVM是它本质上就是MVC的改进版。那么MVC又是什么?它为什么需要改进呢?

MVC全名是Model View Controller,MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早,前端并不那么成熟,很多业务逻辑也是在后端实现,所以前端并没有真正意义上的MVC模式。而我们今天再次提起MVC,是因为大前端的来到,出现了MVVM模式的框架,我们需要了解一下MVVM这种设计模式是如何一步步演变过来的。

为什么会有MVVM框架?

在过去的10年中,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了各式各样的HTML 和CSS文件,但缺乏正规的组织形式,这也就是为什么越来越多的开发者使用javascript框架。比如:angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大,项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成,所以维护性和扩展性极差。综上两方面原因,才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定,极大了提高了开发效率。

(PS: 这里的MVP, MVVM甚至MXXX都只是MVC的变体而已,至于将重点放在C点还是V点(没人会希望放到M点吧?!)就自然引出了若干种所谓的模式,其实模式只有一种,你称为P也好VM也好,它都只是C的实例而已。总是设法弄出一些所谓的Business Word的家伙们,是前端开发最大的敌人!)

又经过上面对MVC和MVVM的介绍,大家应该对他们应该有比较清楚的认识了吧。

在大家理解MVVM的概念之后,为了让大家能更深入的理解MVVM,以便以后更好的运用,我们再说一些细节性的东西吧。

1. 双向绑定

号称是最难理解的地方,

标准的数据驱动开发,应该如上图所示,在一个View的生命周期内,一个ViewModule会管理一个DomainObject(业务模型),一个DO可能包括多个Module数据模型,一个Module可能来自多个数据源,而不是想很多所谓的MVVM框架那样强迫一个M来一个数据源

按照上图标准分层方式来划分的好处,在于,逻辑清晰,Module层粒度够细,可以被多次复用

DO层与VM层View层属于一一对应关系,方便对数据做增删改查的同步

每一层应该是独立的,非一定要使用MVVM框架的紧耦合,可以用自己使用不同的js插件或者模块实现MVVM

我们抛弃框架,单纯的看数据,其实我们要解决的问题很简单

a) 当DO对象属性放生变化时候,通知View更新

b) 当View上表单值放生变化时,通知DO更新,并异步通知队列同步到数据源

先来看问题a,这个最简单,DO是一个基本的Javascript Object,我们在View上的模板显示是这个Object.property,

改变一个Object对象的方式无非几种,一种是

a) 显示Object.property = ‘你好’

b) xxxx.methodName(Object, ‘property’,  ‘你好’)

c) xxxx.merge(Object, {‘property’:  ‘你好’})

如果是a的情况,ES5+,可以通过设置Object.defefineProperty(‘property’,{set: functiono(){},get:function(){}}),来做赋值和取值的监控触发

对于IE8一下,因为js不支持运算符重载,所以暂时没有好的办法,所以如果只考虑移动端的话,直接defineProperty就全部搞定,如果是要考虑PC的话,就不建议开发者使用直接赋值的方式,参考java的开发模式,也是推荐OOP时候,使用set方式赋值,而不是直接=赋值。

当然了,如果你非要兼容IE8一下的话,用定时器做轮训,配合for in 反射,通过脏数据与原始备份对比的方法也是一种办法,不过这种办法在当前页面非常耗性能,由于IE8一下不支持多线程,HTML5 worker,如果未来flash 插件支持多线程的话,倒是可以用js和flash插件做线程交互的方式做脏数据检测。

如果是b的情况,那就太简单了,在methodName里面触发对于该属性修改的回调即可,如何注册回调呢,首先我们要实现一个类似Dom Event的自定义对象的Event模型,然后通过类似Dom Event的注册事件方式,注册观察者,订阅事件,当执行了methodName时候,发送消息,通知所有订阅者执行回调

如果是c的情况,类似b一样处理

这样一看,双向数据绑定的问题就非常简单的解决了。

我们再来看另外一个MVVM的问题,非简单数据模型,复合数据模型(DO的属性值不是一个string,而是一个Object,且这个Object可能还嵌套多层Obejct的时候)的处理办法,这个一般的MVVM框架直接不考虑,或者通过长字段名的方式绕过这个问题

这个问题是这样的,早在10几年前,java structs框架流行的时候就出现了,当一个表单,出现需要对两个Java Bean做update操作时候,一个bean是user,一个bean是成绩

对应的表单字段名,就是 user表.name,user表.id,score表.point,

在struct2里面,处理逻辑是把 “点”作为特殊符号,在做form序列化时候,非包含点的字段的值都是string,包含点的字段是一个Object,比如刚才的form序列化之后结果就是 { user: {id :’’ , name: ‘’}, score: {id: ‘’, point: ‘’}}

同理在MVVM实现时,也是一样,认为点是分割对象的关键字,这样我们就可以实现把多个对象嵌套到View模板里面,实现复合Object的双向映射。

最后再给大家介绍几种常用的前端MVVM开发框架:Angular.js,react,vue。 (他们的区别我就不一一来说来,详情可见 https://www.cnblogs.com/wdtzms/p/6557894.html。)
angular  谷歌
它的版本更新特别快,每次更新后,写法都会有很多变化。现在国内依然还有很多公司在使用angular.js 1.X的版本。
react  facebook
是一个单项数据流的针对view层的框架,主要是做视图渲染。代码写法相对简洁。
vue 个人
vue是一个mvvm的框架,是现阶段国内使用范围最广的一个,用这个框架一般比较轻松。纯中文文档,纯中文社区,纯中文交流,相关资源很好找。
 

关于MVVM就为大家介绍这么多,希望对你有帮助。

走之前别忘了赞加关注哟!

 
 
 
 

由浅入深讲述MVVM的更多相关文章

  1. 搞懂:MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

    搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...

  2. WPF新手快速入门系列 3.MVVM

    [概要] 这一章主要讲述,讲述MVVM模式和用法. 如有学习过程中想交流学习.疑惑解答可以来此QQ群交流:580749909.(所有涉及到的源码都上传到了群文件里) 希望加群的人提问时尽量想清楚自己的 ...

  3. 由浅入深的讲述Get和Post的区别

    对于网上对get和post区别的长篇大论,我只想说一些干货其中最重要的是:GET和POST本质上两者没有任何区别.他们都是HTTP协议中的请求方法.底层实现都是基于TCP/IP协议.所谓区别,只是浏览 ...

  4. 说不尽的MVVM(4) – 发号施令的Command

    知识预备 阅读本文,我假定你具备以下知识: C# WPF基础知识 知道WPF的命令 WPF相对WinForm加了一种Command的机制,对用户的操作进行更加灵活的处理,相信很多朋友知道并用过Rout ...

  5. 说不尽的MVVM(2) – MVVM初体验

    知识预备 阅读本文,我假定你已经具备以下知识: C#.WPF基础知识 了解Lambda表达式和TPL 对事件驱动模型的了解 知道ICommand接口 发生了什么 某程序员接到一个需求,编写一个媒体渲染 ...

  6. 项目经验之:MVVM初学者图形化笔记整理。。。

    这个模式,一下子把我的思路给打开..让我眼前一亮..居然可以这样将界面分离得如此彻底........... 大家一起学习... 说说我的感受吧,一个小实例讲述了 MVVM实现原理: 一个简单的例,将两 ...

  7. MVVM in Depth

    这篇文章开始粗略的介绍了软件开发中松耦合的概念并讲述了使用MVC.MVP和MVVM三种模式达到松耦合.然后分析了这三种模式适用范围,其中: MVC(Model-View-Controller)适用于w ...

  8. 探索从 MVC 到 MVVM + Flux 架构模式的转变

    本文首发于 my blog 在业务中一般 MVVM 框架一般都会配合上数据状态库(redux, mobx 等)一起使用,本文会通过一个小 demo 来讲述为什么会引人数据状态库. 从 MVC 到 MV ...

  9. 简简单单的Vue1(MVVM与Vue的双向绑定原理)

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 Vue 在此之前的文章我们讲述了前端开发的工具,语言的知识,接下来我们从头开始学习一个 ...

随机推荐

  1. spring(一)--spring/springmvc/spring+hibernate(mybatis)配置文件

    这篇文章用来总结一下spring,springmvc,spring+mybatis,spring+hibernate的配置文件 1.web.xml 要使用spring,必须在web.xml中定义分发器 ...

  2. Angular 6的新特性介绍

    2018年5月4日,Angular6.0.0版正式发布,新版本主要关注底层框架和工具链,目的在于使其变得更小更快.下面就介绍下新版本的一些主要新特性,供大家参考. ng update ng updat ...

  3. Firefox Profile (2)

    一些关于selenium copy Firefox profile to a temp directory的讨论 https://stackoverflow.com/questions/6787095 ...

  4. 时间戳转换成时间js(年-月-日,例如“2017-04-22”)

    function GetDateByShiJianChuo(timespan) { var date = new Date(parseInt(timespan.replace("/Date( ...

  5. admin-handlers.go

    package],,) ],,) ],,) ],,) ],,) ])     if err == redis.Nil {         http.NotFound(w, r)     } else ...

  6. POJ_2653_Pick-up sticks_判断线段相交

    POJ_2653_Pick-up sticks_判断线段相交 Description Stan has n sticks of various length. He throws them one a ...

  7. sublime text3简体中文版汉化教程

    今天突然想到好像还有一个强大的编译器sublime text 3可是这个是外国的编译器,不过各位不用担心 这个编译器,已经支持中文编译了: 下面就是我关于汉化为中文方面的一些了解以及汉化方式(由于我的 ...

  8. 安卓开发笔记(二十六):Splash实现首页快速开屏功能

    我们在进行安卓开发的时候,首页开有两种方式,一种是利用handler将一个活动进行延时,时间到达之后软件则会跳转到第二个活动当中.而另一种方法则是更加常用的方法,利用splash实现首页的快速开屏,这 ...

  9. formidable处理node.js的post请求

    前言 我们都知道在node.js中,我们最常用的请求方式是get和post.其中get请求和URL相关,通过解析URL我们可以直接获取到请求的参数.但是post请求不同,post请求是包含在请求体中, ...

  10. Java8新特性之二:方法引用

    上一节介绍了Java8新特性中的Lambda表达式,本小节继续讲解Java8的新特性之二:方法引用.方法引用其实也离不开Lambda表达式. 1.方法引用的使用场景 我们用Lambda表达式来实现匿名 ...