MVVM模型(Model-View-ViewModel)
- 总结:
- MVVM的优点
- 1、低耦合:
- 2、可重用性:
- 3、独立开发:
- 4、可测试:
- MVVM的缺点
- Bug很难被调试:
- MVVM的选用
- MVC与MVVM的区别
- 1、Model
- 2、View
- 3、ViewModel
总结:
MVVM是Model-View-ViewModel的简写,本质上是MVC 的改进版。MVVM框架的由来是MVP(Model-View-Presenter)模型与WPF结合的应用方式时发展演变过来的一种新型架构框架,一句话总结:vm层(视图模型层)通过接口从后台m层(model层)请求数据,vm层继而和v(view层)实现数据的双向绑定。
MVVM的优点
MVVM模式和MVC模式一样,主要目的是分离视图(view)和模型(Model),有几大优点
1、低耦合:
视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变
2、可重用性:
你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑
3、独立开发:
开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码
4、可测试:
界面素来是比较难于测试的,而现在测试可以针对ViewModel来写
MVVM的缺点
Bug很难被调试:
因为使用双向绑定的模式,当看到界面异常了,有可能是View的代码有Bug,也可能是Model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。
另外,数据绑定的声明是指令式地写在View的模版当中的,这些内容是没办法去打断点debug的一个大的模块中model也会很大,虽然使用方便了也很容易保证了数据的一致性,当时长期持有,不释放内存就造成了花费更多的内存对于大型的图形应用程序,视图状态较多,ViewModel的构建和维护的成本都会比较高。
MVVM的选用
(1)接触Android也有很长时间了,大多数时间都是自己在摸索开发,以前由于开发任务重,一般不太敢用新的东西,怕有解决不了的就麻烦了,一直也都有听说过Android的各种框架,MVP,MVVM比较流行,网上说的各有各的优缺点吧,感觉就是大型APP用MVP更好,中小型用MVVM框架更好,因为不用像MVP那样需要建很多类
(2)我自己分析的MVVM的优势:不用像MVP那样建很多类,这个也是我一直没用mvP的原因。写一个activity需要建好多类,感觉好麻烦啊;MVVM就是将一些页面加载数据方法放在实现层中,我以前自己也想将数据加载分离出来,自己就单独写个activity类,感觉不是很好,MVVM正好帮我解决了这个问题,真是如获至宝啊。
(3)MVVM可以和DataBinding完美结合,页面数据加载方便,这条感觉如果用kotlin开发的话效果减少了好多,自己一直不喜欢在页面中写加载数据的代码,但是确实挺好用的。可以尝试使用
(4)我在我自己设计的框架中,并没有用到DataBing,因为不喜欢在xml中写程序加载数据代码,幸好有kotlin也可以不用findviewbyId,所以我就把本身VM框架的给UI赋值的部分移到activity中了。
MVC与MVVM的区别
并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。
也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早,前端并不那么成熟,很多业务逻辑也是在后端实现,所以前端并没有真正意义上的MVC模式。而随着大前端的来到,出现了MVVM模式的框架。
1、Model
模型(Model):对应data中的数据,一般JS对象
data: {
a: '',
address: '',
name: ''
}
data中书写的Key:Value都会出现在Vue实例VM身上
2、View
视图(View):对应模板(DOM)
eg:
<div id="root">
<h2>{{ a }}</h2>
<h2>{{ address }}</h2>
<h2>{{ name }}</h2>
</div>
3、ViewModel
视图模型(ViewModel):对应Vue实例对象(VM)
<script type="text/javascript">
// ViewModel
new Vue({.
// View
el: '#root',
// Model
data: {
a: '',
address: '',
name: ''
}
)
</script>