Backbone.js 入门指南。

引言

本文档面向希望学习如何更好地使用 Backbone 来组织客户端代码的新手到中级开发者。

开发者常常对 Backbone.js 的整体作用感到困惑。

Backbone 是什么...我为什么要用它....它到底有什么用....？？

背景

传统上，页面加载完成后，所有数据都会从服务器推送到浏览器。JavaScript 在客户端的数据交互较少。如今，这些概念已经颠倒过来——客户端应用程序在需要时拉取服务器数据并渲染数据。

考虑一个典型的 ASP.NET MVC 风格的 Web 应用程序。我们将一些数据从控制器传递到视图，然后在浏览器中渲染。最终用户与这些数据交互，这时 Backbone 就派上用场了。这些框架可以帮助开发者将事物以正确的方式放到应有的位置，以便我们能够维护应用程序多年，并对其复杂性进行扩展，而不会造成混乱。

Backbone 允许我们使用 JavaScript 和 Ajax 创建用户体验，从而构建复杂的 UI。使用 Backbone 可以优雅地组织代码。

来自 backbone.js 的官方定义如下：

引用

Backbone.js 通过提供具有键值绑定和自定义事件的模型、具有丰富可枚举函数 API 的集合、具有声明式事件处理的视图，并将其全部通过 RESTful JSON 接口连接到您现有的 API，从而为 Web 应用程序提供结构。

SPA

单页应用 (SPA)：这是一个概念，而不是一个明确的定义。在整个过程中，页面不会重新加载，也不会将控制权转移到另一个页面。这种技术用于改善用户体验，并更快地提供内容。这种模式是进化过程的结果。最初，网页只是静态页面的集合。之后出现了服务器端概念，每个用户操作都会导致服务器端请求，从而重新加载整个页面。在这种模式下，用户会不断受到网络延迟的干扰，由于网页不断重新生成，实际性能会受到影响。之后，客户端脚本和 AJAX 的出现极大地提升了用户体验。SPA 是一种混合型的 Web 开发模式。大部分逻辑和代码都在客户端编写。

SPA 的优势

• 无需往返
• 一次性加载所有资源
• 丰富的用户体验
• 减少网络延迟
• 提高性能
• 例如：Gmail, Twitter

那么，使用 Backbone 的意义何在呢？

创建具有如此复杂 UI 的客户端应用程序是一项艰巨的任务。开发一个连贯、可读、结构化、可测试且可维护的客户端应用程序并不容易。如果不使用框架，最终只会一团糟。Backbone 能够处理这种复杂性，并降低维护代码的难度。

Backbone 的影响

如果我们只使用 JQuery，构建 SPA 或复杂的 UI 界面将变得极其困难。JavaScript 库很棒，但它们不提供任何代码结构，维护起来是一场噩梦，最终，我们的代码会变得与第一张图有些相似。:)

Backbone 为代码提供了适当的结构。它遵循一种客户端的 **MVC** 模式，使代码模块化。

通过使用 Backbone，可以完全通过 RESTful API 与服务器进行通信。如今，浏览器不再是唯一的客户端，还有各种移动设备、平板电脑等。网站需要兼容所有这些设备。Backbone 使开发者能够轻松构建此类应用程序，并且维护起来也很方便。

还有许多其他优点，可以在 这里 找到。

必备组件

在开始使用 Backbone 之前，开发者需要熟悉以下内容：

• 对 JavaScript 的基本了解
• HTML、CSS、Web 编程知识
• 使用 JQuery 进行 DOM 操作
• Firebug/WebKit - 调试工具

所需依赖

• Underscore.js - 这是一个为 JavaScript 提供函数式编程支持的库。Backbone 提供了许多用于操作集合的函数。
• JQuery/Zepto - 所有 DOM 操作都使用 JQuery 完成，所有 Ajax 调用也都通过它发出。Zepto 是 JQuery 的替代品。

Backbone 结构

Backbone 提供了一套工具，用于在客户端应用程序中引入结构。

Models - 它为应用程序提供数据，我们需要一个持久化的模型，它可以帮助我们编辑和更新模型。模型的最新状态可以保存在 Web 浏览器本地存储等地方，或者数据可以与数据库同步。一个 Model 可以用于多个 View。如果 Model 发生任何更改，可以根据需要触发事件。Backbone Model 的优点在于它不关心视图如何渲染。

var Person = Backbone.Model.extend({
     initialize : function(){
               console.log("Welcome to learning of backbone");
       }
});

var p = new Person();

Collection - 集合是模型的有序分组。它们从模型触发。它们也有自己的事件。集合依赖于模型。

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

var list = new PersonList();

View - View 与 DOM 交互。它处理来自模型、集合和 DOM 的事件。它主要用于显示模型数据以及使用的模板（如 underscore.js）。每当用户与元素交互时，所做的任何更改都由控制器处理，而不是视图。

var PersonView = Backbone.View.extend({
       collection : list,
       initialize : function() {
             console.log("An initialize is always called 
                          when a new object is created of the view");
        }
});

var pview = new PersonView();

Routing - 在 Backbone 中，路由器提供了一种将 URL（无论是哈希片段还是真实 URL）连接到应用程序部分的方法。您希望可书签、可共享、可后退的应用程序的任何部分都需要一个 URL。Route 会解析 URL 中 "#" 标签后的任何内容。

例如

 var personRouter= Backbone.Router.extend({
        routes: {
            "user/:id" : "getTodo", // matches http://demoapp.com/#user/1
            "*actions": "defaultRoute" // matches http://demoapp.com/#anything-here
        },
        getUser : function(){
            console.log("router for user");
        }
        defaultRoute: function(){
            console.log("default router");
        }
    });
    
    // Initiate the router
    var router = new personRouter;
   
    // Start Backbone history a necessary step for bookmarkable URL's
    Backbone.history.start();
});

关注点

开始使用 Backbone 非常容易和简单。Backbone 的优点在于它将数据渲染到 DOM 的方式以及它如何处理数据。它基于 RESTful 架构，并处理 JSON 数据。Backbone 是一个非常强大的 JavaScript 库，它能帮助我们得到一个长期可维护的代码。

编码愉快！！！

历史

• 2014年10月2日：初版