我对Backbone的认识

前言

印象中Backbone一开始是自称（或者被称为）框架的。昨天细看官方文档发现它自称为类库了。其实我感觉Backbone既不是类库也不是框架。你说它是类库吧，可它关注的是‘关注点分离’而不是一些具体的功能。你说它是框架吧，可他好像只给出了一些约束其他什么功能都没提供，你用它之前需要自己做的事情用了之后还是需要自己做，没有减轻开发人员的工作量（甚至有增加工作量）。我把它看做一系列约束规范，类似编码规约之类的东西。但它确实是一个js文件，里面是实实在在的代码，官方也自称为类库。那就把它当做一个类库吧，一个为前端架构提供了一系列约束规范的类库。

为什么要有Backbone

一个类库的诞生必然有其原因：要解决某一类问题。那Backbone要解决什么问题呢。它要把数据的查询、操作从DOM操作中分离出来。因为之前的前端编程里有大量的代码结构混乱，事件监听、DOM操作、业务逻辑处理、数据的查询和操作杂乱的混合在一起，导致应用扩展困难、Bug频出、不易维护。所以 Jeremy Ashkenas 就写了Backbone来在代码层面做出了一些约束规范：数据的相关操作要和业务逻辑、DOM操作分离，这两者之间通过事件通讯。这样做使一方（如数据相关代码）的修改对另一方的影响很小，便于以后的扩展和维护。

Backbone提供了什么

如前所属，Backbone把数据操作相关的东西提炼到了两个类里面：Model 和 Collection。把DOM操作和业务逻辑相关的东西提炼到了View类和Route类里面。还提供了一个事件系统，用于对象之间通信。

Events

Backbone构建了一个事件对象 Backbone.Events， 提供自定义事件的绑定和触发等功能。可以通过_.extend(obj, Backbone.Events)， 来把事件对象的能力扩展到任何对象上，使任意对象都可以绑定事件、触发事件。
事件对象主要API有：

• on: 绑定事件到对象上。例如:object.on(event, callback, [context])
• off: 解除绑定。例如： object.off([event], [callback], [context])
• once: 类似on，绑定一次，即事件触发一次后就自动解除绑定。用法同on
• trigger: 触发一个事件。例如： object.trigger(event, [*args])
• listenTo: 在对象A上监听对象B的事件。例如 : objectA.listenTo(objectB, event, callback)

以上示例中的API参数中 []内的参数与为可选参数，一面的示例也是如此。这里只列出了主要API，具体请查看官方文档

Model and Collection

Model和Collection是Backbone的核心类，Backbone提供的工具函数基本都在这两个类上。其中Model对应具体的数据，Collection对应这些model的一个集合。
Model提供了get，set，clear，clone等本地操作的方法，还有fetch，save， sync等和服务端进行通信的方法，以及想对应的Model状态变化的事件。还有验证等功能（验证规则需要自己写）。
Collection提供了遍历、筛选、排序、添加、删除等功能及对应的事件。还有和服务端通信的方法。

View and Router

View提供了绑定事件、监听Model变化、渲染页面的接口（自己实现或借助其他工具库）。

Router提供了路径和相应“控制器”绑定的功能，且兼容不支持HTML5 History API的浏览器（通过hash实现）。

如何使用Backbone

Backbone依赖于underscore和jQuery（可用zepto或其他类jQuery的库代替）。使用时要先引入jQuery和underscore，再引入Backbone。

下面以官网提供的Todo List为例来看具体怎么使用
首先定义Todo类，这个类对应每条要做的事的记录的数据，拥有title、order、done三个属性和一个改变状态（是否已完成）的方法。

// Todo Model
// ----------

// Our basic **Todo** model has `title`, `order`, and `done` attributes.
var Todo = Backbone.Model.extend({

// Default attributes for the todo item.
// defaults可以是一个对象字面量或者返回对象字面量的方法。用以在初始化Todo实例时为实例设置默认属性。
defaults: function() {
    return {
      title: "empty todo...",
      order: Todos.nextOrder(),
      done: false
    };
  },

// Toggle the `done` state of this todo item.
toggle: function() {
    this.save({done: !this.get("done")});
  }

});

然后定义TodoList类，这个类对应是记录列表集合，里面的数据就是每一个Todo实例。

// Todo Collection
// ---------------

// The collection of todos is backed by *localStorage* instead of a remote
// server.
var TodoList = Backbone.Collection.extend({

  // Reference to this collection's model.
 // 定义这个集合存储什么类型的数据
  model: Todo,

  // Save all of the todo items under the `"todos-backbone"` namespace.
  localStorage: new Backbone.LocalStorage("todos-backbone"),

  // Filter down the list of all todo items that are finished.
  // 通过Collection提供的where筛选方法获取已完成的记录
  done: function() {
    return this.where({done: true});
  },

  // Filter down the list to only todo items that are still not finished.
  // 通过Collection提供的where筛选方法获取未完成的记录
  remaining: function() {
    return this.where({done: false});
  },

  // We keep the Todos in sequential order, despite being saved by unordered
  // GUID in the database. This generates the next order number for new items.
  // 通过Collection提供的last接口获取最后一个model，在最后一个model的order基础上加1，作为新加model的order
  nextOrder: function() {
    if (!this.length) return 1;
    return this.last().get('order') + 1;
  },

  // Todos are sorted by their original insertion order.
  // 指定Collection按model的 order 属性排序，也可传入一个比较方法类似Array.sort 
  comparator: 'order'
});
// Create our global collection of **Todos**.
var Todos = new TodoList;

然后就是用于交互的类了，TodoView对应每条记录的展示

// Todo Item View
// --------------

// The DOM element for a todo item...
var TodoView = Backbone.View.extend({

//... is a list tag.
// 指定这个类要渲染的HTML元素
tagName:  "li",

// Cache the template function for a single item.
// 借助underscore的模板引擎
template: _.template($('#item-template').html()),

// The DOM events specific to an item.
// 绑定事件及处理函数。前面是事件类型，后面是选择器
events: {
  "click .toggle"   : "toggleDone",
  "dblclick .view"  : "edit",
  "click a.destroy" : "clear",
  "keypress .edit"  : "updateOnEnter",
  "blur .edit"      : "close"
},

// The TodoView listens for changes to its model, re-rendering. Since there's
// a one-to-one correspondence between a **Todo** and a **TodoView** in this
// app, we set a direct reference on the model for convenience.
// initialize 会在初始化时被调用，监听model的change和destroy事件
initialize: function() {
  this.listenTo(this.model, 'change', this.render);
  this.listenTo(this.model, 'destroy', this.remove);
},

// Re-render the titles of the todo item.
// change事件处理函数，利用模板渲染组件
render: function() {
  this.$el.html(this.template(this.model.toJSON()));
  this.$el.toggleClass('done', this.model.get('done'));
  this.input = this.$('.edit');
  return this;
},

// Toggle the `"done"` state of the model.
toggleDone: function() {
  this.model.toggle();
},

// Switch this view into `"editing"` mode, displaying the input field.
edit: function() {
  this.$el.addClass("editing");
  this.input.focus();
},

// Close the `"editing"` mode, saving changes to the todo.
close: function() {
  var value = this.input.val();
  if (!value) {
    this.clear();
  } else {
    this.model.save({title: value});
    this.$el.removeClass("editing");
  }
},

// If you hit `enter`, we're through editing the item.
updateOnEnter: function(e) {
  if (e.keyCode == 13) this.close();
},

// Remove the item, destroy the model.
clear: function() {
  this.model.destroy();
}

});

最后是定义应用程序视图类，并实例化

// The Application
// ---------------

// Our overall **AppView** is the top-level piece of UI.
var AppView = Backbone.View.extend({

// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
// 指定应用的父容器
el: $("#todoapp"),

// Our template for the line of statistics at the bottom of the app.
//  保存模板文件
statsTemplate: _.template($('#stats-template').html()),

// Delegated events for creating new items, and clearing completed ones.
// 绑定事件
events: {
  "keypress #new-todo":  "createOnEnter",
  "click #clear-completed": "clearCompleted",
  "click #toggle-all": "toggleAllComplete"
},

// At initialization we bind to the relevant events on the `Todos`
// collection, when items are added or changed. Kick things off by
// loading any preexisting todos that might be saved in *localStorage*.
// 初始化，获取相应元素，并设置监听Collection的事件
initialize: function() {

  this.input = this.$("#new-todo");
  this.allCheckbox = this.$("#toggle-all")[0];

  this.listenTo(Todos, 'add', this.addOne);
  this.listenTo(Todos, 'reset', this.addAll);
  this.listenTo(Todos, 'all', this.render);

  this.footer = this.$('footer');
  this.main = $('#main');

  // 获取以保存的数据
  Todos.fetch();
},

// Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change.
render: function() {
  var done = Todos.done().length;
  var remaining = Todos.remaining().length;

  if (Todos.length) {
    this.main.show();
    this.footer.show();
    this.footer.html(this.statsTemplate({done: done, remaining: remaining}));
  } else {
    this.main.hide();
    this.footer.hide();
  }

  this.allCheckbox.checked = !remaining;
},

// Add a single todo item to the list by creating a view for it, and
// appending its element to the `<ul>`.
addOne: function(todo) {
  var view = new TodoView({model: todo});
  this.$("#todo-list").append(view.render().el);
},

// Add all items in the **Todos** collection at once.
addAll: function() {
  Todos.each(this.addOne, this);
},

// If you hit return in the main input field, create new **Todo** model,
// persisting it to *localStorage*.
createOnEnter: function(e) {
  if (e.keyCode != 13) return;
  if (!this.input.val()) return;

  Todos.create({title: this.input.val()});
  this.input.val('');
},

// Clear all done todo items, destroying their models.
clearCompleted: function() {
  _.invoke(Todos.done(), 'destroy');
  return false;
},

toggleAllComplete: function () {
  var done = this.allCheckbox.checked;
  Todos.each(function (todo) { todo.save({'done': done}); });
}

});

// Finally, we kick things off by creating the **App**.
var App = new AppView;

Backbone是如何实现的

Backbone的最根本原理就是以订阅/发布者模式为基础，通过事件进行通讯。已达到数据操作和UI操作之间解耦的目的。Backbone源码很少，带注释的才1600多行，想深入了解的建议直接看源码 github地址。

总结

就像文章一开始就申明的，Backbone只是提供了一些列约束规范和一些数据操作的接口。作为框架显的单薄，虽然确实解决了一部分的问题，却因为要解决这些问题而写了更多的代码。例如前面的Todo List。所以这篇文章虽然是介绍Backbone的却不赞成选用Backbone。推荐读者了解下angular,Ember,Meteor等现代前端mvvm框架。后续会写一些Angular相关文章