转：Backbone源码分析-Backbone架构+流程图

最新推荐文章于 2024-09-14 09:30:00 发布

weixin_30492601

最新推荐文章于 2024-09-14 09:30:00 发布

阅读量81

点赞数

文章标签：测试 json javascript ViewUI

原文链接：http://www.cnblogs.com/snowbaby-kang/p/4223660.html

版权

作者：nuysoft/高云/nuysoft@gmail.com

原文链接：http://www.cnblogs.com/nuysoft/archive/2012/03/18/2404274.html

JSMVC职责划分

M 模型

业务模型：业务逻辑、流程、状态、规则
（核心）数据模型：业务数据、数据校验、增删改查（AJAX）

V 视图

（核心）视图：定义、管理、配置
模板：定义、配置、管理
组件：定义、配置、管理
（核心）用户事件配置、管理
用户输入校验、配置、管理

C 控制器/分发器

（核心）事件分发、模型分发、视图分发
不做数据处理、业务处理，即业务无关
扩展：权限控制、异常处理等
C是JSMVC框架的核心，实现集中式配置和管理，可以有多个控制器

工具库

主要是异步请求、DOM操作，可以依赖于jQuery等

JSMVC实现探讨

MVC的模型Model、视图View、控制器Control三个相互独立又相互联系，C作为其中的桥梁。MVC作为由来已久的成熟开发模型，已经有经典的实现可控参考，在浏览器和JS这个特定应用场景中，我们做如下探讨：

M模型是自包含的，可以嵌套包含，不会主动引用视图和控制器；可以是简单的JSON对象/数组，也可以用组合模式Composite实现嵌套包含；

V视图是嵌套包含的，可以用组合Composite实现；视图需要引用模型（M-V），一个视图引用一个多个视图，视图会收到模型的通知并自动更新，可以用观察者模式Observer实现；视图需要响应用户的交互，使用浏览器事件模型；

C控制器作为MVC框架关注的核心，采取集中配置的策略（V-C）；可以有多个控制器（C+C），用策略模式Strategy实现；hash事件驱动需要用到浏览器事件模型。

可以看到M模型和C控制器之间没有关联，一般我认为是不需要的；但是在有的框架中实现了M模型和C控制器事件的关联（比如公司在用的Magix），也是一种实践，可以参考。

上边的论述解析MVC在JS中定位，但是理解JSMVC如何运行的关键在于对事件驱动的理解。

事件驱动

在浏览器中JSMVC有三种事件驱动方式：

1. hash驱动，通过popstate/hashchange事件驱动控制器（前边有过介绍，后续结合Backbone的Router和History详细讲解它原理、实现、技巧）

2. DOM事件，用来驱动视图（这个我们已经很熟悉了）

3. 模型事件（业务模型事件和数据模型事件），用来驱动模型和模型结合（这个后续结合Backbone的Model讲解）

今天就写到这里，下节介绍Backbone的架构、能做什么、不能做什么、以及还能扩展什么。

参考资料

http://documentcloud.github.com/backbone/
http://www.csser.com/tools/backbone/backbone.js.html

官网介绍

Backbone通过提供模型Models、集合Collection、视图Veiew赋予了Web应用程序分层结构。通过以下方式实现分层结构：
 模型Model绑定键值数据和自定义事件；
 集合Colection是模型的有序或无序集合，带有丰富的可枚举API；
 视图View声明事件监听函数；
 将模型、集合、视图与服务端的RESTful JSON接口连接。

自调用匿名函数

整个Backbone的源码用一个自调用匿名函数包裹，可以通过闭包特性引用变量（例如 previousBackbone、slice、splice等），同时避免污染全局命名空间。
整体结构如下，还是很清晰的：

   1:  (function() {

   2:      Backbone.Events        // 自定义事件

   3:      Backbone.Model        // 模型构造函数和原型扩展

   4:      Backbone.Collection    // 集合构造函数和原型扩展

   5:      Backbone.Router        // 路由配置器构造函数和原型扩展

   6:      Backbone.History        // 路由器构造函数和原型扩展

   7:      Backbone.View            // 视图构造函数和原型扩展

   8:      Backbone.sync            // 异步请求工具方法

   9:      var extend = function (protoProps, classProps) { ... } // 自扩展函数

  10:      Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend; // 自扩展方法

  11:  }).call(this);

依赖库

Backbone必须依赖于 Underscore.js，DOM操作和AJAX请求依赖于第三方jQuery/Zepto/ender之一，也可以通过 Backbone.setDomLibrary( lib ) 设置其他的第三方库。

自定义事件模块 Backbone.Events

可以和任意对象合体（将方法赋值到其他对象或原型上），合体后的对象可以自定义事件，提供三个方法来绑定、移除、触发自定义事件。

模型 Backbone.Model

是 JavaScript 应用程序的核心，包含业务数据和对业务数据的读写和持久化，模型的主要方法包括读写和持久化。

集合 Backbone.Collection

集合是模型的有序集合，可以在集合上绑定 "change" 事件，当集合中的任何模型发生变化时收到通知，集合也可以监听 "add" 和 “remove" 事件，从服务器获取数据，并能使用 Underscore.js 提供的全套方法。
为了方便，在集合中的模型上触发的任何事件都会在集合上直接触发。这样就可以监听集合中模型的指定属性的变化。例如：Documents.on("change:selected", ...)
集合的主要方法包括读写、维护和持久化。

路由配置器 Backbone.Router

Web应用程序通常需要为重要页面提供可链接、收藏、可分享的 URL。直到最近，锚文片段（hash #page）可以被用来提供这种固定链接；同时随着 History API 的到来，锚文现在可以用于处理标准 URLs （/page）。

Backbone.Router 为客户端页面路由提供了许多方法，并能连接到指定的动作（actions）和事件（events）。对于不支持 History API 的旧浏览器，路由器提供了优雅的回调函数并可以透明的进行 URL 片段的转换。

页面加载期间，当应用程序已经创建了所有的路由表，需要调用 Backbone.history.start()，或 Backbone.history.start({pushState : true}) 确保路由初始 URL。

路由器 Backbone.History

作为全局路由器，用于处理 hashchange 或 pushState事件，匹配适合的路由表，并触发回调函数。
如果使用带有路由表的路由器，会自动创建一个History对象，此时不要再创建一个History对象，而是使用 Backbone.history。
Backbone 会自动判断浏览器对 pushState 的支持，以做内部的选择。不支持 pushState 的浏览器将会继续使用基于锚点的 URL 片段。

关于官网疑惑：
如果兼容 pushState 的浏览器访问了某个 URL 锚点，将会被透明的转换为真实的 URL。注意使用真实的 URLs 需要 web 服务器支持直接渲染那些页面，因此后端程序也需要做修改。
浏览器发起HTTP请求时并不会把锚文部分放在请求头中，查看 http rfc2612 也没有发现相关的说明，保留疑问。
http://www.w3.org/Protocols/rfc2616/rfc2616.html