Backbone.js 框架专题

什么是 Backbone.js？

Backbone.js 是一个轻量级的 JavaScript 框架，用于构建结构清晰、可维护的单页 Web 应用（SPA）。 它基于 MVC（Model-View-Controller）架构思想，提供模型（Model）、集合（Collection）、视图（View）和路由（Router）等核心组件。

Backbone 依赖于 Underscore.js（用于工具函数）和可选的 jQuery（用于 DOM 操作），整体代码精简，适合需要灵活控制结构的项目。

核心组件

• Model：管理数据和业务逻辑。
• Collection：管理一组 Model 实例。
• View：处理 UI 渲染和用户交互。
• Router：管理 URL 路由，实现前端导航。

简单示例

以下是一个使用 Backbone 创建待办事项（Todo）条目的基本示例：

// 定义 Model
var Todo = Backbone.Model.extend({
  defaults: { title: '新任务', completed: false }
});

// 定义 View
var TodoView = Backbone.View.extend({
  tagName: 'li',
  template: _.template('<%= title %>'),
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

// 使用
var todo = new Todo({ title: '学习 Backbone' });
var view = new TodoView({ model: todo });
$('body').append(view.render().el);

适用场景

Backbone 适合中小型项目或对框架侵入性要求较低的场景。由于其灵活性高、学习曲线平缓， 至今仍被许多遗留系统或追求极简架构的团队所采用。