backbone简介_动力节点Java学院整理

Backbone.js 简介 - 动力节点Java学院整理

什么是 Backbone.js

Backbone.js是一个用于构建单页应用程序（Single Page Application）的JavaScript框架。它将应用程序的数据模型（Model）、用户界面（View）以及用户与之交互的程序逻辑（Controller）分离开来，并为它们提供了统一的界面。

Backbone.js 的优点

• 前后端分离：通过提供一套完整的框架来处理后台与前端之间的通信，Backbone.js允许你实现前后端分离的开发模式。
• 极简的API：Backbone.js 提供了一些简单的 API 来处理模型、视图和控制器等方面，因此非常容易上手。
• 轻量级：Backbone.js 在设计时非常注重的尺寸和计算效率，它所构造的单页应用程序非常快速，并且在内存占用方面也非常友好。

Backbone.js 的基本组成

• Model：用于存储数据，与后台交互。同时，还可以监听数据变化，以实现 MVC 模式中的 Controller。
• View：视图层，负责显示 Model 中的数据，并与用户进行交互。
• Collection：模型的集合类，提供了类似SQL的数据查询功能。
• Router：前端路由机制，实现了 URL 和 Controller 的映射。

Backbone.js 的应用示例

示例1 - TODO List

下面是一个简单的 TODO List 应用的实现代码：

var Todo = Backbone.Model.extend({});

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

var TodoView = Backbone.View.extend({
    tagName: 'li',
    render: function() {
        this.$el.html(this.model.get('title'));
        return this;
    }
});

var TodosView = Backbone.View.extend({
    tagName: 'ul',
    render: function() {
        this.collection.each(function(todo) {
            var todoView = new TodoView({model: todo});
            this.$el.append(todoView.render().el);
        }, this);
        return this;
    }
});

var todosCollection = new TodosCollection([
    {title: 'Todo1'},
    {title: 'Todo2'}
]);

var todosView = new TodosView({collection: todosCollection});
$('#app').html(todosView.render().el);

示例2 - 联系人管理应用

下面是一个简单的联系人管理应用的实现代码：

var Contact = Backbone.Model.extend({
    defaults: {
        name: '',
        email: '',
        phone: ''
    },
    idAttribute: '_id'
});

var ContactsCollection = Backbone.Collection.extend({
    url: '/contacts/',
    model: Contact
});

var ContactView = Backbone.View.extend({
    tagName: 'tr',
    render: function() {
        this.$el.html(
            '<td>' + this.model.get('name') + '</td>' +
            '<td>' + this.model.get('email') + '</td>' +
            '<td>' + this.model.get('phone') + '</td>'
        );
        return this;
    }
});

var ContactsView = Backbone.View.extend({
    el: '#contactsList',
    initialize: function() {
        this.collection.fetch();
        this.render();
        this.listenTo(this.collection, 'sync', this.render);
    },
    render: function() {
        this.$el.find('tbody').html('');
        this.collection.each(function(contact) {
            var contactView = new ContactView({model: contact});
            this.$el.find('tbody').append(contactView.render().el);
        }, this);
    }
});

var contactsCollection = new ContactsCollection();
var contactsView = new ContactsView({collection: contactsCollection});

以上两个示例展示了 Backbone.js 的基本使用方式，你可以在其中了解到如何创建模型、视图以及集合，并将它们组合在一起构造出功能完整、易于维护的应用程序。