前言
印象中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依赖于和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 `
- `.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多行,想深入了解的建议直接看源码 。
总结
就像文章一开始就申明的,Backbone只是提供了一些列约束规范和一些数据操作的接口。作为框架显的单薄,虽然确实解决了一部分的问题,却因为要解决这些问题而写了更多的代码。例如前面的Todo List。所以这篇文章虽然是介绍Backbone的却不赞成选用Backbone。推荐读者了解下,,等现代前端mvvm框架。后续会写一些Angular相关文章