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

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

這點(diǎn)非常好，因?yàn)橛羞@么多不同的應(yīng)用場(chǎng)合，而且對(duì)于開(kāi)始寫app來(lái)說(shuō)也非常容易。這種途徑可能避免我們?cè)趧傞_(kāi)始時(shí)犯盡可能少的錯(cuò)誤。

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

下面這些提示，可以讓你避免我們?cè)谶M(jìn)行Backbone.js開(kāi)發(fā)時(shí)所碰到錯(cuò)誤：

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

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

如果你沒(méi)有model，創(chuàng)建一個(gè)非常簡(jiǎn)單：

this.viewState = new Backbone.Model();

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

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

2. DOM事件只改變models

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

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

如果點(diǎn)擊了一個(gè)“加載更多”邊接，不要展開(kāi)視圖，只需要改變model:

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

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

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

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

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

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

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

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

4. 綁定的東西必須解綁

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

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

這就是'listenTo'的由來(lái)。它會(huì)跟蹤視圖的綁定和解綁。Backbone把這個(gè)從DOM移動(dòng)之前，會(huì)進(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');
 
// 這等價(jià)于
// 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