BackboneJS - 環境設定

BackboneJS 非常易於設定和使用。本章將討論 **BackboneJS 庫** 的下載和設定。

BackboneJS 可以透過以下兩種方式使用：

從其官方網站下載 UI 庫。
從 CDN 下載 UI 庫。

從其官方網站下載 UI 庫

當您開啟連結 http://backbonejs.org/ 時，您將看到如下所示的螢幕截圖：

如您所見，此庫有三種下載選項：

**開發版本** - 右鍵點選此按鈕並另存為，您將獲得完整的源 **JavaScript 庫**。
**生產版本** - 右鍵點選此按鈕並另存為，您將獲得 **Backbone-min.js 庫** 檔案，該檔案已打包並進行了 gzip 壓縮。
**邊緣版本** - 右鍵點選此按鈕並另存為，您將獲得一個 **未釋出版本**，即正在開發中；因此，您需要自行承擔使用風險。

依賴項

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 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**。在瀏覽器中開啟它，螢幕將顯示以下文字。

列印頁面