30分钟搞定Backbone.js：从0到1构建你的第一个ToDo应用

你是否还在为JavaScript应用缺乏结构化而烦恼？尝试了多个框架却找不到适合小项目的轻量级解决方案？本文将带你通过官方示例todos，在30分钟内掌握Backbone.js的核心概念，亲手构建一个功能完整的待办事项应用。读完本文你将学会：

• 如何使用Model（模型）管理应用数据
• 如何通过Collection（集合）组织数据集合
• 如何用View（视图）实现用户界面交互
• 如何利用LocalStorage实现数据持久化

Backbone.js简介

Backbone.js是一个轻量级的JavaScript前端框架，它通过提供Model（模型）、View（视图）、Collection（集合）和Event（事件）等组件，为JS应用提供了清晰的结构。正如README.md中所述，Backbone的设计理念是"Give your JS App some Backbone with Models, Views, Collections, and Events"。

Backbone.js的核心优势在于：

• 轻量级设计，仅依赖Underscore.js和jQuery
• 灵活的架构，不强制特定的代码组织方式
• 与RESTful API天然契合的数据同步机制
• 事件驱动的编程模型，简化组件通信

环境准备

获取项目代码

首先通过以下命令克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/ba/backbone

项目结构概览

本教程将基于项目中的todos示例进行讲解，该示例位于examples/todos/目录下，主要包含以下文件：

文件路径	说明
examples/todos/index.html	应用入口HTML文件
examples/todos/todos.js	应用核心逻辑代码
examples/todos/todos.css	应用样式表
examples/todos/destroy.png	删除按钮图标

依赖引入

打开index.html，可以看到Backbone应用需要引入的核心依赖：

<script src="../../test/vendor/jquery.js"></script>
<script src="../../test/vendor/underscore.js"></script>
<script src="../../backbone.js"></script>
<script src="../backbone.localStorage.js"></script>

其中：

• jQuery用于DOM操作和AJAX请求
• Underscore.js提供工具函数和模板引擎
• Backbone.js是框架核心
• backbone.localStorage.js提供本地存储支持

核心概念实战

Model：数据模型

在 todos.js中，首先定义了Todo模型：

var Todo = Backbone.Model.extend({
  // 默认属性
  defaults: function() {
    return {
      title: "empty todo...",
      order: Todos.nextOrder(),
      done: false
    };
  },
  
  // 切换任务完成状态
  toggle: function() {
    this.save({done: !this.get("done")});
  }
});

Model负责管理应用数据，包括：

• 定义数据结构（defaults）
• 提供数据操作方法（toggle）
• 处理数据验证和持久化

Collection：数据集合

TodoList集合用于管理多个Todo模型：

var TodoList = Backbone.Collection.extend({
  model: Todo,
  // 使用localStorage存储数据
  localStorage: new Backbone.LocalStorage("todos-backbone"),
  
  // 筛选已完成任务
  done: function() {
    return this.where({done: true});
  },
  
  // 筛选未完成任务
  remaining: function() {
    return this.where({done: false});
  },
  
  // 生成下一个排序序号
  nextOrder: function() {
    if (!this.length) return 1;
    return this.last().get('order') + 1;
  },
  
  // 按序号排序
  comparator: 'order'
});

// 创建全局Todos集合实例
var Todos = new TodoList;

Collection提供了丰富的API用于数据集合操作，如添加/删除模型、筛选、排序等。通过localStorage适配器，我们可以轻松实现数据的本地持久化。

View：视图组件

Backbone中的View负责页面渲染和用户交互。在示例中包含两个主要视图：TodoView和AppView。

TodoView：单个任务项视图

var TodoView = Backbone.View.extend({
  tagName: "li",
  template: _.template($('#item-template').html()),
  
  // 事件绑定
  events: {
    "click .toggle": "toggleDone",
    "dblclick .view": "edit",
    "click a.destroy": "clear",
    "keypress .edit": "updateOnEnter",
    "blur .edit": "close"
  },
  
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'destroy', this.remove);
  },
  
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    this.$el.toggleClass('done', this.model.get('done'));
    this.input = this.$('.edit');
    return this;
  },
  
  // 其他方法...
});

每个TodoView对应一个任务项，负责：

• 渲染任务项HTML
• 绑定用户交互事件
• 响应模型数据变化

AppView：应用主视图

var AppView = Backbone.View.extend({
  el: $("#todoapp"),
  statsTemplate: _.template($('#stats-template').html()),
  
  events: {
    "keypress #new-todo": "createOnEnter",
    "click #clear-completed": "clearCompleted",
    "click #toggle-all": "toggleAllComplete"
  },
  
  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);
    
    Todos.fetch();
  },
  
  // 其他方法...
});

AppView是整个应用的控制器，负责：

• 管理全局UI元素
• 处理应用级别的用户交互
• 监听集合事件并更新视图
• 从LocalStorage加载初始数据

模板系统

示例中使用了Underscore.js的模板引擎，在index.html中定义了两个模板：

<script type="text/template" id="item-template">
  <div class="view">
    <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
    <label><%- title %></label>
    <a class="destroy"></a>
  </div>
  <input class="edit" type="text" value="<%- title %>" />
</script>

<script type="text/template" id="stats-template">
  <% if (done) { %>
    <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
  <% } %>
  <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
</script>

模板系统允许我们将HTML结构与JavaScript逻辑分离，提高代码的可维护性。

应用功能演示

完成上述代码后，我们的ToDo应用已经具备了完整功能：

主要功能包括：

• 添加新任务：在输入框中输入内容并按回车
• 标记完成：点击任务前的复选框
• 编辑任务：双击任务文本进行编辑
• 删除任务：点击任务右侧的删除图标
• 清除已完成：点击"Clear completed"按钮
• 全选/取消全选：点击"Mark all as complete"

所有数据会保存在浏览器的LocalStorage中，即使关闭页面后重新打开，数据也不会丢失。

总结与扩展

通过本文的学习，你已经掌握了Backbone.js的核心概念和使用方法。Backbone.js虽然简单，但它的设计思想影响了许多现代前端框架。官方文档docs/backbone.html提供了更详细的API参考，建议进一步学习以下内容：

• Router：实现前端路由和页面导航
• Sync：与后端服务器进行数据同步
• Events：自定义事件系统的高级用法

如果你想深入了解Backbone.js的实现原理，可以阅读源代码backbone.js和backbone-min.js。

最后，推荐你尝试扩展这个ToDo应用，例如添加任务分类、优先级设置或截止日期功能，巩固所学知识。

本文基于Backbone.js官方示例构建，完整代码可在examples/todos/目录下找到。