×

mvvm

mvvm的原理和理解?浅谈开发中的mvvm模式及与mvp和mvc的区别

admin admin 发表于2022-07-23 20:24:28 浏览96 评论0

抢沙发发表评论

MVVM的框架下视图和模型是不能直接通信的,比如jstl类似的模板伪代码ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑,视图模型mvvm模式的核心,浅谈开发中的mvvm模式及与mvp和mvc的区别MVC,MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式,它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面,ViewModel也能监听到视图的变化,从来不做数据字段的自定义适配(举个例子。

mvvm的原理和理解

MVVM是Model-View-ViewModel的简写。视图模型mvvm模式的核心,它是连接view和model的桥梁。模型指的是后端传递的数据。视图指的是所看到的页面。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVC和MVVM的区别并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早,前端并不那么成熟,很多业务逻辑也是在后端实现,所以前端并没有真正意义上的MVC模式。而我们今天再次提起MVC,是因为大前端的来到,出现了MVVM模式的框架,我们需要了解一下MVVM这种设计模式是如何一步步演变过来的。

浅谈开发中的mvvm模式及与mvp和mvc的区别

MVC,MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式。以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解。现在一边查资料,并结合自己的理解,来谈一下对于这三种模式思想的理解,以及它们的区...

前端的mvvm是什么意思

View一般就是我们平常说的HTML文本的Js模板,里面可以嵌入一些js模板的代码,比如Mustache,比如jstl类似的模板伪代码

ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑,举个例子,比如图片走马灯特效,比如表单按钮点击提交,这些自定义事件的注册和处理逻辑都写在ViewModule里面了

Module就更简单了,就是对于纯数据的处理,比如增删改查,与后台CGI做交互

那么什么是MVVM框架呢??一般他们都是这么做的

1.  定义一串所谓的伪模板代码,例如通过className标注,或者自定义tag的方式,将一段html文本区域给标注声明起来,意思就是喊一嗓子,“喂,兄弟们,这块地方我占了,要拉屎去别处拉去”

2.  通过类似jstl之类lamda表达式,来做js模板,“拜托伙计,天堂有路你不走,非要自己搞一套,你就不能暴露接口让大家用自己的模板语言,比如Mustache或者jtpl吗?”

3.  很傻比的封装一串自己的所谓数据模块组件,与不同类型的数据源做数据传输和适配,一般都不会分层很清晰,加入后台数据字段改了,写框架的都没脑子的,从来不做数据字段的自定义适配(举个例子,原来后台传递的字段是person.userName,现在改成了小写,person.username,你就傻逼的去吧模板再改一下吧,其实要解决这个问题,非常简单,在MVVM层中引入一层DO,领域对象层,Module到DO之间还有一层转换就可以搞定这个问题)-mvvm

4.  非不暴露自己的自定义事件模型,就是那个观察者模式啦,自己乱七八招在页面上绑定一堆form change之类的事件,以实现View与Module的单向绑定

5.  所谓的双向绑定,也就是OOP语言中早被烂透了的getter,setter模型,ES5+可以用defineProperty,低版本就需要自己在js object赋值的时间做写死代码方式的处理了