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

作者:nuysoft/高云/[email protected]

原文链接: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

视图 Backbone.View

视图的使用相当方便,不需要判断任何HTML、CSS,可以任意JavaScript模板引擎集成。

通用的做法是,将界面组织成基于模型的诗句,当模型改变时视图立即更新,而不需要重画整个页面。

不再需要纠结于JSON对象、查找DOM元素、手动更新HTML,只需把视图 render 方法绑定到模型的 change 事件,模型数据会立即显示到UI上。

扩展方法 extend

模型、集合、视图、路由器都一个extend方法,用于扩展原型属性和静态属性,创建自定义的视图、集合、视图、路由器类。

时间: 2024-10-12 02:27:50

转:Backbone源码分析-Backbone架构+流程图的相关文章

spring transaction源码分析--事务架构

1. 引言  事务特性 事务是并发控制的单元,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位.通过事务将逻辑相关的一组操作绑定在一起,以便服务器 保持数据的完整性.事务通常是以begin transaction开始,以commit或rollback结束.Commint表示提交,即提交事务的所有操作.具体地说就是将事务中所有对数据的更新写回到磁盘上的物理数据库中去,事务正常结束.Rollback表示回滚,即在事务运行的过程中发生了某种故障,事务不能继续进行,系统将

Backbone源码分析(二)

在传统MVC框架模式中,Model承担业务逻辑的任务.Backbone作为一个mvc框架,主要的业务逻辑交由Model与Collection来实现.Model代表领域对象,今天主要学一下Model源码中几个重要的函数. 我们先看一下Model的构造函数做了哪些事情: // Create a new model with the specified attributes. A client id (`cid`) // is automatically generated and assigned

nginx源码分析:架构解析

nginx启动流程: 根据上面的手稿得知,nginx在循环中调用ngx_process_events_and_timers该函数来处理事件,在该函数中,最主要的一个操作是调用了ngx_process_events函数,该函数是一个宏定义,然后我再工程里面搜一下ngx_event_actions,结果如下: ngx_event_action在每一个多路复用后端中被分别赋值. 在ngx_event_accept函数中,没接收到一个新的连接,就会建立一个ngx_connection对象,并将ngx_r

sshe源码分析——全局架构

在Web.xml中 <!-- 需要拦截的JSP --> <filter> <filter-name>sessionFilter</filter-name> <filter-class>sy.util.base.SessionFilter</filter-class> <init-param> <param-name>include</param-name> <!-- 在securityJsp这

AccessTokenValidation3 源码分析 jwttoken验证流程图

processon分享地址:https://www.processon.com/view/link/5c6a0b59e4b08a7683c40fc5 原文地址:https://www.cnblogs.com/TeemoHQ/p/10400003.html

Backbone设计思路和关键源码分析

一. Backbone的江湖地位: backbone作为一个老牌js框架为大规模前端开发提供了新的开发思路:前端MVC模式,这个模式也是前端开发演变过程中的一个重要里程碑,也为MVVM和Redux等开发思路奠定了夯实的基础,后来的react,vue无不是在backbone的影响下开创出来的经典模式.为什么这么说呢?我们先来回顾下Web前端开发的大概演变流程,本过程纯粹个人理解,抛砖引玉,共同探讨,如有偏差请看官指出错误: 1. 无前端:最早的网页就是HTML,还只是静态页面,当时的脚本含量极少甚

RMI 系列(02)源码分析

目录 RMI 系列(02)源码分析 1. 架构 2. 服务注册 2.1 服务发布整体流程 2.2 服务暴露入口 exportObject 2.3 生成本地存根 2.4 服务监听 2.5 ObjectTable 注册与查找 2.6 服务绑定 2.7 总结 3. 服务发现 3.1 注册中心 Stub 3.2 普通服务 Stub RMI 系列(02)源码分析 1. 架构 RMI 中有三个重要的角色:注册中心(Registry).客户端(Client).服务端(Server). 图1 RMI 架构图 在

Backbone.js源码分析(珍藏版)

源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function () { // 创建一个全局对象, 在浏览器中表示为w

Backbone.js 0.9.2 源码分析收藏

Backbone 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序. 源码分析转之网上它人的备注,特收藏一下,以免方便阅读. // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Ba