Backbone.js 入门专题

Backbone.js 是一个轻量级的 JavaScript 库，用于构建结构化的 Web 应用程序。它基于 MVC（Model-View-Controller）设计模式，适用于需要客户端路由、模型管理与视图同步的单页应用（SPA）。

核心组件

Backbone 主要包含以下四个核心模块：

• Model：用于管理数据和业务逻辑。
• Collection：一组 Model 的有序集合，支持增删改查。
• View：负责 UI 渲染，并监听用户交互事件。
• Router：处理 URL 路由，实现页面导航。

简单示例

以下是一个基本的 Backbone 应用片段：

// 定义模型
var Task = Backbone.Model.extend({
  defaults: { title: '未命名任务', done: false }
});

// 定义集合
var TaskList = Backbone.Collection.extend({
  model: Task
});

// 定义视图
var TaskView = Backbone.View.extend({
  tagName: 'li',
  template: _.template('<%= title %> <% if (done) { %>(已完成)<% } %>'),
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

适用场景

Backbone 适合以下场景：

• 需要轻量级架构的小型到中型 Web 应用
• 已有 jQuery 项目希望引入结构化管理
• 对性能和包体积敏感的项目