BackboneJS - 环境设置
BackboneJS 非常容易设置和工作。本章将讨论BackboneJS 库的下载和设置。
BackboneJS 可以通过以下两种方式使用 -
- 从其官方网站下载UI库。
- 从 CDN 下载 UI 库。
从官网下载UI库
当您打开链接http://backbonejs.org/时，您将看到如下所示的屏幕截图 -
如您所见，该库的下载有三个选项 -
开发版本- 右键单击此按钮并另存为，您将获得完整的源JavaScript 库。
生产版本- 右键单击此按钮并另存为，您将获得打包并压缩的Backbone-min.js 库文件。
Edge Version - 右键单击此按钮并另存为，您将获得未发布的版本，即开发正在进行中；因此，您需要自行承担使用它的风险。
依赖关系
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 如下 -
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type = "text/javascript" src = "https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> <script type = "text/javascript" src = "https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
注意- 我们在本教程中使用该库的 CDN 版本。
例子
让我们使用 BackboneJS 创建一个简单的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
<title>Hello World using Backbone.js</title>
</head>
<body>
<!-- ========= -->
<!-- Your HTML -->
<!-- ========= -->
<div id = "container">Loading...</div>
<!-- ========= -->
<!-- Libraries -->
<!-- ========= -->
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
type = "text/javascript"></script>
<!-- =============== -->
<!-- Javascript code -->
<!-- =============== -->
<script type = "text/javascript">
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();
</script>
</body>
</html>
代码注释是不言自明的。下面给出了更多细节 -
body标签开头有一段html代码
<div id = "container">Loading...</div>
这会打印正在加载...
接下来，我们添加了以下 CDN
<script src = "https://code.jquery.com/jquery-2.1.3.min.js" type = "text/javascript"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type = "text/javascript"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type = "text/javascript"></script>
接下来，我们有以下脚本 -
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("<h1>Hello TutorialsPoint!!!</h1>");
}
});
var appView = new AppView();
这些评论是不言自明的。在最后一行，我们正在初始化new AppView()。这将在id =“container”的div中打印“Hello TutorialsPoint”
将此页面另存为myFirstExample.html。在浏览器中打开它，屏幕将显示以下文本。
