MVC,MVVM与AngularJS

Posted by mieruko on 2016-09-10

前言:

学习任何东西之前,习惯先有一个宏观的认识,AngularJS也不例外。包括在《AngularJS高级程序设计》这本书中,也是先对整体概念做了一些介绍。其中花了一些篇幅解释了MVC模式,上网一搜,这个MVC模式在框架中提到的还真不少,但AngularJS到底是MVC模式还是MVVM模式呢?具体模式在框架里的实现又是怎样的?一开始很是纠结,现在有头绪了,写下来。

什么是MVC

MVC是一种软件架构。它是说,可以把软件分成三个部分,视图(view),控制器(controller),
模型(model)。这个视图就是说用户界面,控制器就是业务逻辑,模型就是数据保存。它们之间的关系大概是,视图传送指令到控制器,控制器根据情况去改变数据,然后把新的数据反馈给视图层面。
视图传送的指令,是由于用户在视图层面的某些操作发出的,其实用户还可以直接跳过视图层,向controller直接传递指令。前者通过DOM事件接收指令,后者直接改变url。

什么是MVVM

MVVM模式中,各部分之间的通信都是双向的。(可以注意到MVC模式中的数据传递都是单向的)。同时视图层不与Model发生接触,一切都通过中间的ViewModel传递(ViewModel简写就是VM)。一个操作的流程大概是这样的:
用户通过View层传递指令,View层触发了ViewModel层的变化,然后ViewModel层再去修改Model层,修改之后的Model层又通过ViewModel反馈给了View层。
MVVM的特点是,它采用双向绑定,View的变动,会带动ViewModel的变动,反过来,ViewModel的变动,也会带动View的变动,两者是“一根绳上的蚂蚱”,一起变化。

AngularJS与MVC,MVVM

虽然我接触到的许多资料告诉我们AngularJS是一个MVC框架,但是仔细想想,我还是认为AngularJS是一个MVVM框架,原因如下:

  • AngularJS中,数据是双向传递的,View层(视图模版)的变化会引发ViewModel(这里$scope应该充当这个角色)的变化,反过来,ViewModel层的变化也会引发View层的变化.
  • View不能直接与Model交互,而是要通过$scope才可以。
  • View层和ViewModel层是双向绑定的,两者同步变化

    AngularJS为什么会被认为是MVC框架

    其实这么理解也没有错,因为AngularJS中存在一个Controller,但是在我看来,Controller更像是ViewModel层逻辑的一部分。但这个MV后面到底该跟啥,其实没有那么重要,AngularJS的作者希望我们把注意力放在一实现一个成功的,具有好的设计以及遵循“分离关注点”原则的应用程序上,而非专注于概念的争论,因此我们不必在这一点上太过执着。

总结

今天这篇文章与其说是想给AngularJS的模式下个定义,不如说是把MVC模式和MVVM模式给整明白了一遍(笑哭)。虽然不必执着于对这个框架模式的死定义,但是这两个模式还是有必要弄清楚的,其实还有一个叫做MVP的模式,MVVM模式有点像是从它里面脱胎的,但没有这两种出镜频率高,因此就着重讲了MVC和MVVM^_^。概念搞清楚了,接下来就开始实战吧!💪