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身上

Android MVVM框架 fragment mvvm框架的原理和好处_MVC

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>