30分钟上手Backbone.js：从Todo应用到企业级数据管理
项目地址: https://gitcode.com/gh_mirrors/ba/backbone 你还在为前端数据管理烦恼吗？当页面状态复杂到一定程度，简单的jQuery操作已无法应对数据与视图的同步问题。本文将通过实战案例，带你掌握Backbone.js的核心功能，学会用Model-View-Collection架构构建可维护的Web应用。读完本文，你将能够：理解前端MVC架构、实现数据持久化、掌握事件驱动开发模式，并能独立开发类似Todo的单页应用。
Backbone.js核心架构解析
Backbone.js是一个轻量级的前端MVC（Model-View-Controller）框架，通过模型(Model)、视图(View)、集合(Collection) 和路由(Router) 四大组件，帮助开发者构建结构化的JavaScript应用。其核心设计思想是将数据与视图分离，通过事件系统实现组件间通信。
核心组件功能
- Model（模型）：管理应用数据，提供数据验证、持久化和属性变更事件。对应文件：backbone.js
- Collection（集合）：管理模型集合，提供排序、筛选和批量操作功能。
- View（视图）：负责页面渲染和用户交互，通过监听模型事件更新DOM。
- Router（路由）：管理URL状态，实现无刷新页面导航。
实战：构建Todo应用
以项目中的todos示例为基础，我们将逐步解析Backbone.js的实际应用。这个示例完整实现了任务的添加、标记完成、删除和统计功能，所有数据通过localStorage持久化存储。
1. 定义数据模型（Model）
首先创建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")});
}
});
这段代码定义了一个具有标题(title)、顺序(order)和完成状态(done)的Todo模型，并实现了toggle方法用于切换完成状态。模型的save方法会自动触发localStorage同步。
2. 创建集合（Collection）
使用Collection管理多个Todo模型，提供筛选和排序功能：
var TodoList = Backbone.Collection.extend({
model: Todo,
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'
});
var Todos = new TodoList;
集合通过localStorage适配器实现数据持久化，自动处理模型的保存和加载。done()和remaining()方法分别返回已完成和未完成的任务，nextOrder()确保新任务按顺序添加。
3. 实现视图（View）
视图负责页面渲染和用户交互，分为Todo项视图和应用主视图：
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;
},
// 其他方法实现...
});
视图通过events属性绑定DOM事件，initialize方法设置模型事件监听，当模型数据变化时自动重新渲染。这种数据驱动的设计使视图与数据保持同步。
4. 应用入口（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();
},
// 其他方法实现...
});
var App = new AppView;
主视图在初始化时加载本地存储的数据(Todos.fetch())，并监听集合事件以更新UI。createOnEnter方法处理回车键添加新任务，toggleAllComplete实现全选/取消全选功能。
从示例到企业级应用
Todo应用展示了Backbone.js的基础用法，而在实际企业开发中，我们通常需要与后端API集成。Backbone.sync方法提供了与服务器通信的接口，只需配置模型的url属性即可：
var Customer = Backbone.Model.extend({
urlRoot: '/api/customers',
validate: function(attrs) {
if (!attrs.name) return "姓名不能为空";
}
});
var customer = new Customer({name: "张三", age: 30});
customer.save(); // 发送POST请求到/api/customers
Backbone.Model的save()、fetch()和destroy()方法会自动发起AJAX请求，与服务器进行数据交换。结合Collection的url属性，可以轻松实现数据列表的加载和保存。
项目资源与扩展学习
- 官方文档：docs/backbone.html
- 本地存储适配器：examples/backbone.localStorage.js
- 测试用例：test/model.js、test/collection.js
- 路由示例：可以基于test/router.js实现复杂的页面导航
Backbone.js虽然轻量（仅1.6KB minified + gzipped），却提供了构建大型应用所需的核心架构。通过本文介绍的Model-View-Collection模式，你可以构建出数据与视图分离、易于维护的前端应用。无论是企业内部系统还是面向用户的产品，Backbone.js都能帮助你保持代码的清晰结构和良好可扩展性。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
