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

2026-02-05 04:56:17作者：尤辰城Agatha

你是否还在为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>