Backbone.js系列教程四:Backbone全面介绍

Backbone的原理

Backbone的初衷在于单页面应用程序中添加架构,尤其是在创造DocumentCloud应 用程序的过程中,以避免重复性的DOM交叉以及DOM中用于保持UI同步的数据发生混乱。Backbone通过一套构造函数来完成这个步骤,于是就形成了 模型、集合与视图对象,目的在于组织应用程序的数据、逻辑和显示。一旦这些对象被具现化,它们彼此之间就存在特殊的关系,共同保证了应用程序的模块化、松 耦合性(利用event系统沟通)、可扩展性。

Backbone提供应用程序架构,还能帮助构建SPAs

除了Backbone.Model()Backbone.Collection()、and Backbone.View()构造函数(即the meat)以外,Backbone还包含以下功能,用于构建SPAsRESTful JSON API数据保存:

  • 提供路由器逻辑(即Backbone.Router),因此当URL变化的时候会引发某些具体功能;
  • 提供路由器历史逻辑(即Backbone.History),因此当用户点击浏览器后退或前进按钮的时候能保证路径正确。请注意,这是一个单页面应用程序,不包含传统URLs;
  • 提供同步逻辑(即Backbone.Sync),作用是面向服务器读取和存储数据;
  • 提供事件系统(即Backbone.Event),使用自定义事件和事件监听器来实现models、views、collections之间的沟通;
  • 提供JavaScript功能库(即Underscore.js 或者 Lo-Dash.js)。

在深刻了解modelscollectionsviews之前,请先弄明白上述这些帮助功能。实际上,这也是本教程着重讲述的知识点之一。

Backbone所依赖的条件

对于Backbone文档而言必不可少的是使用函数式编程实用程序库,Underscore.jsLo-Dash.js都行。不必纠结哪一个更好,果断选择其一来用就是了,如果不用的话Backbone就不能正常工作。你实在拿不定主意的话,我告诉你用Lo-Dash.js

除了Underscore.jsLo-Dash.js程序库之外,Backbone还需依赖json2.js,以及jQuery、ZeptoEnder三者之一(任何模仿jQuery API的都能工作)。如果浏览器不包含这些程序库或者不支持window.JSON,则Backbone.Router()、Backbone.View()、Backbone.History()、Backbone.Sync()都不能正常工作。就是说如果没有这些程序库的支持,Backbone中的模型和集合都只能起到部分作用。然而这类情况很少见。我认为绝大部分时候,程序库都包含在Backbone.js中的(取决于你需要什么浏览器支持)。

下例HTML文件展示的是Backbone依赖的具体表现形式:


  1. <!DOCTYPE html>
  2. <html
    lang="en">
  3. <body>
  4. <!-- 函数式编程实用程序库 -->
  5. <script
    src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.underscore.js"></script>
  6. <!-- DOM & XHR效用 -->
  7. <script
    src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  8. <!-- 老式浏览器不支持window.JSON的情况 -->
  9. <script
    src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
  10. <!-- Backbone.js -->
  11. <script
    src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
  12. </body>
  13. </html>

 通常情况下(但非必要的),在搭建web应用的时候采用一个依赖项管理器(比如Require.js),像上面那样的HTML文件示例我并不建议。确切的说,上面示例只是用于更清楚的展示Backbone依赖之间怎样衔接。我的观点是依赖项管理器应当用在搭建单页面、胖客户端边,以及web应用程序的时候。

Backbone也可在服务端运行

Backbone对于构建应用程序非常有用,其中包括构建服务方应用程序。Backbone的开发者精心制作了该程序库,用于服务器端的应用程序开发,在NPM网站上可以下载。其实它是基于客户端的,用在服务器端的时候需要额外添加JavaScript后端环境下运行的侧重于以客户为中心的解决方案。

 Backbone是一个顶级命名空间

Backbone对象作用在全局范围内,是一个包含Backbone代码的命名空间。具体而言,Backbone代码包含Model()、View()、Collection()、History()Router()构造函数,还包括支持这些函数的逻辑(即Eventssync())。代码归类如下:


  1. (function(){
  2.  
  3. var root =
    this;
  4.  
  5. Backbone.VERSION =
    '1.0.0';
  6.  
  7. Backbone.Events
    =
    {//事件函数混合到任意对象};
  8. Backbone.Model
    =
    function()
    {//模型构造函数};
  9. Backbone.Collection
    =
    function()
    {//集合构造函数};
  10. Backbone.Router
    =
    function()
    {//路由器构造函数};
  11. Backbone.History
    =
    function()
    {//历史构造函数};
  12. Backbone.sync =
    function()
    {//同步函数};
  13. Backbone.View
    =
    function()
    {//视图函数};
  14.  
  15. }).call(this);

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索函数
, require.js
, 程序
, backbone
, 应用程序
, function
, 逻辑
, underscore.js
, ui router
, backbone js
构建js库
,以便于您获取更多的相关知识。

时间: 2024-10-01 14:03:02

Backbone.js系列教程四:Backbone全面介绍的相关文章

Backbone.js系列教程一 - Backbone.js简介

JavaScript在web应用程序开发前端技术和后端技术的逻辑与运行一块占有越来越大的比重.为了帮助维护和循环访问前期逻辑和模块性,MVC模式在近几年中渐渐普及.其中一种运用广泛的MVC框架就是Backbone.js. Backbone中的Models(模型).Views(视图)和Controller(控制器) Backbone.js包含以下几个主要功能: 创建模型(以及模型集合): 创建视图: 管理绑定,管理事件兼用不同的模型以及视图与框架其他部分的联系: 在模型中使用观察者模式,一旦模型触

Backbone.js系列教程九:Backbone实用程序库

利用Backbone.noConflict()存储和创建一个特殊的(就是自定义命名空间)引用到Backbone 当Backbone被浏览器解析时,Backbone做的第一件事就是存储一个引用到包含在全局作用域(也就是window.Backbone)中 的Backbone的值.这是因为Backbone重写或占据了这个命名空间,希望给开发者机会去存储在Backbone被解析之前使用的初值.这就是 Backbone.noConflict()起作用的时候了.调用Backbone.noConflict()

Backbone.js系列教程十:Backbone.View

在前几节中我们介绍了Backbone基础知识,如果你还没有阅读过,那么我建议你从第一节开始学习--Backbone.js系列教程一:Backbone.js初探,尤其希望你能完全理解构造Backbone对象相 关知识,这对于学习今后的内容有很大帮助.在接下来的几个小节中,我们将深入Backbone,讨论Backbone views.models和collections.相信大家在阅读前文之后,已经对Backbone.View.Backbone.Model. Backbone.Collection构

Backbone.js系列教程二:Backbone.js深入解析之基础要求

在网上关于Backbone的描述很少,现有的关于Backbone的内容五花八门,基本上都不同程度的提到了如何运用Backbone来实现应用程序的创建,当然也有很多的是讨论它是否匹配Model/View/Whatever.有挺多华而不实的视频教程是讲程序设计的,但其实没有什么太大的价值.我认为关键是缺少了关于Backbone本身的详细介绍,以及对于每行代码的真正用意的细节描述.有篇文档专门讲述Backbone各部分的功能,在一定程度上解答了上述问题,并且提供带有注释的源代码,还有更多相关Backb

Backbone.js系列教程六:构造Backbone对象

Backbone构造函数 我之所以说Backbone很简单,是因为Backbone只有四个构造函数能被典型的实例化(基本上,它们首先被继承或子分类).这四种构造函数包括: Backbone.Model = function(attributes, {options}){}; Backbone.Collection = function([models], {options}){}; Backbone.Router = function({options}){}; //只能被具现化一次  Back

Backbone.js系列教程七:Backbone.Router

Backbone.router()概述 一个Backbone route是一个JavaScript字符串,类似于传统认识中的URL路径名. 这个像字符串的路径名是一个函数的属性名(或引用命名函数),当在浏览器中有url与字符串匹配时被调用.举例来说,下例中的url包含路径名 "help" ,在一个单独的Backbone应用页面中它将通告Backbone调用一个函数,这个函数关联了名为'help"的路由. http://www.hostname.com/#help 请注意,路径

Backbone.js系列教程三:深入解析之框架,模型视图

Backbone下的框架设想 Backbone是用于开发SPA(AKA单页应用)环境.你可能想要知道这些是什么.简单的讲,SPA就是一个加载了一个页面 (index.html或者app.html)的web应用,整个应用通过自定义事件,自定义URL句柄,和异步HTTP检索,存储资源来发送到客户端, 这样避免了页面的重复加载.基本上,SPA框架只加载一个HTML页面,因此JavaScript可以用于仿写/重写/编排浏览器上传统web应用框架的 默认属性. 让我们检验Backbone SPA的框架假设

Backbone.js系列教程五:Backbone.Events

Backbone.Events概述 Backbone.Events对象包含的方法有助于observer设计模式和一个调用pub/sub的可变observer模式.这些功能允许Backbone创建的不同类的对象(JavaScript对象)彼此解耦而相互通信.这是通过扩展(也就是_.extend(Model.prototype, Backbone.Events);)以下构造函数而完成的,所使用的函数都属于Backbone.Events: Backbone.Model() Backbone.Colle

Backbone.js系列教程十二:Backbone.Collection

Backbone.Collection概述 一个Backbone集合表示了一组模型逻辑有序的组合,并提供使用(组合,分类,过滤)这些模型组的方法与属性.在本文中为了说明这样的联系关系 (模型=表单中的一行有标签的联系数据),你可以把一个集合看做是整张表单,其中包含了很多行联系数据.下面我更新了表单中联系内容的细节,在上一章节开 头我们讲述过,于是整张表单能够被当作一个联系表单. 当然,一个Backbone.Collection不仅仅是一个像之前表单表现的那种标签.集合还可以捕捉模型以及集合上被触