backbone.js MVC 架构解析

why ？ 为什么要使用MVC

1  数据层代码和像HTML这样的表示层代码分开，易于定位问题和修改

2 数据层和表现层分开，可以实现多个视图共享一个模型的架构。起到重用数据层的作用

3 结构清晰，有利于分工协作

4 同设计模式一样，也是代码分离的一种手段，让冗长的代码，结构化

what? 什么是MVC

    MVC开始是存在于Desktop程序中的，M是指数据模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。

    模型M：模型表示企业数据和业务规则。负责数据的存取

    视图V：视图是用户看到并与之交互的界面。对于web 应用程序来说，视图就是有HTML元素组成的界面。

    控制器C：控制器是用户在界面上操作的抽象。控制器接受用户的输入并调用模型和视图去完成用户的需求。对于web应用程序，当单击页面中的超链接和发送HTML表单时，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

    MVC各部分之间的关系如图：

   

图中有几条线把这三部分划分开，有黄线，虚线，和白色的实线。我们把它们想象成路标。你可以看到，在M和V之间有两条黄线，这表示什么呢？它意味着你不能穿越这黄线，任何一个方向都不行。在图的上部，你可以看到白色的虚线，它意味着你可以自由的穿越它，只要是安全的。那白色的实线呢？它代表你可以穿越，但你必须要买票，或者交点过路费。

       下面具体分析，MVC之间是怎么交流的

首先， 我们来看C和M之间的绿色箭头，这箭头的方向就代表着“发起对话”的方向，也就是说，发起对话的是C，而做出回答的是M。C可以问M各种各样的问题，但M只是回答C的问题或要求，它不可以主动的向C要求什么。还记得虚线是畅通无阻的意思吧，所以，C知道M的所有的事情,如果用代码来说明这件事情，就是说，C可以导入M的头文件或是M的接口（API）。因为C可以通过M的API，所以它就可以肆无忌惮的向M要求这要求那了。

 

我们再来看看另外的一个绿色箭头，它是在C和V之间，和前一个绿色箭头的意义一样，它代表C可以直接地向V进行交流。你可以想想，C要把V放到屏幕上，并设置V的属性，告诉它们什么时候从屏幕上消失，把它们分成组等等。C可以毫无限制地向V说话。

 

可能你已经注意到了，这个箭头上还有outlet(输出口)，outlet可以看作是从C指向V的指针，它在C中被定义。outlet给我们提供了很大的方便，它使我们在C的内部就可以轻松准确地向V施令。C可以拥有很多的outlet，可以不止一个，这也使它可以更高效的和V进行交流。

 

那M和V之间可以交流么？还记得黄线的意思么？完全不可以通过，所以我们是不允许M和V进行交流的。这是因为我们不希望这三部分之间有过多的交流，你想想，假如V在显示时出现了问题，比如有一个图形没有显示出来，我们就要去查找错误，因为C可以和V交流，M也可以和V交流的话，我们就要去检查两个部分。相反的，只有C可以和V交流的话，在出错时，我们就只需要去C那里查找原因，这样查找错误不就很是简单了么？所以，我们不允许M和V之间有直接的联系，这也是在它们两之间有两根黄线的原因。

 

好的应用程序要具备与用户交互的能力。如果没有良好的交互性，程序的功能将会受到很大的限制。在MVC中，V是和用户直接接触的，用户看不到M和C，所以，程序与用户的交互必须通过V来实现，但V只是视图而已，它并不能完全处理用户的要求，所以，这就要求V必须有某种手段来向C发送信息，移交用户的交互要求。这手段就是前面白色实线代表的过路费，你知道V不能知道C的一切，但它可以通过某种“手段”来和C进行交流，移交用户交互责任。

 

我们接下来讨论V是如何向C发送信息的。V对C的交流有三种不同的方式。

 

第一种我们称为目标操作(target-action)。它是这样工作的，C会在自己的内部“悬挂”一个目标(target)，如图中的红白相间的靶子，对应的，它还会分发一个操作(action，如图中的黄色箭头)给将要和它交流的视图对象(可能是屏幕上的一个按钮)，当按钮被按时，action就会被发送给与之对应的target，这样V就可以和C交流了。但是在这种情况下，V只是知道发送action给对应的target,它并不知道C中的类，也不知道它到底发送了什么。target-action是我们经常使用的方法。

 

第二种方式我们叫做委托(delegate)。有时候，V需要和C进行同步，你知道，用户交互不仅仅是什么按按钮，划滑块，还有很多种形式。好了，让我们来看看图中的delegate黄色箭头，你发现箭头上又分出了四个小箭头：should，did，will，还有一个没标注的。绝大部分的delegate信息都是should，will，did这三种形式。和英文意思相对应，should代表视图对象将询问C中的某个对象“我应该这么做么？”，举个例子，有一个web视图，有人点击了一个链接，web视图就要问“我应该打开这个链接么？这样做安全么？”。这就是should信息。那will和did呢？will就是“我将要做这件事了”，did就是“我已经做了这件事”。C把自己设置为V的委托(delegate),它让V知道：如果V想知道更多的关于将如何显示的信息的话，就向C发送delegate信息。通过接受V发过来的delegate信息，C就会做出相应的协调和处理。还有一点，每个V只能有一个delegate。 

第三种方式就是数据源(datasource)，你知道，V不能拥有它所要显示的数据，记住这点非常重要。V希望别人帮助它管理将要显示的数据，当它需要数据时，它就会请求别人的帮助,把需要的数据给它。看图中的datasource箭头，和delegate类似，V会发送cout，data at信息给C来请求数据。

好了，这就是V给C发送信息的三种形式。

最后一个问题。你看到M和C之间的白线，这意味着M不可以直接地，没有限制的对C进行交流。但有时，这个方向的交流是必要的。当M中的一些东西发生变化时，C需要了解这些变化，那我们怎么才能让C知道M的变化呢？通知（Notification）和KVO是解决问题的好方法。它们是这样工作的，当M中的某些东西发生变化时，他们会向C发出通知“嘿，老兄，注意了啊，我这发生变化了”，或者他们会发出指向变化的指针给C，或其他什么的。总之，他们的工作模式是这样的。

backbone 的MVC 架构是怎样的？

在backbone中，view 兼具了View 和 Controller 的功能，同MVC模块隔离组织，有一定的出入，具体讨论，可以参考一下两篇文章：

http://lostechies.com/derickbailey/2011/12/23/backbone-js-is-not-an-mvc-framework/

http://stackoverflow.com/questions/10745782/is-backbone-js-really-an-mvc

不过，我们不打算钻牛角尖，重要的是明白backbone 的意图和优点，而不是名词定义

Backbone.js为用户提供了三个核心构建块：

1. 模型 （Backbone.model），用于表示持久性对象。使用Backbone.js的同步功能，模型能够自动地与远程数据源（默认情况下通过RESTful Web服务）进行同步。同时，它还提供了工具能够容易地管理并同步数据源的模型集合。
2. 视图（Backbone.View），用于构建并维护Web应用程序的UI。视图经过配置之后便能够监听自己所代表的模型的change事件，这使得模型和UI之间能够容易地、及时地进行同步。
3. 路由（Backbone.Route），支持Backbone.js应用程序内的导航。尽管典型的Backbone.js应用程序是单页面界面，但是支持可加入书签的URL并且能够使用浏览器的返回按钮进行导航依然是必要的。

backbone 中的几个关键结构的关系，如UML类图：

View 对象内部维护Model 或Collection 引用，当Model 或者Collection 对象的状态发生变化时，通过事件回调view 的方法

一个Web应用的流程通常是这样的:

• 1. 用户在View上进行操作——比如在文本框输入数值或是点击按钮
• 2. Controller处理这个动作
• 3. Controller通过Model对数据进行增删改查，将其传递到View
• 4. View将数据展示给用户

以上描述来自Javascript Web Applications一书

参考：http://dmyz.org/archives/344

http://baike.baidu.com/view/5432454.htm?fromId=31&redirected=seachword

http://blog.csdn.net/qjyong/article/details/1429907

http://www.slideshare.net/treblam

http://blog.csdn.net/xiaofengsheng/article/details/5166168