开发手册 欢迎您！
软件开发者资料库

BackboneJS - 环境设置

BackboneJS环境设置 - 从基本概念到高级概念，从简单和简单的步骤学习BackboneJS，其中包括概述，环境设置，应用程序，事件，模型，集合，路由器，历史记录，同步，视图，实用程序。

BackboneJS非常易于设置和工作.本章将讨论 BackboneJS库的下载和设置.

BackboneJS可以通过以下两种方式使用 :

  • 从官方网站下载UI库.

  • 从CDN下载UI库.

从官方网站下载UI库

当你打开链接 http://backbonejs.org/，您将看到如下所示的屏幕截图 :

Backbone.js Setup

正如你所看到的，有三种选择可以下载这个库 :

  • 开发版 : 右键单击此按钮并保存为，您将获得完整的源 JavaScript库.

  • 生产版 : 右键单击此按钮并保存为，然后您将获得打包和gzip压缩的 Backbone-min.js库文件.

  • 边缘版 : 右键单击此按钮并保存为，您将获得未发布的版本，即开发正在进行中;因此你需要自担风险使用它.

依赖性

BackboneJS取决于以下JavaScript文件 :

  • Underscore.js : 这是唯一需要包含的硬依赖

  • jQuery.js : 包含此文件用于RESTful持久性，通过Backbone.Router进行历史记录支持以及使用Backbone.View进行DOM操作

  • json2.js : 包含此文件以用于较早的Internet Explorer支持

从CDN下载UI库

CDN或内容交付网络是用于提供文件的服务器网络给用户.如果您在网页中使用CDN链接，则会将托管文件的责任从您自己的服务器转移到一系列外部服务器.这也提供了一个优势，如果您的网页访问者已经从同一CDN下载了BackboneJS的副本，则无需重新下载.

如上所述， BackboneJS依赖以下JavaScript :

  • jQuery

  • 下划线

因此以上所有的CDN如下 :

注意 : 我们在本教程中使用了该库的CDN版本.

示例

让我们使用BackboneJS创建一个简单示例.

                     Hello World using Backbone.js                                 Loading...
                                                                                             var AppView = Backbone.View.extend ({            // el - stands for element. Every view has an element associated with HTML content, will be rendered.             el: '#container',                        // It's the first function called when this view is instantiated.            initialize: function() {               this.render();             },                        // $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.                        //Like the Hello TutorialsPoint in this case.            render: function() {               this.$el.html("Hello TutorialsPoint!!!");            }         });         var appView = new AppView();               

代码注释不言自明.下面和下面给出了一些更多的细节;

在 body 标签的开头有一个html代码

Loading...

打印 正在加载...

下一页，我们添加了以下CDN

接下来，我们有以下脚本 :

var AppView = Backbone.View.extend ({      // el - stands for element. Every view has an element associated with HTML content,   //will be rendered.    el: '#container',    // It's the first function called when this view is instantiated.    initialize: function() {       this.render();    },    // $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.      //Like the Hello World in this case.    render: function() {       this.$el.html("
Hello TutorialsPoint!!!
");    } });  var appView = new AppView();

评论不言自明.在最后一行中，我们正在初始化 新的AppView() .这将在 div 中打印"Hello TutorialsPoint"，其中id ="container"

将此页面另存为 myFirstExample html的的.在浏览器中打开它，屏幕将显示以下文本.

Backbone.js Hello示例