【日常交流】浅析MVC、MVP和MVVM

MVC 

        MVC是最常见的组织架构，由View（视图），Controller（控制器）和Model（模型）组成。

        View（视图）：负责视图展示，将Model中的数据可视化出来。

        Controller（控制器）：负责业务逻辑，根据用户行为对Model数据进行修改。

        Model（模型）：负责保存应用数据，与后端数据进行同步。

                                      

通信方式如下：

        1）View传送指定到Controller（控制器）

        2）Controller（控制器）会执行一段业务逻辑，在执行结束之后，会发送一段指令改变Model的状态

        3）随后Model将状态数据信息返回给View，用户得到反馈信息

        各个通信之间都是单向的。

        但是在实际开发过程当中，往往会出现以下情况：

                                                         

通信方式：

      1）用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。

      2）用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。

      3）Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。

         这种情况下往往会出现，当更新了Model数据的时候，不知道是View触发还是Controller触发更改的数据，很容易造成数据的混杂。

                       

        并且View比较庞大，而Controller比较单薄：如果在VIew中调用数据的话，会造成View的内容越来越多，而相应的Controller的内容变得越来越少了。

MVC的优缺点：

优点：

    1）耦合性低，视图层和业务层分离，允许更改视图层代码而不用重新编译模型和控制器的代码

    2）重用性高

    3）生命周期成本低

    4）MVC便于开发和维护用户接口的技术含量低

    5）可维护性高，分离视图层和业务逻辑层使得WEB应用更易于维护和修改

    6）部署快

缺点：

    1）View 和 Model 之间是直接进行交互的，也就是说 View 和 Model 之间是可以相互产生影响的，这样在代码中就必然会导致 View 和 Model 之间的耦合

    2）不适合小型，中等规模的应用程序，花费大量时间将 MVC 应用到规模并不是很大的应用程序通常会得不偿失。

    3）视图与控制器间过于紧密连接，视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。

    4）视图对模型数据的低效率访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

MVP

        MVP和MVC很接近，在MVP模式中，P（Presenter）相当于是一个中间人，用于相互的传递，它负责View和Model之间的数据流动，从而防止View和Model之间的直接交流。

                                             

        presenter负责和Model进行双向交互，并且与View也进行双向交互。相对于MVC来说，View变成了被动视图，相应的由于只和presenter进行交互，从而自身变得很小。但是相反的，由于presenter和Model以及View之间进行了相互的交互，使得presenter自身在应用逐渐变大的同事，导致presenter自身体积增大，难以维护。

MVP的优缺点：

优点：

        1）模型与视图完全分离，可修改视图而不影响模型

        2）可以更高效的利用模型，因为所有的交互都在Presonter内部

        3）我们可以将一个Presenter用于多个视图，而不需要改变Presenter的逻辑。这个特性非常的有用，因为视图的变化总是比模型的变化频繁；

         4）如果我们把逻辑放在Presenter中，那么我们就可以脱离用户接口来测试这些逻辑（单元测试）。

         5）使得整个软件分层清晰，降低耦合度

缺点：

        1）视图和Presenter的交互会过于频繁，使他们的联系过于紧密，一旦视图变更，Presenter也要进行变更。

        2）需要加入Presenter作为桥梁协调View和Model，导致Presenter会变得很臃肿

MVVM

        MVVM可以分解成（Model-View-ViewModel）.ViewModel可以理解为在presenter基础上的进阶版。

        

        其模型和MVC差不多，只不过MVVM采用的是双向绑定，当View发生变动的时候，会自动反应在ViewModel中，反之亦然。

MVVM的优缺点：

优点：

       1）低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

       2）可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

       3）独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

       4）可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写。

缺点：

        此架构方式的实现方式比较不完善。

MVC、MVP和MVVM小结

        1）这三种框架模式设计的目标都是为了解决Model和View的耦合问题

        2)MVC模式较早应用在后端，如Spring MVC，ASP.NET MVC等，在前端领域，如Backbone。js也有应用，其优点是分层清晰，缺点是数据混乱，灵活性带来的维护性问题

        3)MVP模式是MVC的进化模式，Presenter作为中间层负责MV通信，解决了两者耦合问题，但P层过于臃肿会导致维护问题

        4)MVVM模式在前端领域有广泛应用，它不仅解决了MV耦合问题，还同时解决了维护两者映射关系的大量范泽代码和DOM操作代码，在提高开发效率、可读性同时还保持了优越的性能表现