对Mvvm模式的理解及框架介绍

使用WPF+Mvvm开发一年多，期间由于对Mvvm模式的理解不足，遇到了很多问题，也绕了很多弯子；网上提供的Mvvm的示例比较简单，实际项目中的需求也各种各样。
不过经过几个项目，也有了一些对Mvvm模式的理解：

1. Mvvm是什么，Mvvm是怎么来的？
Mvvm模式广泛应用在WPF项目开发中，使用此模式可以把UI和业务逻辑分离开，使UI设计人员和业务逻辑人员能够分工明确。

Mvvm模式是根据MVP模式来的，可以简单的说，Mvvm模式就是WPF版的MVP模式。MVP模式，MVC模式，这几个模式都是为了抽离出UI逻辑和业务逻辑。

2. 使用Mvvm模式可以参考的主流框架及简单介绍。
主流开源框架：Simple Mvvm，Mvvm Light和Prism。
Simple Mvvm和Mvvm Light基本一致，都是对Mvvm模式的基础封装，并加入了一些不错的功能，消息传输机制，依赖注入等等。开发中小项目推荐使用这两个的其中一个。
Prism是微软给出的一个Mvvm框架，不过它的关注点不仅仅是Mvvm模式，我觉得主要是模块的思想更多一些。大项目的话才推荐使用这个框架，比如一个系统需要分为N个团队进行不同模块的开发，然后再组织成一个系统。

3. 使用Mvvm模式的思想分析问题。
现在有一个功能：用户填入姓名，年龄，选择最喜欢的颜色，然后点击确定按钮提交。就是这样简单的一个调查表。
a.首先设计UI，UI看起来可能是这样的：

b.根据UI去设计对应的ViewModel层需要那些属性，数据和命令：

　Name:string
　Age:int
　FavoriteColor:string
　Submit:Command

c.在ViewModel层的SubmitCommand命令中，调用Model层的Submit方法进行逻辑处理。Model层看起来可能是这样的：

　public string Name { get; set; }
　public int Age { get; set; }
　public string FavoriteColor { get; set; }
　public void Submit() { ... }

4. 看到的一些对Mvvm模式的看法，觉得不太正确。
a.Code-Behind文件要保证绝对干净。
这个说法有些太绝对了，理想状态下，View层的Code-Behind文件中只有在构造函数中调用初始UI元素的一行代码及设置View层的DataContext为对于的ViewModel层。
其实，Code-Behind中还可以些一些UI的逻辑的，比如一些丰富的动画效果，或者直接设置某个元素的样式等。
不过，Code-Behind中确实是不可以写业务逻辑的。
b.ViewModel层不能是Model层的简单封装，ViewModel层也不能是View层的简单映射。ViewModel层和View层要绝对分离，ViewModel层要和View层一样去面向需求设计。
我觉得这样做有点太过了。
Mvvm的目的只是为了UI逻辑和业务逻辑的分离，你说业务逻辑和数据要写在哪一层呢？没错，Model层。
ViewModel层的主要责任是表现逻辑和状态，即ViewModel层是连接View层和Model层的。Model层的一些业务逻辑的状态是需要通过ViewModel层暴露给View层来反映给软件使用者的。

5.我对WPF+Mvvm模式开发的一些经验。
a.WPF的几个重要概念要熟练理解和运用：模板，依赖属性，数据绑定。和Mvvm模式的结合使用，能发挥出很好的效果。
b.团队中的成员最好能够对Mvvm模式有统一的理解和认识。
c.Mvvm模式只是一个模式而已，不是有了Mvvm模式就能写出优美的代码，涉及到具体的业务逻辑，还是需要你以及你的团队有足够强的设计能力。

6.vue.js介绍

vue的核心:修改数据(model),html节点就会自动更新

(1)绑定数据:

Js代码

var vm;
var count=1;
$(function () {
vm=new Vue({
el: '#demo',
data: {
message: 'Hello World!',
number: 2,
ok:true,
name:'whuang'
}
});
vm.$watch('data', function (newVal, oldVal) {
console.log('$watch');
})
});

html代码:

Html代码

<div id="demo">
{{ message }}<br>
{{ number + 1 }}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}<br>
{{ name | uppercase }}
<hr>
<input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >
</div>

(2)动态更新数据

Js代码

var updateData2= function () {
vm.$data.message="更新后的数据"+(count++);
vm.$data.ok=false;
};

如何获取vue的data?

注意:data前面要加$

(3)vue表达式

Html代码

{{ number + 1 }}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}<br>
{{ name | uppercase }}

动态修改样式:

Html代码

<input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >

在js方法中修改ok的值即可

(4)vue计算属性

Js代码

var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
},
upper: function () {
return "<span style='color:red' >school</span>".toUpperCase();
},
haha: function () {
return 'iloveyou'.split('');
}
}
})

html代码:

Html代码

<div id="example">
a={{ a }}, b={{ b }}<br>
{{{ upper }}}<br>
{{ haha }}<br>
</div>

(5)监听数据的变化

执行结果:

new:更新后的数据1;old:Hello World!

(6)如何获取vue的节点和数据

节点:vm.$el

数据:vm.$data

各位大牛如有不同的观点可以一起讨论下。作者：backslash112 出处：http://sirkevin.cnblogs.com/

对Mvvm模式的理解及框架介绍

猜你喜欢