Angular系列——MVC模式和MVVC模式

AngularJS的MVC模式理解

Angular系列——MVC模式和MVVC模式


M:Module模型,功能:储存数据的容器,提供操作数据的方法,实际是AngularJS的scope

V:View视图,功能:显示Model的数据,将数据同步到Model,实际上就是双向绑定;与用户交互。

C:Controller控制器,功能:初始化Model数据,为Model添加行为方法。Service,为controller提供一些服务支持。


MVC模式实现了模型和视图的分离,它的优点有:

(1)模型的复用。因为模型是独立于视图的,所以可以把一个模型独立地移植到新的平台工作。一个模型提供不同的多个视图表现形式,也能够为一个模型创建新的视图而无须重写模型。一旦模型的数据发生变化,模型将通知有关的视图,每个视图相应地刷新自己。

(2)提高开发效率。在开发界面显示部分时,你仅仅需要考虑的是如何布局一个好的用户界面;开发模型时,你仅仅要考虑的是业务逻辑和数据维护,这样能使开发者专注于某一方面的开发,提高开发效率。

(3)便于可维护。MVC模式划分出明晰的模型和视图部分,并使其解耦,在软件需求发生变更的时候,就可以各自独立的改变而不会相互影响,使得程序更容易维护和扩展。

这篇讲的三者之间的关系比较详细:http://blog.itpub.net/29361362/viewspace-1069895/

这篇是讲了下MVC的原理:http://www.cnblogs.com/chengyuanchun/p/4914154.html


AngularJS的MVVM模式理解

      其实,MVVM是MVC的进化版, Angular使用的就是MVVM。

Angular系列——MVC模式和MVVC模式

在angular中MVVM模式主要分为四部分:

     M: Model,它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。也就是Angular中的Service

     V: View,它专注于界面的显示和渲染,在angular中则是包含一堆声明式Directive的视图模板。

     VM: ViewModel,它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;也就是Angular中的scope
   Controller:这并不是MVVM模式的核心元素,但它负责ViewModel对象的初始化,它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上,使得应用界面在启动加载的时候达到一种可用的状态。


       MVVM模式利用框架内置的双向绑定技术对MVP(Model-View-Presenter)模式的变型,引入了专门的ViewModel(视图模型)来实现View和Model的粘合,让View和Model的进一步分离和解耦。MVVM模式的优势有如下四点:

  1. 低耦合:View可以独立于Model变化和修改,同一个ViewModel可以被多个View复用;并且可以做到View和Model的变化互不影响;
  2. 可重用性:可以把一些视图的逻辑放在ViewModel,让多个View复用;
  3. 独立开发:开发人员可以专注与业务逻辑和数据的开发(ViewModel),界面设计人员可以专注于UI(View)的设计;
  4. 可测试性:清晰的View分层,使得针对表现层业务逻辑的测试更容易,更简单。

参考博客:这篇将的angular的MVVC模式很清楚http://www.cnblogs.com/whitewolf/p/4581254.html