MVVM模式

  MVVM是一模一样栽前端框架模式,框架模式主要是为此来保管和团队代码,在复杂应用被,利用高内聚低耦合的思索,将代码分离组织到不同部分,每有都产生夫关注点和天职,各部分间耦合度低,达到“关注点分离”目的,使整个应用更易管理、维护,每个有可单独更新、替换以及复用,从而达成任何应用之模块化。

一、概念

  MVVM是公认的模式,要点是双向绑定技术及ViewModel,双向绑定更有利于而还要保障页面及且负让某某字段的N个区域,而不用手动更新她;而ViewModel用来粘合View和Model,让它更是分离和解耦,其利害攸关由以下几有的构成:

    View
:显示数据和受用户操作,与ViewModel中之多少,双向绑定,触发ViewModel中的波,纯净的html代码,不夹杂或引用JS代码。

  Model :
领域对象,提供工作数据及对数据的逻辑处理,其在实际上开支被,可能是发源多只接口的Dto对象,毕竟数据库结构对象不克向外暴露。

  ViewModel :View和Model的连接器,让Model更加适合吃View,ViewModel把Model的多少因View所需的格式进一步转化,使View可以直接绑定,如将来自多个接口的DTO对象,进一步加工变成ViewModel数据,其得以一直双向绑定到View,是真正用页面和数码逻辑分离的模式。UI层也生逻辑,这些逻辑都位于ViewModel中,所以MVVM是吗是富客户端的模式。另外,View中元素的波绑定到ViewModel中定义的办法。

  总之,Model获取到原始数据,ViewModel进一步
加工,View直接显示,另外其中的大网操作可以分离及独门的接近或劳务中,ViewModel的道响应View中事件,调用网络操作Model。

二、优点

  低耦合:View可以独自为Model变化和改动,同一个ViewModel可以给多独View复用,可以完成View和Model变化互不影响。

  可选用:可以把有些视图逻辑在ViewModel中,让多只View复用。

  独立开发:开发人员可以小心让事情逻辑和数量开发(ViewModel),界面设计人员可以小心于View的筹划。

  可测试性:清晰的View分层,使得表现层的事务逻辑测试再次简约与容易。

三、与MVC比较

  1、MVC的View与事务逻辑关系紧密,直接访问Model,View包含Model,MVVM的View与Model松耦合,数据直接打ViewModel中得到绑定。

  2、MVC操作流程

    用户操作 ->
View(负责接用户之输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果报告让View)

    图片 1

 

  3、MVVM操作流程

    用户操作 ->
View(负责接收用户的输入操作)->ViewModel(绑定数据与绑定方法自动执行)->Model(数据更新或持久化)->ViewModel(从落更新后进一步加工数据)->View(双向绑定ViewModel数据)

    图片 2

 

四、AngularJS与MVVM

  View :专注让界面的亮与渲染,即含一积聚声明式Directive(指令)的视图模板。

  Model :领域对象,与作业逻辑相关的数的包装载体,不分包其他和界面显示相关的逻辑,Model不关注自己会吃什么展示或操作,大部分Model都是发源于WebApi接口返回的多寡还是全局配置对象,AngularJS中之Service正是封装和处理这些和Model相关的事情逻辑的超级办法,这些世界对象足以于Controller或外Service复用。

  ViewModel :让View和Model进一步分离及解耦,负责View和Model的相与合作,它负责为View提供显示数据,以及供View操作Model的门路,AngularJS中$scope充当了ViewModel角色,$scope可以增长数据和交互行为函数,数据来自分点儿种,一栽是见信息的事情数据,直接从Model中获得,另一样种是叙交互的派生数据,如有保存按钮在编写模式下才显,可以定义一个$scoe.isEdit来决定保存按钮显示隐藏,开始是false,点编辑按钮后安装也true,View中保留按钮用ng-show=’isEdit’绑定该多少来显示。

  Controller :不是MVVM中之主干元素,但是当AngularJS中之所以来负责ViewModel即$scope的初始化,调用一个要么多单Model相关的Serive来抱领域对象,还可绑定上View中的互动事件,如ng-click事件,事件相应措施被调用Model相关Serive来操作Model。

足见View不能够跟Model直接互动,而是经过$scope这个ViewModel来促成同Model交互的。

五、KnockoutJS与MVVM

  通过一个函数来创造表示ViewModel的近乎,需要绑定的多寡及函数将作该类的成员。

  ViewModel:

  图片 3

  View:

  图片 4

 

相关文章