MVVM

最新推荐文章于 2025-09-05 08:42:59 发布

weixin_34194379

最新推荐文章于 2025-09-05 08:42:59 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签：前端测试 javascript ViewUI

原文链接：https://juejin.im/post/5b7cc231f265da433d7691b2

本文深入探讨了MVVM（Model-View-ViewModel）模式的发展历程，从直接操作DOM到使用jQuery，再到MVC及最终的MVVM模式。阐述了MVVM模式如何通过关注Model的变化，自动更新DOM状态，实现低耦合、可重用性和易于测试的前端开发优势。

var dom = document.getElementById('name');
dom.innerHTML = 'Homer';
dom.style.color = 'red';复制代码

$('#name').text('Homer').css('color', 'red');
复制代码

MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

DOM1级：主要是映射文档的结构

DOM2级：DOM试图、DOM事件、DOM样式、DOM遍历和范围

DOM3级：进一步扩展DOM，引入以统一方式加载和保存文档的方法；新增验证文档的方法；对DOM核心扩展

1、单向绑定：

2、双向绑定：

3、同步DOM结构

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