关闭

【转】Backbone架构+流程图

标签: backbone
857人阅读 评论(0) 收藏 举报
分类:

  

Backbone-_thumb2

官网介绍


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-事件

 

模型 Backbone.Model


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

 

Backbone-模型

 

集合 Backbone.Collection


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

 

Backbone-集合

 

路由配置器 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架构-路由

 

视图 Backbone.View

 

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

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

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

Backbone-视图

扩展方法 extend


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

0
0
查看评论

Backbone.js 简易入门教程

因为最近的工作中使用到了backbone.js框架,所以在网上找了些资料,但是关于这个框架的中文资料实在是太少了,没有办法,只好自己翻译了壹篇简单的入门教材。如果翻译得不好,请大家口下留情。另外,大家也可以签出 Agility.js 的代码,它也是壹个用于替代Backbone.js的壹个简单框架。这...
  • huang100qi
  • huang100qi
  • 2014-03-25 23:26
  • 6351

backbone新手学习方法

下面这些提示,可以让你避免我们在进行Backbone.js开发时所碰到错误: 1. 视图(Views)是数据无关的(Data-Less) 数据属于模型(models)不是视图。下次你发现 你在一个视图中存储数据(或者更糟:在DOM里),马上把它移到model里。 ...
  • wyodyia
  • wyodyia
  • 2014-08-20 16:32
  • 2514

Backbone.js教程(初级篇) 这是菜鸟与老油条,屌丝与高富帅的战争 —— 译者:茶几 @chajn 原作者:脱袜子·戴蕾丝 原文:http://backbonetutorials.com/

Backbone.js教程(初级篇) 这是菜鸟与老油条,屌丝与高富帅的战争 —— 译者:茶几 @chajn 原作者:脱袜子·戴蕾丝  原文:http://backbonetutorials.com/ 1. 为啥你需要Backbone.js? 我们知...
  • robertzhouxh
  • robertzhouxh
  • 2013-10-24 14:08
  • 9974

Backbone入门指南(一):什么是Backbone?

1. 前言   本文的目的,是帮助大家快速理解掌握Backbone的使用,但它并不是API,因此我不会将每一个方法都详细地描述,但是我会告诉你如何学习它们。   这是一篇稍稍较长的技术文章,因为我想将我所了解的东西尽可能详细地分享给大家。但它还不至于出版为一本书籍,因为Backbone其实非常简...
  • likun557
  • likun557
  • 2016-11-14 15:59
  • 6343

Backbone入门指南(七):Router和History (路由控制器)

10. Router和History (路由控制)   Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文中称Action)。   当我们开发一个单页应用时,常常会遇到这样两个问题:   ...
  • likun557
  • likun557
  • 2016-11-15 14:13
  • 1108

Backbone.js简单入门范例

原文地址:http://dmyz.org/archives/598 Backbone.js已经很古老了,在Angular.js大行其道的今天,我们公司居然还在用Backbone。。。【哭笑不得脸】 这篇文章写的非常浅显易懂,一步一步教你如何使用Backbone.js,特此转过来收...
  • u011326979
  • u011326979
  • 2016-07-13 14:22
  • 1334

适合初学者的require.js+backbone的例子

  • 2014-06-23 18:18
  • 512KB
  • 下载

BackBone API

翻译:一回日期:2011-8-16反馈:xianlihua$gmail.com [$ -> @]特别鸣谢:CSSer 本手册可自由转载,但须注明译者及来源,尊重他人劳动,共建和谐的学习与研究氛围,从你我做起。 简单术语翻译对照:散列表(hash) 模型(model) 视图(...
  • cony100
  • cony100
  • 2012-06-07 16:58
  • 3227

Backbone.js 的技巧和模式

Backbone.js是一个开源JavaScript“MV*”框架,在三年前它的第一次发布的时候就获得了显著的推动。尽管Backbone.js为Javascript应用程序提供了自己的结构,但它留下了大量根据开发者的需要而使用的设计模式和决策,并且当开发者们第一次使用Backbone.js开发的时候...
  • u013510614
  • u013510614
  • 2016-01-14 21:42
  • 572

【转】Backbone架构+流程图

学习web也有两个多月的时间了。从最开始的html、css、javascript到jquery、requireJs到上周末浅尝AngularJs,貌似接触的东西还是挺多的了 + 鉴于项目组用的backbone框架,it‘s time to 吃透backbone了哈。     &#...
  • mqy1023
  • mqy1023
  • 2016-05-31 23:59
  • 857
    个人资料
    • 访问:172826次
    • 积分:2510
    • 等级:
    • 排名:第17285名
    • 原创:81篇
    • 转载:39篇
    • 译文:4篇
    • 评论:12条
    博客专栏
    最新评论