backbone简介_动力节点Java学院整理

简介

Web 应用程序越来越关注于前端,使用客户端脚本与 Ajax 进行交互。由于 JavaScript 应用程序越来越复杂,如果没有合适的工具和模式,那么 JavaScript 代码的高效编写、非重复性和可维护性方面会面临挑战。模型-视图-控制器 (MVC) 是一个常见模式,可用于服务器端开发以生成有组织以及易维护的代码。MVC 支持将数据(比如通常用于 Ajax 交互的 JavaScript Object Notation (JSON) 对象)从表示层或从页面的文档对象模型 (document object model, DOM) 中分离出来,也可适用于客户端开发。

Backbone(也称为 Backbone.js)是由 Jeremy Ashkenas 创建的一个轻量级库,可用于创建 MVC 类应用程序。Backbone:

  1. 强制依赖于 Underscore.js,Underscore.js 是一个实用型库
  2. 非强制依赖于 jQuery/Zepto
  3. 根据模型的变更自动更新应用程序的 HTML,有助于代码维护
  4. 促进客户端模板使用,避免了在 JavaScript 中嵌入 HTML 代码

模型、视图、集合和路由器是 Backbone 框架中的主要组件。在 Backbone 中,模型会存储通过 RESTful JSON 接口从服务器检索到的数据。模型与视图密切关联,负责为特定 UI 组件渲染 HTML 并处理元素上触发的事件,这也是视图本身的一部分。

SPI 应用程序:Backbone.Router 和 Backbone.history

含有大量 Ajax 交互的应用程序越来越像那些无页面刷新的应用程序。这些应用程序常常试图限制与单个页面的交互。该 SPI 方法提高了效率和速度,并使整个应用程序变得更灵敏。状态概念代替了页面概念。散列 (Hash) 片段被用于识别一个特定状态。散列片段 是 URL 中散列标签 (#) 后的那部分,是该类应用程序的关键元素。清单 1 显示了一个 SPI 应用程序使用两个不同的散列片段产生的两个不同状态。

清单 1. SPI 或 Ajax 应用程序中的两个不同状态

http://www.example.com/#/state1

http://www.example.com/#/state2

Backbone 提供一个称为路由器(版本 0.5 前称之为控制器)的组件来路由客户端状态。路由器可以扩展 Backbone.Router 函数,且包含一个散列映射(routes 属性)将状态与活动关联起来。当应用程序达到相关状态时,会触发一个特定活动。清单2 展示了一个 Backbone 路由器示例。

清单 2. Backbone.Router 示例:routers.js

App.Routers.Main = Backbone.Router.extend({

  // Hash maps for routes
  routes : {
   "" : "index",
   "/teams" : "getTeams",
   "/teams/:country" : "getTeamsCountry",
   "/teams/:country/:name : "getTeam"
   "*error" : "fourOfour"
  },

  index: function(){
    // Homepage
  },

  getTeams: function() {
    // List all teams
  },
  getTeamsCountry: function(country) {
    // Get list of teams for specific country
  },
  getTeam: function(country, name) {
    // Get the teams for a specific country and with a specific name
  },
  fourOfour: function(error) {
    // 404 page
  }
});

创建的每个状态可以为书签。当 URL 碰到类似下面情况时,会调用这 5 个活动(index、getTeams、getTeamsCountry、getTeamCountry 和 fourOfour)。

  1. http://www.example.com 触发 index()
  2. http://www.example.com/#/teams 触发 getTeams()
  3. http://www.example.com/#/teams/country1 触发 getTeamsCountry() 传递 country1 作为参数
  4. http://www.example.com/#/teams/country1/team1 触发 getTeamCountry() 传递 country1 和 team1 作为参数
  5. http://www.example.com/#/something 触发 fourOfour() 以作 * (星号)使用。

要启动 Backbone,先实例化页面加载的路由器,并通过指令 Backbone.history.start() 方法监视散列片段中的任何变更,如 清单 3 所示。

清单 3. 应用程序实例化(使用 jQuery)

$(function(){
  var router = new App.Routers.Main();
  Backbone.history.start({pushState : true});
})

当实例化路由器时,会生成 Backbone.history 对象;它将自动引用 Backbone.History 函数。Backbone.History 负责匹配路由和router 对象中定义的活动。start() 方法触发后,将创建 Backbone.history 的 fragment 属性。它包含散列片段的值。该序列在根据状态次序管理浏览器历史方面十分有用。用户如果想要返回前一状态,单击浏览器的返回按钮。

在 清单 3 的示例中,通过一个启用 HTML5 特性 pushState 的配置调用 start() 方法。对于那些支持 pushState 的浏览器,Backbone 将监视 popstate 事件以触发一个新状态。如果浏览器不能支持 HTML5 特性,那么 onhashchange 活动会被监视。如果浏览器不支持该事件,轮询技术将监视 URL 散列片段的任何更改。

模型和集合

模型和集合是 Backbone.js 的重要组件,模型将数据(通常是来自服务器的数据)存储在键值对中。要创建一个模型,需要扩展Backbone.Model,如 清单 4 所示。

清单 4. Backbone.Model 创建

App.Models.Team = Backbone.Model.extend({
  defaults : {
    // default attributes
  }
  // Domain-specific methods go here
});

App.Models.Team 函数是一个新模型函数,但是必须创建一个实例才能在应用程序中使用特定模型,如 清单 5 所示。

清单 5. 模型实例化

var team1 = new App.Models.Team();

现在,变量 team1 有一个名为 cid 的字段名,这是一个客户端标识符,形式为 "c" 再加上一个数字(例如,c0、c1、c2)。模型是通过存储在散列映射中的属性来定义的。属性可以在实例化时进行设置,或者使用 set() 方法设置。属性值可通过 get() 方法检索。清单 6 显示了如何通过实例化或 get()/set() 方法设置和获取属性。

清单 6. 模型实例化和 get/set 方法

// "name" attribute is set into the model
var team1 = new App.Models.Team({
  name : "name1"
});
console.log(team1.get("name")); // prints "name1"

// "name" attribute is set with a new value
team1.set({
  name : "name2"
});
console.log(team1.get("name")); //prints "name2"

当使用 JavaScript 对象时,使用 set() 方法创建或者设置属性值的原因并不是显而易见的。其中一个原因是为了更新此值,如 清单 7 所示。

清单 7. 以错误的方法更新属性

team1.attributes.name = "name2";

为了避免 使用 清单 7 中的代码,使用 set() 是改变模型状态并触发其变更事件的唯一方法。使用 set() 提升封装原则。清单 8 展示了如何将一个事件处理程序绑到发生变更的事件中。该事件处理程序包含一个 alert,在调用 set() 方法时会被触发,如 清单 6 所示。但是,在使用 清单 7 中的代码时不触发 alert。

清单 8. 更改 App.Models.Team 模型中的事件处理程序

App.Models.Team = Backbone.Model.extend({
  initialize : function(){
    this.bind("change", this.changed);
  },
  changed : function(){
    alert("changed");
  }
});

Backbone 的另一个优势是易于通过 Ajax 交互与服务器进行通信。在模型上调用一个 save() 方法会通过 REST JSON API 异步将当前状态保存到服务器。清单 9 展示了此示例。

清单 9. 在模型对象上调用 save 方法

barca.save();

save() 函数将在后台委托给 Backbone.sync,这是负责发出 RESTful 请求的组件,默认使用 jQuery 函数 $.ajax()。由于调用了 REST 风格架构,每个 Create、Read、Update 或 Delete (CRUD) 活动均会与各种不同类型的 HTTP 请求(POST、GET、PUT 和 DELETE)相关联。首先保存模型对象,使用一个 POST 请求,创建一个标识符 ID,其后,尝试发送对象到服务器,使用一个 PUT 请求。

当需要从服务器检索一个模型时,请求一个 Read 活动并使用一个 Ajax GET 请求。这类请求使用 fetch() 方法。要确定导入模型数据或者从中取出模型数据的服务器的位置:

  1. 如果模型属于一个 collection,那么集合对象的 url 属性将是该位置的基础,并且该模型 ID(不是 cid)会被附加以构成完整的 URL。
  2. 如果模型不是在一个集合中,那么该模型的 urlroot 属性被用作该位置的基础

清单 10 显示了如何获取一个模型。

清单 10. 模型对象的 Fetch() 方法

var teamNew = new App.Models.Team({
  urlRoot : '/specialTeams'
});
teamNew.save(); // returns model's ID equal to '222'
teamNew.fetch(); // Ajax request to '/specialTeams/222'

validate() 方法被用于验证模型,如 清单 11 所示。需要重写 validate() 方法(在调用 set() 方法时触发)来包含模型的有效逻辑。传递给该函数的惟一参数是一个 JavaScript 对象,该对象包含了 set() 方法更新的属性,以便验证那些属性的条件。如果从 validate() 方法中没有返回任何内容,那么验证成功。如果返回一个错误消息,那么验证失败,将无法执行 set() 方法。

清单 11. 模型的验证方法

App.Models.Team = Backbone.Model.extend({
  validate : function(attributes){
    if (!!attributes && attributes.name === "teamX") {
      // Error message returned if the value of the "name"
      // attribute is equal to "teamX"
      return "Error!";
    }
  }
}

一组模型被分组到到集合中,这个集合是 Backbone.Collection 的扩展函数。集合具有一个模型属性的特性,定义了组成该集合的模型类型。使用 add()/remove() 方法可以将一个模型添加和移动到集合中。清单 12 显示了如何创建和填充一个集合。

清单 12. Backbone 集合

App.Collections.Teams = Backbone.Collection.extend({
  model : App.Models.Team
});
var teams = new App.Collections.Teams();

// Add e model to the collection object "teams"
teams.add(team1);
teams.add(new App.Models.Team({
  name : "Team B"
}));
teams.add(new App.Models.Team());
teams.remove(team1);

console.log(teams.length) // prints 2

创建的 teams 集合中包含一个含有两个模型的阵列,存储在模型属性中。尽管,在典型 Ajax 应用程序中,会从服务器动态(不是人工)填充该集合。fetch() 方法可以帮助完成此项任务,如 清单 13 所示,并将数据存储到模型阵列中。

清单 13. Fetch() 方法

teams.fetch();

Backbone 中的集合拥有一个 url 属性,定义了使用 Ajax GET 请求从服务器取出 JSON 数据的位置,如 清单 14 所示。

清单 14. 集合的 url 属性和 fetch() 方法

teams.url = '/getTeams';
teams.fetch(); //Ajax GET Request to '/getTeams'

Fetch() 方法属于异步调用,因此,在等待服务器响应时,应用程序不会中止。在一些情况下,要操作来自服务器的原始数据,可以使用集合的 parse() 方法。正如 清单 15 所示。

清单 15. parse() 方法

App.Collections.Teams = Backbone.Collection.extend({
  model : App.Models.Team,
  parse : function(data) {
    // 'data' contains the raw JSON object
    console.log(data);
  }
});

集合提供的另一个有趣的方法是 reset(),它允许将多个模型设置到一个集合中。reset() 方法可以非常方便地将数据引导到集合中,比如页面加载,来避免用户等待异步调用返回。

视图和客户端模板

Backbone 中的视图与典型 MVC 方法的视图不一样。Backbone 视图可以扩展 Backbone.View 函数并显示模型中存储的数据。一个视图提供一个由 el 属性定义的 HTML 元素。该属性可以是由 tagName、className 和 id 属性相组合而构成的,或者是通过其本身的 el 值形成的。清单 16 显示了使用这不同方法组合 el 属性的两个不同视图。

清单 16. Backbone 视图样例

// In the following view, el value is 'UL.team-element'
App.Views.Teams = Backbone.View.extend({
  el : 'UL.team-list'
});
// In the following view, el value is 'div.team-element'
App.Views.Team = Backbone.View.extend({
  className : '.team-element',
  tagName : 'div'
});

如果 el、tagName、className 和 id 属性为空,那么会默认将一个空的 DIV 分配给 el。

如上所述,一个视图必须与一个模型相关联。该模型属性也很有用,如 清单 17 所示。App.View.Team 视图被绑定到一个App.Models.Team 模型实例。

清单 17. Backbone 视图中的模型属性

// In the following view, el value is 'UL.team-element'
App.Views.Team = Backbone.View.extend({
  ...
  model : new App.Models.Team
});

要渲染数据(这是视图的主要目的),重写 render() 方法和逻辑来显示 DOM 元素(由 el 属性引用的)中的模型属性。清单 18 展示了一个 render 方法如何更新用户界面的样例。

清单 18. Render() 方法

App.Views.Team = Backbone.View.extend({
  className : '.team-element',
  tagName : 'div',
  model : new App.Models.Team
  render : function() {
    // Render the 'name' attribute of the model associated
    // inside the DOM element referred by 'el'
    $(this.el).html("<span>" + this.model.get("name") + "</span>");
  }
});

Backbone 也可以促进客户端模板的使用,这就使得我们没有必要在 JavaScript 中嵌入 HTML 代码,如 清单 18 所示。(使用模板,模板会封装视图中常见函数;只指定此函数一次即可。)Backbone 在 underscore.js(一个必须的库)中提供一个模板引擎,尽管没有必要使用该模板引擎。清单 19 中的实例使用 underscore.js HTML 模板。

清单 19. HTML 含有模板

<script id="teamTemplate" type="text/template">
  <%= name %>
</script>

清单 20 显示了另一个使用 underscore.js HTML 模板的样例。

清单 20. 使用 _.template() 函数的视图

App.Views.Team = Backbone.View.extend({
  className : '.team-element',
  tagName : 'div',
  model : new App.Models.Team
  render : function() {
    // Compile the template
    var compiledTemplate = _.template($('#teamTemplate').html());
    // Model attributes loaded into the template. Template is
    // appended to the DOM element referred by the el attribute
    $(this.el).html(compiledTemplate(this.model.toJSON()));
  }
});

Backbone 中最有用且最有趣的一个功能是将 render() 方法绑定到模型的变更事件中,如 清单 21 所示。

清单 21. Render() 方法绑定到模型变更事件

// In the following view, el value is 'div.team-element'
App.Views.Team = Backbone.View.extend({
  model : new App.Models.Team,
  initialize : function() {
    this.model.bind("change", this.render, this);
  }
})

上述代码将 render() 方法绑定到一个模型的变更事件中。当模型发生更改时,会自动触发 render() 方法,从而节省数行代码。从 Backbone 0.5.2 开始,bind() 方法就开始接受使用第三个参数来定义回调函数的对象。(在上述示例中,当前视图是回调函数 render() 中的对象)。在 Backbone 0.5.2 之前的版本中,必须使用 underscore.js 中的 bindAll 函数,如 清单 22 所示。

清单 22. _.bindAll() usage

// In the following view, el value is 'div.team-element'
App.Views.Team = Backbone.View.extend({
  initialize : function() {
    _.bindAll(this, "render");
    this.model.bind("change", this.render);
  }
})

Backbone 视图中,通过视图中的 DOM 对象监听事件是比较容易的。对于实现这一点,events 属性很是方便的,如 清单 23 所示。

清单 23. 事件属性

App.Views.Team = Backbone.View.extend({
  className : '.team-element',
  tagName : 'div',
  events : {
    "click a.more" : "moreInfo"
  },
  moreInfo : function(e){
     // Logic here
  }
})

events 属性的每个项均由两部分构成:

  1. 左边部分指定事件类型和触发事件的选择器。
  2. 右边部分定义了事件处理函数。

在 清单 23 中,当用户通过 DIV 中的类 more 以及类 team-element 点击链接时,会调用函数 moreInfo

结束语

MVC 模式可以为大型 JavaScript 应用程序提供所需的组织化代码。Backbone 是一个 JavaScript MVC 框架,它属于轻量级框架,且易于学习掌握。模型、视图、集合和路由器从不同的层面划分了应用程序,并负责处理几种特定事件。处理 Ajax 应用程序或者 SPI 应用程序时,Backbone 可能是最好的解决方案。

(0)

相关推荐

  • Backbone.js的Hello World程序实例

    新建一个api.php文件,内容:   复制代码 代码如下: header('Content-Type: application/json; charset=utf-8'); die(json_encode(array('name'=>'tom'))); 新建一个index.html文件.(backbone基于jquery.underscore,我们使用Mustache来做模板解析,当然用其他的haml.jade,或者underscore里面的模板也都是可以) 内容: 复制代码 代码如下: <

  • Javascript MVC框架Backbone.js详解

    随着JavaScript程序变得越来越复杂,往往需要一个团队协作开发,这时代码的模块化和组织规范就变得异常重要了.MVC模式就是代码组织的经典模式. (--MVC介绍.) (1)Model Model表示数据层,也就是程序需要的数据源,通常使用JSON格式表示. (2)View View表示表现层,也就是用户界面,对于网页来说,就是用户看到的网页HTML代码. (3)Controller Controller表示控制层,用来对原始数据(Model)进行加工,传送到View. 由于网页编程不同于客

  • Backbone.js中的集合详解

    Backbone.js的集合只是一个简单的有序集的模型.通过适应模型和集合,我们可以避免数据处理逻辑放到了我们的视图层.此外,模型和集合还提供了便利的与后端一起工作的方法,当数据发生变化时,可以自动化地标记Backbone.js视图.这样,它可以用于如下的情况: 复制代码 代码如下: Model: Animal, Collection: Zoo 通常情况下你的集合只适应一种模型,但模型本身并不局限于集合的类型. 复制代码 代码如下: Model: person, Collection: Offi

  • Backbone.js的一些使用技巧

    自从3年前Backbone.js发布第一版以来,Backbone.js就成为一个流行的开源JavaScript "MV*"框架,并获得人们的青睐.尽管Backbone.js给JavaScript应用提供了框架,但是它仍然给开发者留有很多设计模式供选择,不管怎样,当开发者第一次使用Backbone.js时还会产生很多普遍的问题的. 因此,在这篇文章中,我们将介绍很多不同的设计模式供你在Backbone.js应用中使用,而且我们也会一同来看看对于开发者来说会产生很多普遍的有关性能伸缩的问题

  • 轻量级javascript 框架Backbone使用指南

    Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户端和服务器间的数据传输,从而实现了更快加速的Web页面更新. 能心静下来学习了,以前以为Backbone 是一座高山用起来很难,结果只是学了2天就有一些新的,实在让人开心. 我整理了一下整个BackBone的学习记录在我的GIT里面,大部分事件都有例子并且有详细的注解和解释,结合require.js

  • backbone简介_动力节点Java学院整理

    简介 Web 应用程序越来越关注于前端,使用客户端脚本与 Ajax 进行交互.由于 JavaScript 应用程序越来越复杂,如果没有合适的工具和模式,那么 JavaScript 代码的高效编写.非重复性和可维护性方面会面临挑战.模型-视图-控制器 (MVC) 是一个常见模式,可用于服务器端开发以生成有组织以及易维护的代码.MVC 支持将数据(比如通常用于 Ajax 交互的 JavaScript Object Notation (JSON) 对象)从表示层或从页面的文档对象模型 (documen

  • Nginx简介_动力节点Java学院整理

    1.什么是Nginx Nginx来自俄罗斯的Igor Sysoev在为Rambler Media(http://www.rambler.ru/)工作期间,使用C语言开发了Nginx.Nginx作为Web服务器,一直为俄罗斯著名的门户网站Rambler Media提供着出色.稳定的服务. Igor Sysoev将Nginx的代码开源,并且赋予其最自由的2-clause BSD-like license许可证.由于Nginx使用基于事件驱动的架构能够并发处理百万级别的TCP连接,高度模块化的设计和自

  • Java Map简介_动力节点Java学院整理

    Map简介 将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值.此接口取代 Dictionary 类,后者完全是一个抽象类,而不是一个接口. Map 接口提供三种collection 视图,允许以键集.值集或键-值映射关系集的形式查看某个映射的内容.映射顺序 定义为迭代器在映射的 collection 视图上返回其元素的顺序.某些映射实现可明确保证其顺序,如 TreeMap 类:另一些映射实现则不保证顺序,如HashMap 类. 注:将可变对象用作映射键时必须格外小心.当对

  • Java中Object toString方法简介_动力节点Java学院整理

    一.Object类介绍  Object类在Java里面是一个比较特殊的类,JAVA只支持单继承,子类只能从一个父类来继承,如果父类又是从另外一个父类继承过来,那他也只能有一个父类,父类再有父类,那也只能有一个,JAVA为了组织这个类组织得比较方便,它提供了一个最根上的类,相当于所有的类都是从这个类继承,这个类就叫Object.所以Object类是所有JAVA类的根基类,是所有JAVA类的老祖宗.所有的类,不管是谁,都是从它继承下来的. 二.toString方法介绍  一个字符串和另外一种类型连接

  • Java Set简介_动力节点Java学院整理

    1. 概述   Java 中的Set和正好和数学上直观的集(set)的概念是相同的.Set最大的特性就是不允许在其中存放的元素是重复的.根据这个特点,我们就可以使用Set 这个接口来实现前面提到的关于商品种类的存储需求.Set 可以被用来过滤在其他集合中存放的元素,从而得到一个没有包含重复新的集合. 2. 常用方法 按照定义,Set 接口继承 Collection 接口,而且它不允许集合中存在重复项.所有原始方法都是现成的,没有引入新方法.具体的 Set 实现类依赖添加的对象的 equals()

  • RandomAccessFile简介_动力节点Java学院整理

    RandomAccessFile RandomAccessFile 是随机访问文件(包括读/写)的类.它支持对文件随机访问的读取和写入,即我们可以从指定的位置读取/写入文件数据. 需要注意的是,RandomAccessFile 虽然属于java.io包,但它不是InputStream或者OutputStream的子类:它也不同于FileInputStream和FileOutputStream. FileInputStream 只能对文件进行读操作,而FileOutputStream 只能对文件进

  • Java字符编码简介_动力节点Java学院整理

    1. 概述 本文主要包括以下几个方面:编码基本知识,Java,系统软件,url,工具软件等. 在下面的描述中,将以"中文"两个字为例,经查表可以知道其GB2312编码是"d6d0 cec4",Unicode编码为"4e2d 6587",UTF编码就是"e4b8ad e69687".注意,这两个字没有iso8859-1编码,但可以用iso8859-1编码来"表示". 2. 编码基本知识 最早的编码是iso88

  • Java7之forkjoin简介_动力节点Java学院整理

    Java7引入了Fork Join的概念,来更好的支持并行运算.顾名思义,Fork Join类似与流程语言的分支,合并的概念.也就是说Java7 SE原生支持了在一个主线程中开辟多个分支线程,并且根据分支线程的逻辑来等待(或者不等待)汇集,当然你也可以fork的某一个分支线程中再开辟Fork Join,这也就可以实现Fork Join的嵌套. 有两个核心类ForkJoinPool和ForkJoinTask. ForkJoinPool实现了ExecutorService接口,起到线程池的作用.所以

  • Java List简介_动力节点Java学院整理

    Java中可变数组的原理就是不断的创建新的数组,将原数组加到新的数组中,下文对Java List用法做了详解.  List:元素是有序的(怎么存的就怎么取出来,顺序不会乱),元素可以重复(角标1上有个3,角标2上也可以有个3)因为该集合体系有索引  ArrayList:底层的数据结构使用的是数组结构(数组长度是可变的百分之五十延长)(特点是查询很快,但增删较慢)线程不同步  LinkedList:底层的数据结构是链表结构(特点是查询较慢,增删较快)  Vector:底层是数组数据结构 线

  • jQuery Autocomplete简介_动力节点Java学院整理

    jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大.最灵活的Autocomplete,它支持本地的Array/JSON数组.通过ajax请求的Array/JSON数组.JSONP.以及Function(最灵活)等方式来获取数据. 支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ["bjpowernode","动力节点"

随机推荐