BackboneJS - 快速指南

BackboneJS - 概述

BackboneJS 是一個輕量級的 JavaScript 庫，允許開發和構建在 Web 瀏覽器中執行的客戶端應用程式。它提供 MVC 框架，將資料抽象到模型中，將 DOM 抽象到檢視中，並使用事件將這兩者繫結在一起。

歷史 - BackboneJS 由 Jeremy Ashkenas 開發，並於 2010 年 10 月 13 日首次釋出。

何時使用 Backbone

假設您正在使用 JavaScript 或 jQuery 建立一個包含大量程式碼的應用程式。在此應用程式中，如果您 -
- 嚮應用程式新增或替換 DOM 元素，或
- 發出一些請求，或
- 在應用程式中顯示動畫，或
- 向程式碼中新增更多行，
那麼您的應用程式可能會變得複雜。
如果您希望以更少的程式碼獲得更好的設計，那麼最好使用 BackboneJS 庫，它提供了良好的功能，並且以結構化的方式組織和開發您的應用程式。
BackboneJS 透過事件進行通訊；這確保您不會弄亂應用程式。您的程式碼將更簡潔、更美觀且易於維護。

特性

以下是 BackboneJS 的功能列表 -

BackboneJS 允許透過使用 JavaScript 函式以更簡單的方式開發應用程式和前端。
BackboneJS 提供了各種構建塊，例如模型、檢視、事件、路由器和集合，用於組裝客戶端 Web 應用程式。
當模型更改時，它會自動更新應用程式的 HTML。
BackboneJS 是一個簡單的庫，有助於分離業務和使用者介面邏輯。
它是一個免費的開源庫，包含超過 100 個可用的擴充套件。
它充當專案的支柱，並有助於組織程式碼。
它管理資料模型，包括使用者資料，並在伺服器端以與客戶端相同格式編寫的格式顯示該資料。
BackboneJS 與jQuery具有軟依賴關係，與Underscore.js具有硬依賴關係。
它允許以結構化且組織化的格式建立客戶端 Web 應用程式或移動應用程式。

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

BackboneJS - 應用

BackboneJS 為 Web 應用程式提供了一種結構，允許分離業務邏輯和使用者介面邏輯。在本章中，我們將討論 BackboneJS 應用程式用於實現使用者介面的架構風格。下圖顯示了 BackboneJS 的架構 -

BackboneJS 的架構包含以下模組 -

HTTP 請求
路由器
檢視
事件
模型
集合
資料來源

現在讓我們詳細討論所有模組。

HTTP 請求

HTTP 客戶端以請求訊息的形式向伺服器傳送 HTTP 請求，其中 Web 瀏覽器、搜尋引擎等充當 HTTP 客戶端。使用者使用 HTTP 請求協議請求檔案，例如文件、影像等。在上圖中，您可以看到 HTTP 客戶端使用路由器傳送客戶端請求。

路由器

它用於路由客戶端應用程式，並使用 URL 將它們連線到操作和事件。它是應用程式物件的 URL 表示。此 URL 由使用者手動更改。Backbone 使用此 URL 以便它可以理解要傳送或呈現給使用者的應用程式狀態。

路由器是一種機制，可以複製 URL 以到達檢視。當 Web 應用程式為應用程式中的重要位置提供可連結、可書籤和可共享的 URL 時，需要使用路由器。

在上述架構中，路由器向檢視傳送 HTTP 請求。當應用程式需要路由功能時，這是一個有用的功能。

檢視

BackboneJS 檢視負責如何以及從我們的應用程式中顯示什麼，並且它們不包含應用程式的 HTML 標記。它指定了將模型資料呈現給使用者的理念。檢視用於反映“您的資料模型是什麼樣的”。

檢視類不知道任何關於 HTML 和 CSS 的資訊，並且當模型發生更改時，每個檢視都可以獨立更新，而無需重新載入整個頁面。它表示 DOM 中 UI 的邏輯塊。

如上圖架構所示，視圖表示使用者介面，負責顯示使用路由器完成的使用者請求的響應。

事件

事件是任何應用程式的主要部分。它將使用者的自定義事件繫結到應用程式。它們可以混合到任何物件中，並且能夠繫結和觸發自定義事件。您可以使用您選擇的所需名稱繫結自定義事件。

通常，事件與其程式流同步處理。在上圖架構中，您可以看到當事件發生時，它使用視圖表示模型的資料。

模型

它是 JavaScript 應用程式的核心，用於檢索和填充資料。模型包含應用程式的資料、資料的邏輯並表示框架中的基本資料物件。

模型表示具有一些業務邏輯和業務驗證的業務實體。它們主要用於資料儲存和業務邏輯。模型可以從資料儲存中檢索並儲存到資料儲存中。模型接收來自檢視透過路由器傳遞的事件的 HTTP 請求，並與資料庫中的資料同步，並將響應傳送回客戶端。

集合

集合是一組模型，當模型在集合中被修改時，它會繫結事件。集合包含可以迴圈處理的模型列表，並支援排序和過濾。建立集合時，我們可以定義該集合將具有的模型型別以及屬性的例項。模型上觸發的任何事件也會觸發模型中的集合。

它還會接收來自檢視的請求，繫結事件並與請求的資料同步資料，並將響應傳送回 HTTP 客戶端。

資料來源

它是從伺服器到資料庫的連線設定，包含客戶端請求的資訊。BackboneJS 架構的流程可以描述如下步驟 -

使用者使用路由器請求資料，路由器使用 URL 將應用程式路由到事件。
檢視向用戶呈現模型資料。
模型和集合透過繫結自定義事件從資料庫中檢索和填充資料。

在下一章中，我們將瞭解事件在 BackboneJS 中的重要性。

BackboneJS - 事件

事件能夠繫結物件並觸發自定義事件，即您可以使用我們選擇的所需名稱繫結自定義事件。

下表列出了您可以用來操作 BackboneJS-Events 的所有方法 -

序號	方法和描述
1	on 它將事件繫結到物件，並在每次觸發事件時執行回撥。
2	off 它從物件中刪除回撥函式或所有事件。
3	trigger 它呼叫給定事件的回撥函式。
4	once 在建立您自己的 Backbone 模型時擴充套件 backbone.Model 類。
5	listenTo 它通知一個物件監聽另一個物件上的事件。
6	stopListening 它可以用來停止監聽其他物件上的事件。
7	listenToOnce 它導致 listenTo 只發生一次，然後回撥函式被移除。

內建事件目錄

BackboneJS 允許在應用程式的任何必要位置使用全域性事件。它包含一些內建事件及其引數，如下表所示：

序號	事件和描述
1	"add"(model, collection, options) 當模型被新增到集合中時使用。
2	"remove"(model, collection, options) 它從集合中移除一個模型。
3	"reset"(collection, options) 它用於重置集合內容。
4	"sort"(collection, options) 當集合需要重新排序時使用。
5	"change"(model, options) 當需要對模型的屬性進行更改時使用。
6	"change:[attribute]"(model, value, options) 當某個屬性更新時使用。
7	"destroy"(model, collection, options) 當模型被銷燬時觸發。
8	"request"(model_or_collection, xhr, options) 當模型或集合開始向伺服器請求資料時使用。
9	"sync"(model_or_collection, resp, options) 當模型或集合成功與伺服器同步時使用。
10	"error"(model_or_collection, resp, options) 當向伺服器請求資料時發生錯誤時啟用。
11	"invalid"(model, error, options) 當模型驗證失敗時，它返回無效。
12	"route:[name]"(params) 當存在特定路由匹配時，可以使用此事件。
13	"route"(route,params) 當與任何路由匹配時使用。
14	"route"(router, route, params) 當與任何路由匹配時，歷史記錄使用它。
15	"all" 它會為所有觸發的事件觸發，並將事件名稱作為第一個引數傳遞。

BackboneJS - 模型

模型包含動態資料及其邏輯。邏輯（例如轉換、驗證、計算屬性和訪問控制）屬於模型類別。因為它包含所有應用程式資料，所以模型也稱為**JavaScript 應用程式的核心**。

下表列出了您可以用來操作 BackboneJS-Model 的所有方法：

序號	方法和描述
1	extend 在建立您自己的 Backbone 模型時擴充套件backbone.Model類。
2	initialize 當建立模型例項時，類的建構函式會被呼叫，並且透過在建立模型時定義 initialize 函式來呼叫它。
3	get 它獲取模型上某個屬性的值。
4	set 它設定模型中某個屬性的值。
5	escape 它類似於get函式，但返回模型屬性的 HTML 轉義版本。
6	has 如果屬性值定義為非空值或非未定義值，則返回 true。
7	unset 它從 Backbone 模型中移除一個屬性。
8	clear 移除所有屬性，包括 Backbone 模型中的 id 屬性。
9	id 它唯一標識模型實體，可以在建立模型或填充模型時手動設定，或者在模型儲存到伺服器時設定。
10	idAttribute 定義模型的唯一識別符號，其中包含將用作 id 的類成員的名稱。
11	cid 它是 Backbone 自動生成的客戶端 ID，用於唯一標識客戶端上的模型。
12	attributes Attributes 定義模型的屬性。
13	changed 更改使用set()方法設定屬性後已更改的所有屬性。
14	defaults 為模型設定預設值，這意味著如果使用者未指定任何資料，則模型不會出現空屬性。
15	toJSON 返回屬性的副本作為物件，用於 JSON 字串化。
16	sync 它用於與伺服器通訊並表示模型的狀態。
17	fetch 透過委託模型中的sync()方法從伺服器接收資料。
18	save 透過委託給sync()方法儲存模型的資料，該方法在每次 Backbone 呼叫它時讀取並儲存模型。
19	destroy 使用委託 HTTP“delete”請求的Backbone.sync方法銷燬或從伺服器移除模型。
20	validate 如果輸入無效，則返回指定的錯誤訊息；如果輸入有效，則不指定任何內容，只顯示結果。
21	validationError 如果驗證失敗或觸發invalid事件後，它會顯示驗證錯誤。
22	isValid 它使用validate()方法檢查模型狀態，並檢查每個屬性的驗證。
23	url 它用於模型的例項，並返回模型資源所在的位置的 URL。
24	urlRoot 透過使用模型 ID 生成 URL 來啟用 url 函式。
25	parse 透過響應物件傳遞模型的資料，並以 JSON 格式表示資料。
26	clone 它用於建立模型的深複製或將一個模型物件複製到另一個物件。
27	hasChanged 如果屬性自上次set以來發生了更改，則返回 true。
28	isNew 確定模型是新的還是現有的。
29	changedAttributes 它返回自上次set以來已更改的模型屬性，否則如果沒有任何屬性，則返回 false。
30	previous 它確定已更改屬性的上一個值。
31	previousAttributes 返回上一個更改事件之前所有屬性的狀態。

Underscore 方法

有六個**Underscore.js**方法提供其功能以在 Backbone.Model 上使用。

序號	方法和描述
1	_.keys(object) 它用於訪問物件的列舉屬性。
2	_.values(object) 它用於獲取物件屬性的值。
3	_.pairs(object) 它用鍵值對的形式描述物件的屬性。
4	_.invert(object) 它返回物件的副本，其中鍵已成為值，反之亦然。
5	*_.pick(object, keys)** 它返回物件的副本，並指示要提取哪些鍵。
6	*_.omit(object, keys)** 它返回物件的副本，並指示要省略哪些鍵。

BackboneJS - 集合

集合是有序的模型集。我們只需要擴充套件 Backbone 的集合類即可建立我們自己的集合。在集合中的模型上觸發的任何事件也會直接在集合上觸發。這允許您監聽集合中任何模型中特定屬性的更改。

下表列出了您可以用來操作 BackboneJS-Collection 的所有方法：

序號	方法和描述
1	extend 擴充套件 Backbone 的集合類以建立集合。
2	model 要指定模型類，我們需要覆蓋集合類的 model 屬性。
3	initialize 當建立模型例項時，透過在建立集合時定義 initialize 函式來呼叫它。
4	models 在集合內部建立的模型陣列。
5	toJSON 使用集合中 JSON 格式的模型屬性的副本。
6	sync 它表示模型的狀態，並使用 Backbone.sync 顯示集合的狀態。
7	add 將模型或模型陣列新增到集合中。
8	remove 從集合中移除模型或模型陣列。
9	reset 它重置集合並使用新的模型陣列填充，或者清空整個集合。
10	set 它用於使用模型中的一組專案更新集合。如果找到任何新模型，則專案將新增到該模型。
11	get 它用於使用id 或 cid從集合中檢索模型。
12	at 使用指定的索引從集合中檢索模型。
13	push 它類似於 add() 方法，它獲取模型陣列並將模型推送到集合中。
14	pop 它類似於 remove() 方法，它獲取模型陣列並從集合中移除模型。
15	unshift 在集合的開頭新增指定的模型。
16	shift 它從集合中移除第一個專案。
17	slice 顯示集合模型中元素的淺複製。
18	length 計算集合中模型的數量。
19	comparator 它用於對集合中的專案進行排序。
20	sort 對集合中的專案進行排序，並使用 comparator 屬性對專案進行排序。
21	pluck 檢索集合中模型的屬性。
22	where 它用於使用集合中匹配的屬性顯示模型。
23	findWhere 它返回與集合中指定的屬性匹配的模型。
24	url 它建立集合的例項並返回資源所在的位置。
25	parse 透過響應物件傳遞集合的資料，並以 JSON 格式表示資料。
26	clone 它返回指定物件的淺複製。
27	fetch 它使用 sync 方法從集合中的模型提取資料。
28	create 它在集合中建立模型的新例項。

Underscore 方法

下表列出了**Underscore.js**方法，這些方法提供其功能以在**Backbone.Collection**上使用。

序號	方法和描述
1	_.each(list, iteratee, [context]) 使用 iteratee 函式迭代集合中的每個元素。
2	_.map(list, iteratee, [context]) 它對映每個值，並使用iteratee函式將它們顯示在新值陣列中。
3	_.reduce(list, iteratee, memo, [context]) 它將值列表減少為單個值，也稱為inject和foldl。
4	_.reduceRight(list, iteratee, memo, [context]) 它是reduce的右結合版本。
5	_.find(list, predicate, [context]) 它查詢每個值，並返回第一個透過謂詞或測試的值。
6	_.filter(list, predicate, [context]) 它過濾每個值，並返回透過謂詞或測試的值陣列。
7	_.reject(list, predicate, [context]) 它返回列表中未透過預測值的拒絕元素。
8	_.every(list, predicate, [context]) 如果列表中的元素透過預測值，則返回 true。
9	_.some(list, predicate, [context]) 如果列表中的元素透過預測值，則返回 true。
10	_.contains(list, value, [fromIndex]) 如果列表中存在值，則返回 true。
11	*_.invoke(list, methodName, arguments) 它使用列表中每個值的methodName()**呼叫方法名稱。
12	_.max(list, [iteratee], [context]) 它指定列表中的最大值。
13	_.min(list, [iteratee], [context]) 它指定列表中的最小值。
14	_.sortBy(list, [iteratee], [context]) 它使用列表中的迭代器按升序返回排序的元素。
15	_.groupBy(list, [iteratee], [context]) 它將集合值劃分為集合，並使用列表中的iteratee進行分組。
16	_.shuffle(list) 它返回列表的隨機排列副本。
17	_.toArray(list) 它定義列表的陣列。
18	_.size(list) 它定義列表中的值的數量。
19	_.first(array, [n]) 它指定列表中陣列的第一個元素。
20	_.initial(array, [n]) 它返回所有內容，但指定列表中陣列的最後一個條目。
21	_.last(array, [n]) 它指定列表中陣列的最後一個元素。
22	_.rest(array, [index]) 它定義陣列中剩餘的元素。
23	*_.without(array, values)** 它返回列表中所有已移除例項的值。
24	_.indexOf(陣列, 值, [是否已排序]) 如果在指定索引處找到該值，則返回該值；如果未找到，則返回 -1。
25	_.indexOf(陣列, 值, [起始索引]) 返回陣列中該值的最後一次出現位置，如果未找到，則返回 -1。
26	_.isEmpty(物件) 如果列表中沒有值，則返回 true。
27	_.chain(物件) 返回一個包裝物件。

BackboneJS - 路由

路由器用於客戶端應用程式的路由，並定義應用程式物件的 URL 表示形式。當 Web 應用程式為應用程式中重要位置提供可連結、可新增書籤和可共享的 URL 時，需要路由器。

下表列出了可用於操作 **BackboneJS - 路由器** 的方法：

序號	方法和描述
1	extend 它擴充套件了 Backbone 的路由器類。
2	routes 它定義了應用程式物件的 URL 表示形式。
3	initialize 它為路由器例項化建立了一個新的建構函式。
4	route 它為路由器建立了一個路由。
5	navigate 它用於更新應用程式中的 URL。
6	execute 當路由與相應的回撥匹配時使用。

BackboneJS - 歷史記錄

它跟蹤歷史記錄，匹配相應的路由，觸發回撥以處理事件並啟用應用程式中的路由。

start

這是唯一可用於操作 **BackboneJS-History** 的方法。它開始偵聽路由並管理可新增書籤 URL 的歷史記錄。

語法

Backbone.history.start(options)

引數

**options** - 選項包括與歷史記錄一起使用的引數，例如 **pushState** 和 **hashChange**。

示例

即時演示

<!DOCTYPE html>
<html>
   <head>
      <title>History Example</title>
      <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.8.2/underscore-min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
         type = "text/javascript"></script>
   </head>
   
   <script type = "text/javascript">
      //'Router' is a name of the router class
      var Router = Backbone.Router.extend ({

         //The 'routes' maps URLs with parameters to functions on your router
         routes: {
            "myroute" : "myFunc"
         },

         //'The function 'myFunc' defines the links for the route on the browser
         myFunc: function (myroute) {
            document.write(myroute);
         }
      });

      //'router' is an instance of the Router
      var router = new Router();

      //Start listening to the routes and manages the history for bookmarkable URL's
      Backbone.history.start();
   </script>
   
   <body>
      
      <a href = "#route1">Route1 </a>
      <a href = "#route2">Route2 </a>
      <a href = "#route3">Route3 </a>
   </body>
   
</html>

輸出

讓我們執行以下步驟以檢視以上程式碼的工作原理：

將以上程式碼儲存在 **start.htm** 檔案中。
在瀏覽器中開啟此 HTML 檔案。

**注意** - 以上功能與位址列相關。因此，當您在瀏覽器中開啟以上程式碼時，它將顯示如下結果。

點選此處檢視演示

BackboneJS - 同步

它用於將模型的狀態持久化到伺服器。

下表列出了可用於操作 **BackboneJS-Sync** 的方法：

序號	方法和描述
1	Backbone.sync 它將模型的狀態持久化到伺服器。
2	Backbone.ajax 它定義了自定義 ajax 函式。
3	Backbone.emulateHTTP 如果您的 Web 伺服器不支援 REST 或 HTTP 方法，則開啟 Backbone.emulateHTTP。
4	Backbone.emulateJSON 它用於透過將方法設定為 true 來處理使用 application/json 編碼的請求。

BackboneJS - 檢視

檢視用於反映“資料模型的外觀”。它們將模型的資料呈現給使用者。它們提供了將模型資料呈現給使用者的理念。它處理使用者輸入事件，繫結事件和方法，渲染模型或集合並與使用者互動。

下表列出了可用於操作 **BackboneJS-Views** 的方法。

序號	方法和描述
1	extend 它擴充套件了 Backbone.View 類以建立自定義檢視類。
2	initialize 它使用 new 關鍵字例項化檢視。
3	el 它定義了要用作檢視引用的元素。
4	$el 它表示檢視元素的 jQuery 物件。
5	setElement 它將現有 DOM 元素指定為不同的 DOM 元素。
6	attributes 它們可以用作檢視類上的 DOM 元素屬性。
7	$(jQuery) 它用作選擇器，包含 $ 函式並在檢視的元素內執行查詢。
8	template 在渲染檢視時，模板建立標記的可重用副本並提供對例項資料的訪問。
9	render 它包含渲染模板的邏輯。
10	remove 從 DOM 中刪除檢視。
11	delegateEvents 將元素繫結到指定的 DOM 元素，並使用回撥方法處理事件。
12	undelegateEvents 它從檢視中刪除委託事件。

BackboneJS - 實用程式

實用程式類定義了一組用於實現 Backbone 實用程式的方法。

下表列出了可用於操作 **BackboneJS-Utility** 的方法：

序號	方法和描述
1	Backbone.noConflict 它顯示 Backbone 物件的原始值，並允許儲存對 Backbone 的引用。
2	Backbone.$ 它允許 Backbone 使用特定物件作為 DOM 庫。

列印頁面