BackboneJS 环境设置基础教程文档
收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
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。在浏览器中打开它