BackboneJS 环境设置
BackboneJS 非常容易设置和工作。本章将讨论
BackboneJS 库的下载和设置。
BackboneJS 可以通过以下两种方式使用-
从其官方网站下载 UI 库。
从 CDN 下载 UI 库。
从官网下载UI库
当您打开链接 http://backbonejs.org/ 时，您将获得查看如下所示的屏幕截图-
如您所见，下载此库有三个选项-
开发版本-右键单击此按钮并另存为，您将获得完整的 JavaScript 库。
生产版本-右键单击此按钮并另存为，您将获得打包并压缩的 Backbone-min.js 库 文件。
Edge 版本-右键单击此按钮并另存为，您将获得一个未发布版本，即，开发正在进行中；因此，您需要自行承担使用它的风险。
依赖项
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
Underscore
因此以上所有内容的 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 Lidihuo!!!");
}
});
var appView = new AppView();
</script>
</body>
</html>
代码注释是不言自明的。下面给出了更多细节-
body 标签开头有一段 html 代码
<div id = "container">Loading...</div>
这会打印
Loading...
接下来，我们添加了以下 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 Lidihuo!!!</h1>");
}
});
var appView = new AppView();
评论是不言自明的。在最后一行，我们正在初始化
new AppView()。这将在
div
id = "container"中打印"Hello Lidihuo"
将此页面另存为
myFirstExample.html。在浏览器中打开它
