免費(fèi)AI編程助手
BackboneJS 環(huán)境設(shè)置
Backbone.js非常容易設(shè)置和工作。 本章將討論Backbone.js庫(kù)的下載和設(shè)置。 Backbone.js可以通過兩種方式使用：
從其官方網(wǎng)站下載UI庫(kù)。
從CDN下載UI庫(kù)
從其官方網(wǎng)站下載UI庫(kù)
當(dāng)你打開鏈接http://backbonejs.org/，你會(huì)看到一個(gè)屏幕如下：
正如你可以看到，有三個(gè)選擇下載這個(gè)庫(kù)：
開發(fā)版本 - 右鍵單擊此按鈕并另存為，您將獲得完整的源代碼JavaScript庫(kù)。
生產(chǎn)版本 - 右鍵單擊此按鈕并保存為，你得到Backbone-min.js庫(kù)文件，它是打包和gzipped。
邊緣版本 - 右鍵單擊此按鈕，保存為，你會(huì)得到一個(gè)未發(fā)布的版本，即開發(fā)正在進(jìn)行，因此您需要使用它自己的風(fēng)險(xiǎn)。
依賴
Backbonejs取決于以下javascript文件：
Underscore.js：這是唯一需要包含的硬依賴。 你可以從這里得到它
jQuery.js：包括此文件用于RESTful持久性，歷史支持通過Backbone.Router和DOM操作與Backbone.View。 你可以從這里得到它
json2.js：包括此文件以用于較舊的Internet Explorer支持。 你可以從這里得到它
從CDN下載UI庫(kù)
CDN或內(nèi)容傳送網(wǎng)絡(luò)是設(shè)計(jì)為向用戶提供文件的服務(wù)器網(wǎng)絡(luò)。 如果您在網(wǎng)頁中使用CDN鏈接，它將托管文件的責(zé)任從您自己的服務(wù)器遷移到一系列外部服務(wù)器。 這也提供了一個(gè)優(yōu)點(diǎn)，如果您的網(wǎng)頁的訪問者已經(jīng)從相同的CDN下載了Backbone.js的副本，則不必重新下載。
如上所述，Backbone.js具有以下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>我們?cè)诒窘坛讨惺褂玫膸?kù)的CDN版本。
例
讓我們使用Backbone.js創(chuàng)建一個(gè)簡(jiǎn)單的例子。
<!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>
代碼注釋是自解釋的。 更多詳細(xì)信息如下：
在body標(biāo)簽的開頭有一個(gè)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();
評(píng)論是自我解釋。 最后一行，我們正在初始化新的AppView()。 這將在div中打印“Hello TutorialsPoint”，id =“container”
將此頁面保存為myFirstExample.html。 在您的瀏覽器中打開它，將會(huì)看到如下屏幕：
更多建議：