前沿:了解设计模式对我们而言,具有很大意义,对语言没有限制,它适用于任何语言,是一种变成思想。设计模式最初有四人帮提出,有兴趣的同学可以去了解下,今天给大家主要分析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的区别
mvc中controller是被动接受请求,而mvvm中作为控制器这一环节的是主动地。
mvc中view可以直接访问model,因此view中必然包含了业务逻辑,并没有实现view和model的分离,而mvvm主要是通过数据的双向绑定机制,在js中实现业务逻辑,进行view和model的关联,因此mvvm真正意义上实现了view和model的分离。