Backbone架构+流程图

简介:

官网介绍


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方法,用于扩展原型属性和静态属性,创建自定义的视图、集合、视图、路由器类。


本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/archive/2012/08/18/2645377.html,如需转载请自行联系原作者

相关文章
|
11月前
|
uml
「业务架构」TOGAF建模:业务流程图
「业务架构」TOGAF建模:业务流程图
|
11月前
|
存储 数据可视化 测试技术
「数据架构」5分钟学会数据流程图:客户服务系统示例
「数据架构」5分钟学会数据流程图:客户服务系统示例
|
11月前
|
存储 数据可视化 测试技术
「数据架构」数据流程图示例-订餐系统
「数据架构」数据流程图示例-订餐系统
|
存储 程序员 uml
【程序员必备】绘制架构图,流程图神器推荐
好的图形可以帮我们更好的表达自己,帮我们理清逻辑
|
7天前
|
敏捷开发 监控 数据管理
构建高效微服务架构的五大关键策略
【4月更文挑战第20天】在当今软件开发领域,微服务架构已经成为一种流行的设计模式,它允许开发团队以灵活、可扩展的方式构建应用程序。本文将探讨构建高效微服务架构的五大关键策略,包括服务划分、通信机制、数据管理、安全性考虑以及监控与日志。这些策略对于确保系统的可靠性、可维护性和性能至关重要。
|
19天前
|
API 数据库 开发者
构建高效可靠的微服务架构:后端开发的新范式
【4月更文挑战第8天】 随着现代软件开发的复杂性日益增加,传统的单体应用架构面临着可扩展性、维护性和敏捷性的挑战。为了解决这些问题,微服务架构应运而生,并迅速成为后端开发领域的一股清流。本文将深入探讨微服务架构的设计原则、实施策略及其带来的优势与挑战,为后端开发者提供一种全新视角,以实现更加灵活、高效和稳定的系统构建。
23 0
|
7天前
|
消息中间件 监控 持续交付
构建高效微服务架构:后端开发的进阶之路
【4月更文挑战第20天】 随着现代软件开发的复杂性日益增加,传统的单体应用已难以满足快速迭代和灵活部署的需求。微服务架构作为一种新兴的分布式系统设计方式,以其独立部署、易于扩展和维护的特点,成为解决这一问题的关键。本文将深入探讨微服务的核心概念、设计原则以及在后端开发实践中如何构建一个高效的微服务架构。我们将从服务划分、通信机制、数据一致性、服务发现与注册等方面入手,提供一系列实用的策略和建议,帮助开发者优化后端系统的性能和可维护性。
|
18天前
|
Kubernetes 安全 Java
构建高效微服务架构:从理论到实践
【4月更文挑战第9天】 在当今快速迭代与竞争激烈的软件市场中,微服务架构以其灵活性、可扩展性及容错性,成为众多企业转型的首选。本文将深入探讨如何从零开始构建一个高效的微服务系统,覆盖从概念理解、设计原则、技术选型到部署维护的各个阶段。通过实际案例分析与最佳实践分享,旨在为后端工程师提供一套全面的微服务构建指南,帮助读者在面对复杂系统设计时能够做出明智的决策,并提升系统的可靠性与维护效率。
|
2天前
|
监控 测试技术 持续交付
探索现代微服务架构的最佳实践
【4月更文挑战第25天】 随着软件开发领域不断演进,微服务架构已成为设计灵活、可扩展且高度可维护系统的首选方案。本文将深入探讨构建和部署微服务时的关键最佳实践,涵盖从服务划分原则到持续集成/持续部署(CI/CD)的流程,再到监控与日志记录的策略。我们的目标是为开发者提供一套实用的指南,帮助他们在构建未来的应用程序时做出明智的架构选择,并确保这些系统能够快速响应市场和技术的变化。