（一）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的分离。

 

 以上就是总结的有关mvc与mvvm的设计模式，不过都还比较浅层，如果要继续深究，可以关注这几个词汇：脏治检查，数据监听，劫持。好了就总结到这里。

有什么问题记得评论，24小时答复。我们一起 进步！