轻量级javascript 框架Backbone使用指南

1. Backbone概述

Backbone是一个轻量级的javascript框架，可用于开发单页Web应用程序。它提供了一组处理网页数据和用户界面的关键组件，包括Models、Views、Collections和Routers。使用Backbone，开发者可以将应用程序中的业务逻辑分解为一个个可重用的组件，从而使开发更加轻松和高效。

2. 安装

使用Backbone有两种方式：手动下载或使用CDN。

手动下载：

你可以从官方网站 (http://backbonejs.org/) 或 GitHub (https://github.com/jashkenas/backbone) 上下载最新版本的源代码。

使用CDN：

也可以在网页中直接引入CDN链接：

<script src="https://cdn.bootcss.com/backbone.js/1.3.3/backbone-min.js"></script>

3. Backbone核心组件介绍

3.1 Models

Model是Backbone中的一项重要组件，它用于处理应用程序中的数据逻辑，并提供了一些方便的方法进行数据操作，比如设置和获取属性值、触发事件等。

以下是一个Model的基本结构：

var Model = Backbone.Model.extend({
    defaults: {
        title: 'Default title'
    }
});

var modelInstance = new Model();

在这个例子中，我们定义了一个Model类，并设置了默认属性title。然后我们创建一个新的modelInstance对象，它将自动继承Model类的所有属性和方法。

3.2 Views

Backbone中的View组件用于处理应用程序中的用户界面逻辑，并将页面元素与Model和Collection绑定。Views分成两种：单个页面(Views)和多个相似页面(Lists)。

以下是一个简单的View结构：

var MyView = Backbone.View.extend({
    el: "#container",
    initialize: function() {
        this.render();
    },
    render: function() {
        this.$el.html('Hello world!');
    }
});

在这个例子中，我们定义了一个View类，并设置el属性来指定它所控制的DOM元素。然后，我们在initialize方法中调用render方法来更新DOM的内容。

3.3 Collections

Collection是Backbone中处理一组Model的组件，它提供了一些方便的方法操作Model数据集，比如添加、删除和查找Model等。

以下是一个简单的Collection结构：

var MyCollection = Backbone.Collection.extend({
    model: Model
});

var collectionInstance = new MyCollection();

在这个例子中，我们定义了一个MyCollection类，并设置它包含的所有Model类型为Model。然后，我们创建了一个collectionInstance对象，它将自动继承MyCollection类的所有属性和方法。

3.4 Routers

Router是Backbone中处理路由功能的组件，它用于将URL转换为应用程序中的操作或是对应的视图。

以下是一个简单的Router结构：

var AppRouter = Backbone.Router.extend({
    routes: {
        "": "index",
        "page/:id": "showPage"
    },
    index: function() {
        console.log('This is the index page.');
    },
    showPage: function(id) {
        console.log('This is page ' + id + '.');
    }
});

var appRouterInstance = new AppRouter();
Backbone.history.start(); // 开始监视URL的变化

在这个例子中，我们定义了一个Route类，并设置了两个路由规则：对于空白URL，调用index方法；对于"page/:id"的URL，调用showPage方法。

4. 示例

4.1 示例1：Todo List

Todo List是一个常见的任务清单应用程序，以下是一个使用Backbone实现的Todo List应用程序。

var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  },
  toggle: function() {
    this.set('completed', !this.get('completed'));
  }
});

var TodoList = Backbone.Collection.extend({
  model: Todo
});

var TodoView = Backbone.View.extend({
  tagName: 'li',
  events: {
    'click .toggle': 'toggleCompleted'
  },
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
  },
  render: function() {
    var template = _.template($('#item-template').html());
    this.$el.html(template(this.model.toJSON()));
    this.$el.toggleClass('completed', this.model.get('completed'));
    return this;
  },
  toggleCompleted: function() {
    this.model.toggle();
  }
});

var TodosView = Backbone.View.extend({
  el: '#todoapp',
  initialize: function() {
    this.listenTo(this.collection, 'add', this.renderTodo);
    this.render();
  },
  render: function() {
    var template = _.template($('#app-template').html());
    this.$el.html(template());
    this.$list = this.$('#todo-list');
    return this;
  },
  renderTodo: function(todo) {
    var view = new TodoView({model: todo});
    this.$list.append(view.render().el);
  },
});

var todos = new TodoList();
todos.add([
  {title: 'Learn JavaScript'},
  {title: 'Learn Backbone'},
  {title: 'Learn Underscore'}
]);

var todosView = new TodosView({collection: todos});

4.2 示例2：邮件应用程序

以下是一个使用Backbone实现的邮件应用程序。

// 邮件Model
var Email = Backbone.Model.extend({
    defaults: {
        sender: '',
        receiver: '',
        subject: '',
        content: '',
        date: new Date().toDateString(),
        unread: true
    }
});

// 邮件集合
var EmailList = Backbone.Collection.extend({
    model: Email
});

// 邮件列表View
var EmailListView = Backbone.View.extend({
    el: '.inbox-list',
    initialize: function() {
        this.listenTo(this.collection, 'add', this.render);
        this.render();
    },
    render: function() {
        var template = _.template($('#inbox-list-template').html());
        this.$el.html(template());
        this.collection.forEach(this.renderEmailItem, this);
        return this;
    },
    renderEmailItem: function(email) {
        var template = _.template($('#inbox-item-template').html());
        this.$('.inbox-item-list').append(template(email.toJSON()));
    }
});


// 邮件详细View
var EmailDetailView = Backbone.View.extend({
    el: '.inbox-detail',
    initialize: function() {
        this.listenTo(this.collection, 'change', this.render);
        this.render();
    },
    render: function() {
        var selectedEmail = this.collection.findWhere({'selected': true});
        if (!selectedEmail) {
            this.$el.html('');
            return;
        }
        var template = _.template($('#inbox-detail-template').html());
        this.$el.html(template(selectedEmail.toJSON()));
        return this;
    }
});

var emails = new EmailList([
    {sender: 'John', receiver: 'Mike', subject: 'Hello', content: 'Hi Mike, how are you?'},
    {sender: 'Peter', receiver: 'Mike', subject: 'Meeting', content: 'Hi Mike, let\'s have a meeting tomorrow.'}
]);

var emailListView = new EmailListView({collection: emails});
var emailDetailView = new EmailDetailView({collection: emails});

5. 总结

本文介绍了Backbone的基本概念和核心组件，同时给出了两个使用Backbone实现的例子，你可以通过实际手动操作代码来更好的理解Backbone的使用。Backbone是一个非常优秀的javascript框架，但并不是十全十美的，对于更复杂的应用程序，你可能需要使用更加完善的框架来实现。