前端框架MVVM是什么（整理）

时间 2019-12-17

标签前端框架 mvvm 什么整理繁體版

原文原文链接

前端框架MVVM是什么（整理）

1、总结

一句话总结：vm层（视图模型层）经过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。

一、我大前端应该不该该作复杂的数据处理的工做？

不该该

只要后端保证对外接口足够简单就好了，我请求api，你把数据返出来，咱俩就这点关系，其余都扯淡。html

后端：咱们这里的业务逻辑和数据处理会很是复杂！
前端：关我屁事！前端

后端业务处理再复杂跟咱们前端也没有半毛钱关系，只要后端保证对外接口足够简单就好了，我请求api，你把数据返出来，咱俩就这点关系，其余都扯淡。vue

因此我这边开发也是一样的，前端就负责请求api就好，别的都不须要。java

二、mvc和mvvm的关系？

改进版

数据分离

视图模型层

c（控制层）被换成了vm（viewmodel）层web

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。ajax

mvvm层实现了先后端更好的分离（前端须要的数据只须要请求后端的接口便可）数据库

三、MVVM框架编码实例？

扯了这么多，并无什么卵用。千言万语不如一个栗子来的干脆，下面用一个 Vue 实例来讲明 MVVM 的具体表现。编程

Vue 的 View 模板：json

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

Vue 的 ViewModel 层（下面是伪代码）：后端

var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为（彻底前端定义）
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;

        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理，作二次封装
                vm.server = res;
            }
        });
    }
})

服务端的 Model 层（省略业务逻辑处理，只描述对外接口）：

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

这就是完整的 MVVM 编程模式。

四、前端框架MVVM出现的最大意义是什么？

开发效率

先后端业务逻辑分离

接口

MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提升了前端开发效率。

MVVM用接口实现了先后端数据的通讯，这样可使先后端之间的业务逻辑没有什么关系。

MVVM在感受上要比mvc模式先后端要分的更开

五、应用MVVM框架的vue.js框架的最主要做用是什么？

双向数据绑定

前端數據的統一

前端數據的統一：前端应用相同数据的位置实现了数据的统一
双向数据绑定：綁定后vue好dom數據保持統一，一動全動，是前端的

双向数据绑定中的两向分别为 view和viewmodel。

六、前端框架MVVM中的vm层是干吗的？

状态行为

DOM操做

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，作二次封装，以生成符合 View 层使用预期的视图数据模型。须要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，好比页面的这一块展现什么，那一块展现什么这些都属于视图状态（展现），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 能够完整地去描述 View 层。因为实现了双向绑定，ViewModel 的内容会实时展示在 View 层，这是激动人心的，由于前端开发者不再必低效又麻烦地经过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块作好了，咱们开发者只须要处理和维护 ViewModel，更新数据视图就会自动获得相应更新，真正实现数据驱动开发。看到了吧，View 层展示的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就彻底解耦了 View 层和 Model 层，这个解耦是相当重要的，它是先后端分离方案实施的重要一环。

View通常就是咱们日常说的HTML文本的Js模板，里面能够嵌入一些js模板的代码，好比Mustache，好比jstl相似的模板伪代码

ViewModule层里面就是咱们对于这个视图区域的一切js可视业务逻辑，举个例子，好比图片走马灯特效，好比表单按钮点击提交，这些自定义事件的注册和处理逻辑都写在ViewModule里面了

Module就更简单了，就是对于纯数据的处理，好比增删改查，与后台CGI作交互

七、MVVM最主要的特征是什么？

先后端分离

先后端分手大师——MVVM 模式

或者说先后端更好的分离（接口来实现先后端的通讯）

2、MVVM百度百科

MVVM是 Model-View-ViewModel的简写。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化，让咱们将视图 UI 和业务逻辑分开。固然这些事 ViewModel 已经帮咱们作了，它能够取出 Model 的数据同时帮忙处理 View 中因为须要展现内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、 3D、动画……，这致使了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。 MVVM（Model-View-ViewModel）框架的由来即是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架而且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

外文名: Model-View-ViewModel
简称: MVVM

例如: Silverlight、音频
隶属: 微软
MVVM优势: 低耦合可重用性

3、先后端分手大师——MVVM 模式（转）

转自：先后端分手大师——MVVM 模式 - DOM哥 - 博客园
https://www.cnblogs.com/iovec/p/7840228.html

简而言之

以前对 MVVM 模式一直只是模模糊糊的认识，正所谓没有实践就没有发言权，经过这两年对 Vue 框架的深刻学习和项目实践，终于~~能够装B了~~有了拨开云雾见月明的感受。

Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（一样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表。

MVVM 源自于经典的 Model–View–Controller（MVC）模式（期间还演化出了 Model-View-Presenter（MVP）模式，可忽略不计）。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提升了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层经过接口请求进行数据交互，起呈上启下做用。以下图所示：

MVVM模式

MVVM 已经至关成熟了，主要运用但不只仅在网络应用程序开发中。KnockoutJS 是最先实现 MVVM 模式的前端框架之一，当下流行的 MVVM 框架有 Vue，Angular 等。

组成部分

简单画了一张图来讲明 MVVM 的各个组成部分：

MVVM分层示意图

分层设计一直是软件架构的主流设计思想之一，MVVM 也不例外。

# View 层

View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展示 ViewModel 或者 Model 层的数据，已经产生了各类各样的先后端模板语言，好比 FreeMarker、Marko、Pug、Jinja2等等，各大 MVVM 框架如 KnockoutJS，Vue，Angular 等也都有本身用来构建用户界面的内置模板语言。

# Model 层

Model 是指数据模型，泛指后端进行的各类业务逻辑处理和数据操控，主要围绕数据库系统展开。后端的处理一般会很是复杂：

先后端对比

后端：咱们这里的业务逻辑和数据处理会很是复杂！
前端：关我屁事！

后端业务处理再复杂跟咱们前端也没有半毛钱关系，只要后端保证对外接口足够简单就好了，我请求api，你把数据返出来，咱俩就这点关系，其余都扯淡。

# ViewModel 层

没有什么是一个栗子不能解决的

扯了这么多，并无什么卵用。千言万语不如一个栗子来的干脆，下面用一个 Vue 实例来讲明 MVVM 的具体表现。

Vue 的 View 模板：

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

Vue 的 ViewModel 层（下面是伪代码）：

var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为（彻底前端定义）
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;

        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理，作二次封装
                vm.server = res;
            }
        });
    }
})

服务端的 Model 层（省略业务逻辑处理，只描述对外接口）：

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

这就是完整的 MVVM 编程模式。

代码执行以后双向绑定的效果以下:

Vue实现的响应的数据绑定

嘿嘿，先后端能够成功分手了，之后不再用关心后端个锤子开发进度\暴怒脸，复杂实现，blabla...，尽情享用前端如丝般顺滑的开发快感吧:)

4、不要听吹牛逼什么前端MVVM框架就是好，其实都是一帮没学好分层设计的搞出来的，让你完全看清前端MVVM的本质（转）

转自：不要听吹牛逼什么前端MVVM框架就是好，其实都是一帮没学好分层设计的搞出来的，让你完全看清前端MVVM的本质 - 薛端阳 - 博客园
https://www.cnblogs.com/xueduanyang/p/3601471.html

最近前端圈子里面，发现你们都在热炒概念，什么knockout，angularJs，都被捧成神了，鄙人不才，最近心情也很差，特意写这篇文章来找骂

写代码的码农都知道，Java社区虽然不是一个提出分层思想的，确实贯彻的最好的，现在是个Java开发都不会不知道SSH的开发模式，从MVC到MVVM的概念的热炒，其实真没什么技术进步

（若是你以为本文言辞激烈，过于愤世嫉俗，实在看不下去，欢迎移步另外一位园友的分层进化史科普文章http://www.cnblogs.com/indream/p/3602348.html）

先看什么是MVVM

View通常就是咱们日常说的HTML文本的Js模板，里面能够嵌入一些js模板的代码，好比Mustache，好比jstl相似的模板伪代码

Module就更简单了，就是对于纯数据的处理，好比增删改查，与后台CGI作交互

那么什么是MVVM框架呢？？通常他们都是这么作的

1. 定义一串所谓的伪模板代码，例如经过className标注，或者自定义tag的方式，将一段html文本区域给标注声明起来，意思就是喊一嗓子，“喂，兄弟们，这块地方我占了，要拉屎去别处拉去”

2. 经过相似jstl之类lamda表达式，来作js模板，“拜托伙计，天堂有路你不走，非要本身搞一套，你就不能暴露接口让你们用本身的模板语言，好比Mustache或者jtpl吗？”

3. 很傻比的封装一串本身的所谓数据模块组件，与不一样类型的数据源作数据传输和适配，通常都不会分层很清晰，加入后台数据字段改了，写框架的都没脑子的，历来不作数据字段的自定义适配（举个例子，原来后台传递的字段是person.userName，如今改为了小写，person.username，你就傻逼的去吧模板再改一下吧，其实要解决这个问题，很是简单，在MVVM层中引入一层DO，领域对象层，Module到DO之间还有一层转换就能够搞定这个问题）

4. 非不暴露本身的自定义事件模型，就是那个观察者模式啦，本身乱七八招在页面上绑定一堆form change之类的事件，以实现View与Module的单向绑定

5. 所谓的双向绑定，也就是OOP语言中早被烂透了的getter，setter模型，ES5+能够用defineProperty，低版本就须要本身在js object赋值的时间作写死代码方式的处理了

咱们再来看细节

1. 双向绑定

号称是最难理解的地方，实际上是框架的做者根本就没理解Java社区对于软件开发分层理解的精髓

标准的数据驱动开发，应该如上图所示，在一个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编程里面必需要面对的问题，就是自定义事件的广播和冒泡，我看过大多数的MVVM框架，对于广播，这块有部分实现了，可是对于冒泡一个都没实现

其实这个真的不是很复杂的问题，事件广播，这个最简单，三岁小孩都能写，咱们在注册回调时候，不是有一个事件队列吗，在回调时候，经过特殊标记位，控制是否继续扩散广播，仍是执行完毕终止便可

而自定义事件的冒泡要骚骚复杂一些，他是因为OOP编程里面的继承和包含关系引伸而来的，咱们先说包含关系，前面说了MVVM框架里面，都会声明一块地方为VM控制区域，通常垃圾的框架都不会考虑，VM嵌套的状况，由于图简单吗

可是实际开发过程当中，你会遇到不少这种状况，就是VM复用的问题，通常都是发现使用了MVVM框架以后，发现VM定义的太大，无法复用，若是要复用VM就又发现VM定义的过小，出现须要VM嵌套的状况无法用

其实简单，咱们知道DOM事件是有冒泡的，VM同理，只要在自定义事件模型里面定义了VM的父子关系，或者同级关联关系，便可实现VM的自定义事件的广播和冒泡，另外也解决了VM复用的问题，可让代码颗粒度更小

另外那种，声明式编程这种老掉牙的概念就真的别在吵了，还记得10几年前的structs的tag吗，js圈子里面这种经过自定义tag，自定义className，自定义属性，挂载js来自定识别执行逻辑的例子大把皆是，仍是建议广大前端开发，不要浮躁，多像java社区学习，多多从根本上了解分层理念的精髓，不要听了吹牛逼，听风就是雨，仍是多了解原理才是真理啊

最近心情很很差，股票大跌，公司的事情你懂的，写这篇文档纯属没事找事，欢迎广大道友开骂，来陪我大战三百回合

5、MVVM核心概念（转）

转自：MVVM核心概念 - iammackong - 博客园
https://www.cnblogs.com/iammackong/articles/3312565.html

MVVM模式是Model、View、ViewModel的简称，最先出如今WPF，如今Silverlight中也使用该模式，MVVM模式是对MVC模式的变种。哪儿变了？我认为MVVM和MVC的主要变化在于MVVM更适合于XAML。

MVVM模式和MVC模式同样，主要目的是分离视图（View）和模型（Model），有几大好处

1. 低耦合。视图（View）能够独立于Model变化和修改，一个ViewModel能够绑定到不一样的"View"上，当View变化的时候Model不能够不变，当Model变化的时候View也能够不变。

2. 可重用性。你能够把一些视图逻辑放在一个ViewModel里面，让不少view重用这段视图逻辑。

3. 独立开发。开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计，使用Expression Blend能够很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的，而如今测试能够针对ViewModel来写。

若是用Interface接口来表达，基本就是这么个意思：

1 public interface IView
2 {
3 IViewModel ViewModel { get ; set ; }
4 }
5
6 public interface IViewModel
7 {
8 IModel Model { get ; set ; }
9
10 /// <summary>
11 /// a property that states the controller is busy doing something (like fetching data from a service),
12 /// usually the iterface should be blocked
13 /// </summary>
14 bool IsBusy { get ; }
15 }

MVVM的Model、View、ViewModel分工

1. View

负责界面和显示，界面构成元素有window, controls, page, dataTemplete, custom controls….
代码一般有XAML和XAML.CS组成，但后台代码应该不多
经过DataContext和ViewModel绑定
不直接和Model交互！
控件能够和ViewModel的公共属性绑定，update须要双向绑定
控件能够触发Behavior/Command调用ViewModel的方法，Command是View到ViewModel的单向通信 (View中触发事件，ViewModel中处理事件)

2. ViewModel

主要包括界面逻辑和模型数据封装，Behavior/Command事件响应，绑定的属性定义等
ViewModel继承Model类，或者是Model的继承类
是view和model的桥梁，是对Model的抽象，例如，model中数据格式是“年月日”，能够在viewModel中转换model中的数据为“日月年”以供视图（view）显示。
维护视图状态
实现属性或集合的change notification

3. Model

数据和业务逻辑
客户端领域模型
由data entities, business objects, repositories and services构成
能够实现属性或集合的change notification
能够实现validation 接口例如 IDataErrorInfo

View和ViewModel主要经过数据绑定和Command/Behavior进行交互，以下图所示：

一个例子而且附代码下载(Command未示例)

有关Model（模型）和DTO的问题

前面说的Model是客户端的，但实际上Domail Model存在服务器端（靠近数据库）和那就须要和客户端搞映射DTO（Data Transfer Ojbect，数据传输对象，带序列化标记，用来远程调用）。在Silverlight中有个很方便的东西来实现这个DTO过程和序列化，那就是WCF RIA Service和DomainService。若是你建立一个简单的Silverlight应用而且调用WCF RIA Service，基本上会生成DTO Model: ObjectContext(EntityObject)。（也有人喜欢在Model里面调用RiaSerivce实现load，save等等，我的认为不太合适，能够参考这篇文章），此外，参考这篇文章：《WCF RIA Services and a guide to use DTO/”Presentation Model”》

代码例：

public partial class MyModelsEntities : ObjectContext
{

…

}

[EdmEntityTypeAttribute(NamespaceName = " MyModels " , Name = " MyEntity " )]
[Serializable()]
[DataContractAttribute(IsReference = true )]
public partial class MyEntity: EntityObject
{

…

}

MVVM的实践要点

1. View分离要完全，不要有坏味道

视图（view）部分，xaml.cs 应该只有不多的代码或没有代码，若是你的xaml.cs包含大量的代码，那么极可能你MVVM用的不对头，须要检查其中代码的坏味道。Xaml和xaml.cs 只能包含处理界面、视图、显示样式、视图元素之间的交互、视图元素动画，等等的内容。

2. ViewModel要可测试

从重构的观点看，若是你的代码中ViewModel是可测试的，有详细的单元测试Unit Test，你的代码是OK的，不然须要检查其中的坏味道。

更多MVVM的内容且看下回分解。（附：本例子且附代码下载(Command未示例)，channel9有一个MVVM的视频很好，PPT和视频演示的源码）

前端框架MVVM是什么（整理）

前端框架MVVM是什么（整理）

1、总结

一句话总结：vm层（视图模型层）经过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。

一、我大前端应该不该该作复杂的数据处理的工做？

不该该

二、mvc和mvvm的关系？

改进版

数据分离

视图模型层

三、MVVM框架编码实例？

四、前端框架MVVM出现的最大意义是什么？

开发效率

先后端 业务逻辑 分离

接口

五、应用MVVM框架的vue.js框架的最主要做用是什么？

双向数据绑定

前端數據的統一

六、前端框架MVVM中的vm层是干吗的？

状态 行为

DOM操做

七、MVVM最主要的特征是什么？

先后端分离

2、MVVM百度百科

3、先后端分手大师——MVVM 模式（转）

简而言之

组成部分

# View 层

# Model 层

# ViewModel 层

没有什么是一个栗子不能解决的

4、不要听吹牛逼什么前端MVVM框架就是好，其实都是一帮没学好分层设计的搞出来的，让你完全看清前端MVVM的本质（转）

5、MVVM核心概念（转）

MVVM模式和MVC模式同样，主要目的是分离视图（View）和模型（Model），有几大好处

MVVM的Model、View、ViewModel分工

有关Model（模型）和DTO的问题

MVVM的实践要点

先后端业务逻辑分离

状态行为