Backbone 為復(fù)雜Javascript應(yīng)用程序提供模型(models)、集合(collections)、視圖(views)的結(jié)構(gòu)。其中模型用于綁定鍵值數(shù)據(jù)和自定義事件；集合附有可枚舉函數(shù)的豐富API； 視圖可以聲明事件處理函數(shù)，并通過RESTful JSON接口連接到應(yīng)用程序。
當(dāng)我們開發(fā)含有大量Javascript的web應(yīng)用程序時，首先你需要做的事情之一便是停止向DOM對象附加數(shù)據(jù)。 通過復(fù)雜多變的jQuery選擇符和回調(diào)函數(shù)創(chuàng)建Javascript應(yīng)用程序，包括在HTML UI，Javascript邏輯和數(shù)據(jù)之間保持同步，都不復(fù)雜。 但對付客戶端應(yīng)用來說，良好的架構(gòu)通常是有很多益處的。
Backbone將數(shù)據(jù)呈現(xiàn)為模型, 你可以創(chuàng)建模型、對模型進(jìn)行驗證和銷毀，甚至將它保存到服務(wù)器。 當(dāng)UI的變化引起模型屬性改變時，模型會觸發(fā)"change"事件； 所有顯示模型數(shù)據(jù)的視圖會接收到該事件的通知，繼而視圖重新渲染。 你無需查找DOM來搜索指定id的元素去手動更新HTML。 —旦模型改變了，視圖便會自動變化。
backbone.js提供了一套web開發(fā)的框架，通過Models進(jìn)行key-value綁定及custom事件處理,通過Collections提供一套豐富的API用于枚舉功能,通過Views來進(jìn)行事件處理及與現(xiàn)有的Application通過RESTful JSON接口進(jìn)行交互.它是基于jquery和underscore的一個js框架。

Backbone天生就不固執(zhí)己見。你從文檔上獲取的一個最基本觀點是：使用backbone.js提供的工具，做任何你想做的事。

這點非常好，因為有這么多不同的應(yīng)用場合，而且對于開始寫app來說也非常容易。這種途徑可能避免我們在剛開始時犯盡可能少的錯誤。

當(dāng)一件事做錯的時錯，我們要發(fā)現(xiàn)并找到改正的方法。

下面這些提示，可以讓你避免我們在進(jìn)行Backbone.js開發(fā)時所碰到錯誤：

1. 視圖（Views）是數(shù)據(jù)無關(guān)的(Data-Less)

數(shù)據(jù)屬于模型（models）不是視圖。下次你發(fā)現(xiàn) 你在一個視圖中存儲數(shù)據(jù)(或者更糟：在DOM里)，馬上把它移到model里。

如果你沒有model，創(chuàng)建一個非常簡單：

this.viewState = new Backbone.Model();

真的不需要任何其它操作。

你可以在你的數(shù)據(jù)上偵聽改變事件，甚至跟你的服務(wù)器在線同步。

2. DOM事件只改變models

當(dāng)一個DOM事件觸發(fā)時，比如點擊了一個按鈕，不要讓它改變view本身。改變這個model.

改變DOM且不改變狀態(tài)意味著你的狀態(tài)還存儲在DOM中。這條規(guī)則可以讓你保持狀態(tài)一致。

如果點擊了一個“加載更多”邊接，不要展開視圖，只需要改變model:

this.viewState.set('readMore', true);

好了，但是視圖何時發(fā)生改變？好問題，下一條規(guī)則會回答。

3.DOM只有在model發(fā)生改變時才改變

事件是很神奇的，請使用他們。最簡單的方法是每次改變后觸發(fā)一遍。

this.listenTo(this.stateModel, 'change', this.render);

更好的方法是只有在需要的時侯觸發(fā)改變。

this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

這個視圖會一直同他的model保持一致。無論model是如何改變的：從命令接口或調(diào)試信息處響應(yīng)動作，這個視圖會一直保持更新。

4. 綁定的東西必須解綁

當(dāng)視圖從DOM上移除時，使用'remove'方法，它必須從所有綁定的事件上解綁上。

如果你使用'on'綁定，你的職責(zé)是使用'off'去解綁。如果沒有解綁，內(nèi)存回收器無法釋放內(nèi)存，從而造成你應(yīng)用的性能下降。

這就是'listenTo'的由來。它會跟蹤視圖的綁定和解綁。Backbone把這個從DOM移動之前，會進(jìn)行'stopListening'。

// Ok:
this.stateModel.on('change:readMore', this.renderReadMore, this);
 
// 神奇:
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

5. 保持鏈?zhǔn)綄懛?/strong>

view.render().$el.appendTo(otherElement);

model.fetch({
 success: handleSuccess,
 error: handleError
});
//這種更好：
view.listenTo(model, 'sync', handleSuccess);
view.listenTo(model, 'error', handleError);
model.fetch();

$('.text').html('Thank you');

this.$('.text').html('Thank you');
 
// 這等價于
// this.$el.find('.text').html('Thank you');

var BodyView = Backbone.View.extend({
 initialize: function() {
  this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
 },
 
 preventScroll: function(prevent) {
  // .prevent-scroll 有下面的CSS規(guī)則： overflow: hidden;
  this.$el.toggleClass('prevent-scroll', prevent);
 }
});
 
// 現(xiàn)在從任何其他地方調(diào)用:
Backbone.trigger('prevent-scroll', true);  // 阻止 scrolling
Backbone.trigger('prevent-scroll', false); // 允許 scrolling