MVC、MVP、MVVM

    近半年接触的新项目，都不再是以前的MVC，而是MVVM。现在有时间停下来学习一下项目里的技术点，就一边想着项目中的实践，一边查资料，又发现，除了MVC、MVVM之外，还有个MVP。本篇博客就来梳理一下它们。

   一.MVC（Model-View-Controller)

    好久没有接触MVC了，都快要忘记了项目中是如何实践的。

    1. 模式结构

    它将系统分成了三个部分：视图（View），用户界面；控制器（Controller），业务逻辑；模型（Model），数据保存。

    2. 通信方式

    它们之间的通信是：View 传送指令到 Controller；Controller 完成业务逻辑后，要求 Model 改变状态；Model 将新的数据发送到 View，用户得到反馈。所有的通信都是单向的。

    3. 互动模式

    接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。另一种是直接通过controller接受指令。

• 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
  
• 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
  
• Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。

   二.MVP（Model-View-Presenter)

    MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

• 各部分之间的通信，都是双向的。
  
• View 与 Model 不发生联系，都通过 Presenter 传递。
  
• View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

   三.MVVM（Model-View-ViewModel）

    MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

    唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

    MVVM在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。

    像之前项目接触过一下AngularJS，它就属于一个MVVM模式。有人做过测试：使用Angular（MVVM）代替Backbone（MVC）来开发，代码可以减少一半。

    而目前项目中接触到的Avalon，也属于MVVM模式。由于系统的架构都是现成的，很多东西已经为我们开发搭建好，开发任务紧张，也没有时间去深入学习。但这么长时间的MVVM模式下的开发，确实有种前后台很容易交互的体会，因为双向绑定，JS文件里也不用去操作DOM元素，后台也没有复杂的转换，复用性提高了，代码也减少了。

    MVVM算是一种新技术吧，也看到了网上很多争论，MVVM比MVC好，不应该继续使用MVC，而需要跟上技术的变化，选择MVVM。其实，在新技术面前，我们应该是不盲目也不守旧，不断学习，认真分析，选择软件最合适的。