mvc与mvvm设计模式

前沿:了解设计模式对我们而言,具有很大意义,对语言没有限制,它适用于任何语言,是一种变成思想。设计模式最初有四人帮提出,有兴趣的同学可以去了解下,今天给大家主要分析mvc与mvvm设计模式

一.mvc设计模式:

字面理解,mvc就是model,view,controller

三者又分别是什么呢?

  • model有模型的意思,不过这里他代表的数据模型。就是说整个项目运行中担任了数据供给的部分。
  • view是视图的意思,这里代表即前端ui视图,就是界面。
  • cotroller是控制器的意思,在mvc中起着关联view与model的作用。

三者如何团结合作完成项目的运行呢?

先来说说前端工程师等级的区别:
我们说前端程序员的等级可以通过分析设计稿看出。
较为初级的拿到设计稿。第一眼看到的往往是视图界面,设计稿上有哪些功能,颜色分类,层级等。
中级的前端开发工程师拿到设计稿后,第一眼往往会看设计稿有那些功能,轮播图,分页,三级联动等等。
而高级开发工程师在看到设计稿后,往往会思考,该页面中有哪些模块,那些数据分类。如广告,商品列表等

一个前端项目的完成往往是从建模开始,又牵扯到一个问题,什么是建模?
建模说白了,就是对ui视图即界面的抽象。抽象这一过程就是将页面中的数据分类并分离出来。其实掌握了 这一点,在开发的过程中,往往在没有后端数据的 情况下,可以精确的mock出准备的数据。

回到三者的团结运行,view视图还原成功后,静态页面就算是完成了,要实现动态,我们就需要从model(数据模型)中拿到我们需要的数据。在这个过程中,view会去controller中查找属性和方法。属性从model中拿到数据后反馈给view,最终完成数据的渲染并展示在用户眼前。

值得我们注意的是,mvc的流程中 ,controller其实是被动的一个过程,被动接受view发起的请求,然后进行相应的处理。

二.mvvm设计模式

model(数据模型),view(视图),viewmodel(视图模型)

大家可以看到,里面是没有controller了,但是他将viewmodel代替了controller。
在运行过程中起了view和 model的链接桥梁,但是又有一点区别与mvc的是,mvc中被动接受view请求的controller在这里,viewmodel给他做了升级,不再是被动接受,而是不断监听view,当有新的需求时,就去链接model拿去数据,然后返回给页面,很好的将view和model做了分离,使view和viewmodel可以独立完成开发。

缺点:不断的监听页面,性能消耗很大!

三.mvc和mvvm的区别

  1. mvc中controller是被动接受请求,而mvvm中作为控制器这一环节的是主动地。

  2. mvc中view可以直接访问model,因此view中必然包含了业务逻辑,并没有实现view和model的分离,而mvvm主要是通过数据的双向绑定机制,在js中实现业务逻辑,进行view和model的关联,因此mvvm真正意义上实现了view和model的分离。


 上一篇
九种跨域方式实现原理 九种跨域方式实现原理
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容 一、什么是跨域?1.什么是同源策略及其限制内容?同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS
2021-08-11
下一篇 
深入高阶函数应用之柯里化 深入高阶函数应用之柯里化
一、高阶函数高阶函数英文叫 Higher-order function,它的定义很简单,就是至少满足下列一个条件的函数: 接受一个或多个函数作为输入 输出一个函数 也就是说高阶函数是对其他函数进行操作的函数,可以将它们作为参数传递,或者
2021-01-28
  目录