Backbone.js 指南

Backbone.js 是一个轻量级的 JavaScript 框架，用于构建单页应用程序（SPA）。它提供了模型（Model）、视图（View）和集合（Collection）的基本结构，使得开发者可以更高效地管理数据和界面。

简介

Backbone.js 的核心思想是将数据模型（Model）与视图（View）分离，通过事件监听来更新视图。这种模式使得代码更加模块化，易于维护和扩展。

特点

模型-视图-控制器（MVC）模式：Backbone.js 严格遵循 MVC 模式，将数据模型、视图和控制器分离，使得代码结构清晰。
事件监听：Backbone.js 使用事件监听来更新视图，使得数据变化能够实时反映到界面上。
轻量级：Backbone.js 的核心文件大小不到 10KB，非常适合构建单页应用程序。

安装

要在项目中使用 Backbone.js，首先需要将其引入到 HTML 文件中。可以通过以下方式引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>

基本用法

模型（Model）

模型是数据的载体，它包含数据的属性和方法。以下是一个简单的模型示例：

var Person = Backbone.Model.extend({
  defaults: {
    name: '',
    age: 0
  }
});

var person = new Person({ name: 'John', age: 25 });
console.log(person.get('name')); // 输出：John

视图（View）

视图负责渲染模型数据，并处理用户交互。以下是一个简单的视图示例：

var PersonView = Backbone.View.extend({
  template: _.template('<h1><%= name %></h1><p><%= age %> years old</p>'),
  initialize: function() {
    this.model.on('change', this.render, this);
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
  }
});

var personView = new PersonView({ model: person });
$('#container').html(personView.render().el);

集合（Collection）

集合是模型的集合，它提供了对模型集合的操作，如添加、删除和排序等。以下是一个简单的集合示例：

var People = Backbone.Collection.extend({
  model: Person
});

var people = new People([{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]);
console.log(people.length); // 输出：2

扩展阅读

更多关于 Backbone.js 的信息，可以访问 Backbone.js 官方文档。