MVVM 是 Model-View-ViewModel缩写简称。
一、用JavaScript在浏览器中操作HTML,经历了若干发展阶段:
- 第一阶段,直接用JavaScript操作DOM节点,使用浏览器提供的原生API:
var dom = document.getElementById('name');
dom.innerHTML = 'Homer';
dom.style.color = 'red';复制代码
- 第二阶段,由于原生API不好用,还要考虑浏览器兼容性,jQuery横空出世,以简洁的API迅速俘获了前端开发者的芳心:
$('#name').text('Homer').css('color', 'red');
复制代码
- 第三阶段,MVC模式,需要服务器端配合,JavaScript可以在前端修改服务器渲染后的数据。
二、进化为MVVM:
MVVM的设计思想:关注Model的变化,让MVVM框架去自动更新DOM的状态,从而把开发者从操作DOM的繁琐步骤中解脱出来!
- DOM 基本概念:
DOM1级:主要是映射文档的结构
DOM2级:DOM试图、DOM事件、DOM样式、DOM遍历和范围
DOM3级:进一步扩展DOM,引入以统一方式加载和保存文档的方法;新增验证文档的方法;对DOM核心扩展
1、单向绑定:
2、双向绑定:
3、同步DOM结构
三、优势:
MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大好处
1. 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model不可以不变,当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试。界面素来是比较难于测试的,而现在测试可以针对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