Backbone——数据驱动UI的js开发模式

转载请注明原文地址：https://www.cnblogs.com/ygj0930/p/10826074.html

 

一：Backbone是什么——JS的MVC框架

Backbone基于underscore，依赖jquery或zepto，它是一款web前端开发的javascript MVC框架，使我们可以像高级语言一样定义类、类属性及方法，更好的组织代码并按框架提供的数据逻辑分离方法，减少代码混乱。

 

二：Backbone有什么——数据、视图

1）backbone的3大核心模块

模型：Backbone.Model，一个数据模型

集合：Backbone.Collection，数据模型的一个集合

视图：Backbone.View，数据处理，注意它并非我们传统认知中的页面模版

  

模型、集合负责保存 、管理数据，视图负责响应数据变化并呈现。

模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESRful JSON接口连接到应用程序。

 

2）模型

Model这个模块可以让我们用来定义一些纯数据管理的类，大部分情况下，这些类就是我们所要开发的功能对应的业务实体。

用Model定义的类能够为我们提供直接修改和获取业务实体数据属性的功能，也能够通过简单明了的api直接与服务器进行数据同步，比如前面用到的fetch，save，还有没用到的destroy等；

通过Backbone，你可以将数据呈现为 Model, 你可以对模型进行创建，验证和销毁，以及将它保存到服务器。

 

3）视图

View这个模块可以让我们来封装页面中某个独立完整部分的UI功能，它往往会与Model模块进行关联，并且配合模板一起完成UI的更新，通过监听Model实例的变化来重新渲染html，通过自身注册的事件将UI的变化同步到Model实例，它就像一个控制器，同步数据与界面UI的实时变化。

 

任何时候只要UI事件引起模型内的属性变化，模型会触发"change"事件，所有显示模型数据的 Views 会接收到该事件的通知，继而视图重新渲染。

你无需查找DOM来搜索指定id的元素去手动更新HTML，当模型改变了，视图便会自动变化。

 

Backbone的底层还有一个sync模块，封装了数据同步时异步请求管理的功能：

 

backbone的Model模块提供的fetch, save, destroy方法，和Collection模块的fetch方法，都会发送异步请求，与后端服务进行交互。

然后所有这些有异步请求操作的方法，都依赖于sync这个模块，来完成请求头和请求数据的封装，以及请求回调的处理。

 

以View为核心进行web前端开发的思想：

在Backbone里，一个View通常都由以下内容组成：

el（代表web页面上的一块区域）

template（代表模板）

model/collection（代表要渲染进模板的数据）

除此之外就是各种页面元素的事件绑定和处理以及监听其他View或Model/Collection的事件。

 

一个Backbone的View实例就代表了web页面上的一块区域，它全权负责这块区域，包括如何渲染它，如何处理这块区域内的事件响应，根据其他对象的事件来更改这块区域的渲染，等等等等。

一个完整的web页面恰恰可以看成是一个个的view组成的，所以，View可以说是使用Backbone开发绝对的核心。

 

4）集合

Collection这个模块可以指定存储某种Model的多个实例。

它提供有简单的api比如fetch，create方法来直接同步服务器的数据。

如果说Model跟View的关系，是把数据与UI进行解耦，那么Collection跟View，就是把数据列表与UI进行解耦.

 

Model实例仅仅是作用于单条数据的功能，而Collection实例可以作用于多条数据的功能，就跟Model可以被直接关联到View一样，Collection实例也能直接通过collection属性，在创建View实例的时候，传递给View；

在Collection内的model元素发生增删改的时候，通知View实例去重新渲染html；在用户与View实例发生交互的时候，View主动去调整Collection里面的内容；View层充当控制器的作用，实时同步UI与Collection之间的变化。

 

Collection的作用，确实跟Model的作用差不多，理解它的方法，完全可以类比Model。

 

三：Backbone的事件体系——Backbone.Events

Model,View以及Collection三个模块都继承了Events，使得它们的实例都拥有直接进行事件管理的能力。

Events模块除了让Model等模块的实例拥有强大的自定义事件管理，同时它还提供了一套内置的事件体系，这套事件体系其实就是前面数据驱动的关键：

当View层的实例，与之相关联的Model实例和Collection实例触发了这些事件，都可以直接通知View层实例执行相应的事件回调，我们所要做的只需要在View层实例初始化的时候，注册好跟它关联的Model实例或Collection实例的事件监听即可。

 

前面这些能够解释为什么当Model或Collection发生变化的时候，为什么能够引起View层的变化。但是还有一个方面没有说清楚，就是由于用户与浏览器交互导致的View层的变化，如何同步到数据。

其实，跟平常使用jquery绑定各类键鼠事件，然后在事件监听里面直接去更新关联的Model或Collection实例没有区别：为VIew实例注册事件，并将事件回调设置为自定义的事件处理函数即可。

 

 

四： Backbone官方文档摘录

1、Backbone.Events（事件)

Events 是一个可以融合到任何对象的模块, 给予 对象绑定和触发自定义事件的能力。

 

on方法：object.on(event, callback, [context]) 别名: bind

我们约定使用冒号来为事件添加 命名空间 俗成地使用冒号来命名某个特定属性的变化："poll:start", 或 "change:selection"

 

listenTo方法：object.listenTo(other, event, callback) 
让 object 监听 另一个（other）对象上的一个特定事件。

 

 

2、Backbone.Model（模型）

Models（模型）是包括数据交互及与其相关的大量逻辑： 转换、验证、计算属性和访问控制。

可以用特定的方法扩展 Backbone.Model去创建你自己的Model，重写或添加逻辑。

 

extend方法：Backbone.Model.extend(properties, [classProperties]) 
要创建自己的 Model 类，你可以扩展 Backbone.Model 并提供实例 properties(属性) ， 以及可选的可以直接注册到构造函数的classProperties(类属性)。

extend 可以正确的设置原型链，因此通过 extend 创建的子类 (subclasses) 也可以被深度扩展。

父类函数的调用：Javascript没有提供一种直接调用父类的方式，如果你想调用父对象的实现，这时需要明确的在子类同名函数中调用原型链中 上层定义的同名函数：

Backbone.Model.prototype.父类函数.apply(this, arguments);

 

constructor / initialize方法：new Model([attributes], [options]) 
当创建model实例时，可以传入 属性 (attributes)初始值，这些值会被 set （设置）到 model。 如果定义了 initialize 函数，该函数会在model创建后执行。

 

get方法：model.get(attribute) 
从当前model中获取当前属性(attributes)值，比如： note.get("title")

 

set方法：model.set(attributes, [options]) 
向model设置一个或多个hash属性(attributes)。如果任何一个属性改变了model的状态，在不传入 {silent: true} 选项参数的情况下，会触发 "change" 事件，更改特定属性的事件也会触发。

 

defaults属性：model.defaults or model.defaults() 
defaults 散列（或函数）用于为模型指定默认属性。 创建模型实例时，任何未指定的属性会被设置为其默认值。

 

sync方法：model.sync(method, model, [options]) 
使用 Backbone.sync 可以将一个模型的状态持续发送到服务器，可以自定义行为覆盖【可以自定义数据传输与响应逻辑】。

 

save方法：model.save([attributes], [options]) 
通过委托给Backbone.sync，保存模型到数据库（或替代持久化层）。 如果验证成功，返回jqXHR，否则为 false。

 

destroy方法：model.destroy([options]) 
通过委托给Backbone.sync，保存模型到数据库（或替代持久化层）。 通过委托一个HTTP DELETE请求给Backbone.sync破坏服务器上的模型。 返回一个jqXHR对象， 或者如果模型isNew，那么返回false。

 

validate方法：model.validate(attributes, options) 
这种方法是未定义的， 如果您有任何可以在JavaScript中执行的代码 并且我们鼓励你用你自定义验证逻辑覆盖它 。 默认情况下validate在save之前调用， 但如果传递了 {validate:true}，也可以在set之前调用。

 

parse方法：model.parse(response, options) 
parse 会在通过 fetch 从服务器返回模型数据

 

3、Backbone.Collection（集合）

 集合是模型的有序组合，我们可以在集合上绑定 "change" 事件，从而当集合中的模型发生变化时fetch（获得）通知，集合也可以监听 "add" 和 "remove" 事件， 从服务器更新，并能使用 Underscore.js 提供的集合操作方法。

 

extend方法：Backbone.Collection.extend(properties, [classProperties]) 
通过扩展 Backbone.Collection 创建一个自定义的 Collection 类。

 

model属性：collection.model 
覆盖此属性来指定集合中包含的元素属于什么model的实例。

 

其他集合操作函数：参照 Underscore集合操作API：

 

4、Backbone.Router（路由）

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

 

extend方法：Backbone.Router.extend(properties, [classProperties]) 
创建一个自定义的路由类。

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // help路由动作的响应函数
    "search/:query":        "search",  //search路由动作的响应函数
    "search/:query/p:page": "search"   //search路由动作的响应函数  },

  help: function() {
    在路由响应函数中进行跳转。
  },

  search: function(query, page) {
    ...
  }

});

其他路由跳转、新增方法：

 

5、Backbone.history

History 作为全局路由服务用于处理 hashchange 事件或 pushState，匹配适合的路由，并触发回调函数。 我们不需要自己去做这些事情 — 如果使用带有键值对的 路由，Backbone.history 会被自动创建。

start Backbone.history.start([options]) 
当所有的 Routers 创建并设置完毕，调用 Backbone.history.start() 开始监控 hashchange 事件并分配路由。

 

6、Backbone.sync（同步）

Backbone.sync 是 Backbone 每次向服务器读取或保存模型时都要调用执行的函数。

默认情况下，它使用 jQuery.ajax 方法发送 RESTful json 请求，并且返回一个 jqXHR。 如果想采用不同的持久化方案，比如 WebSockets, XML, 或 Local Storage，我们可以重载该函数。

Backbone.sync 的语法为 sync(method, model, [options])。

• method – CRUD 方法 ("create", "read", "update", or "delete")
• model – 要被保存的模型（或要被读取的集合）
• options – 成功和失败的回调函数，以及所有 jQuery 请求支持的选项

 

7、Backbone.View（视图）

模型变化时， 每一个都可以独立地进行更新， 而不必重新绘制该页面。

我们再也不必钻进 JSON 对象中，查找 DOM 元素，手动更新 HTML 了，通过绑定视图的 render函数到模型的 "change" 事件 — 模型数据会即时的显示在 UI 中。

 

extend方法： Backbone.View.extend(properties, [classProperties]) 
开始创建自定义的视图类。 通常我们需要重载 render 函数，声明 events， 以及通过 tagName, className, 或 id 为视图指定根元素。

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },

  render: function() {
    ...
  }

});

 

constructor / initialize方法：new View([options]) 
有几个特殊的选项， 如果传入，则直接注册到视图中去： model, collection, el, id, className, tagName, attributes 和 events。 如果视图定义了一个initialize初始化函数， 首先创建视图时，它会立刻被调用。 如果希望创建一个指向 DOM 中已存在的元素的视图，传入该元素作为选项：new View({el: existingElement})。

new DocumentRow({
  model: doc,//创建视图实例，将模型实例作为参数传递进去作为视图数据
  id: "document-row-" + doc.id 
});

 

el属性：view.el 
所有的视图都拥有一个 DOM 元素（el 属性），即使该元素仍未插入页面中去。

 

$el属性：view.$el 
一个view实例对应的jQuery对象，可以通过该对象调用jQuery相关api，进行dom操作。例如：

view.$el.show();

listView.$el.append(itemView.el);

 

$ (jQuery)方法： view.$(selector) 
如果页面中引入了 jQuery.js，每个view实例都将拥有 $ 函数，可以在视图元素查询作用域内运行。

 

template属性：view.template([data])

我们可以使用underscore定义的模版，方便地渲染我们的view视图。

 template: _.template(一个template定义)

render方法：view.render() 
render 默认实现是没有操作的。 重载本函数可以实现用模型数据渲染视图的template模板，然后插入到本view实例在dom中的位置。在 render 函数的末尾 return this 以开启链式调用。

render: function() {
    this.$el.html(this.template(this.model.attributes));//
    return this;
  }

上面代码解释：

this.$el：获取本view实例对应的jQuery对象进行dom操作

this.$el.html:操作dom元素的值

this.template(this.model.attributes)：使用本view实例的model的数据，渲染本view实例的template