MVVM模式的理解

MVVM模式的理解

MVVM全称Model-View-ViewModel是基于MVCMVP体系结构模式的改进,MVVM就是MVC模式中的View的状态和行为抽象化,将视图UI和业务逻辑分开,更清楚地将用户界面UI的开发与应用程序中业务逻辑和行为的开发区分开来。

自己的理解

数据改变只发生在以下两种情况:

  • View层先改变,体现在用户手动改变网页中的元素,可以通过监听HTML事件来改变数据层
  • Model层先改变,体现在按照业务需求改变Js中的数据(例如Ajax向后台通信拿到新的数据),可以通过Object.defineProperty来劫持数据的变化,监听者察觉到数据变化后把变化通知给发布者,再由发布者去更新网页中的数据,然后再释放变化。

因此,我们的简单实现需要以下几个模块:

  1. observer,负责监听js中数据的变化,其实就是监听Vue.$data中的数据,如果发现数据变化通知发布者改变网页内容。
  2. watcher,负责发布页面变化。
  3. compiler,这是个隐藏的,虽然上面没有提到他,但它可以说是很重要的一环,它负责连接Model和View,它是一个模板解析器,负责处理拥有Vue特性的HTML元素,它把每一个需要特殊处理的HTMLElement元素都记录了下来,并保存为watcher,比如拥有v-modelinput组件,v-on:click的按钮,v-bindp标签。当发布者watcher要去更新视图的时候,直接调用自身的upload函数即可。

描述

MVVM模式简化了界面与业务的依赖,有助于将图形用户界面的开发与业务逻辑或数据模型的开发分离开来。在MVVM中的ViewModel作为绑定器将视图层UI与数据层Model链接起来,在Model更新时,ViewModel通过绑定器将数据更新到View,在View触发指令时,会通过ViewModel传递消息到ModelViewModel像是一个黑盒,在开发过程中只需要关注于呈现UI的视图层以及抽象模型的数据层Model,而不需要过多关注ViewModel是如何传递的数据以及消息。

组成

Model

  • 以面向对象来对对事物进行抽象的结果,是代表真实状态内容的领域模型。
  • 也可以将Model称为数据层,其作为数据中心仅关注数据本身,不关注任何行为。

View

  • View是用户在屏幕上看到的结构、布局和外观,即视图UI
  • Model进行更新的时候,ViewModel会通过数据绑定更新到View

ViewModel

  • ViewModel是暴露公共属性和命令的视图的抽象。
  • ViewModel中的绑定器在视图和数据绑定器之间进行通信。
  • Model更新时,ViewModel通过绑定器将数据更新到View,在View触发指令时,会通过ViewModel传递消息到Model

优点

  • 低耦合: 视图View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  • 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
  • 独立开发: 开发人员可以专注于业务逻辑和数据的开发Model,设计人员可以专注于页面设计。
  • 可测试: 界面素来是比较难于测试的,测试行为可以通过ViewModel来进行。

不足

  • 对于过大的项目,数据绑定需要花费更多的内存。
  • 数据绑定使得Bug较难被调试,当界面异常,可能是View的代码有问题,也可能是Model的代码有问题,数据绑定使得一个位置的Bug可能被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。

实例                

未完成。。。。。。。。

 
posted @ 2021-01-04 20:42  花开荼蘼Ⅴ彼岸未归  阅读(208)  评论(0编辑  收藏  举报