JavaScript的Backbone.js框架的一些使用建議整理

Backbone 為複雜Javascript應用程式提供模型(models)、集合(collections)、視圖(views)的結構。其中模型用於綁定鍵值資料和自訂事件；集合附有可枚舉函數的豐富API；視圖可以宣告事件處理函數，並透過RESTful JSON介面連接到應用程式。
當我們開發含有大量Javascript的web應用程式時，首先你需要做的事情之一就是停止向DOM物件附加資料。透過複雜多變的jQuery選擇符和回調函數來建立Javascript應用程序，包括在HTML UI，Javascript邏輯和資料之間保持同步，都不複雜。但對付客戶端應用來說，良好的架構通常是有很多好處的。
Backbone將資料呈現為模型, 你可以創建模型、對模型進行驗證和銷毀，甚至將它保存到伺服器。當UI的變化引起模型屬性改變時，模型會觸發"change"事件；所有顯示模型資料的視圖都會接收到該事件的通知，繼而視圖重新渲染。你無需尋找DOM來搜尋指定id的元素去手動更新HTML。 —旦模型改變了，視圖便會自動變化。
backbone.js提供了一套web開發的框架，透過Models進行key-value綁定及custom事件處理,透過Collections提供一套豐富的API用於枚舉功能,透過Views來進行事件處理及與現有的Application透過RESTful JSON介面進行互動.它是基於jquery和underscore的一個js框架。

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

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

當一件事做錯的時錯，我們要發現並找到改正的方法。

以下這些提示，可以讓你避免我們在進行Backbone.js開發時所碰到錯誤：

1. 視圖（Views）是資料無關的(Data-Less)

資料屬於模型（models）不是視圖。下次你發現你在一個視圖中儲存資料(或更糟：在DOM裡)，馬上把它移到model裡。

如果你沒有model，創建一個非常簡單：

this.viewState = new Backbone.Model();

登入後複製

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

你可以在你的資料上偵聽改變事件，甚至跟你的伺服器線上同步。

2. DOM事件只改models

當一個DOM事件觸發時，例如點擊了一個按鈕，不要讓它改變view本身。改這個model.

改變DOM且不改變狀態代表你的狀態仍儲存在DOM中。這條規則可以讓你保持狀態一致。

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

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

登入後複製

好了，但是視圖何時改變？好問題，下一條規則會回答。

3.DOM只有在model改變時才改變

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

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

登入後複製

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

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

登入後複製

這個視圖會一直與他的model保持一致。無論model是如何改變的：從指令介面或偵錯資訊處回應動作，這個視圖會一直保持更新。

4. 綁定的東西必須解綁

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

如果你使用'on'綁定，你的職責是使用'off'去解綁。如果沒有解綁，記憶體回收器無法釋放內存，從而造成你應用的效能下降。

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

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

登入後複製

5. 保持鍊式寫法

從render和remove方法裡，總是回到'this'。這樣可以讓你寫出方法鏈。

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

登入後複製

這很方法，不要打破它。

6. 事件比回調好

等待回應事件比回調好

Backbone模型（models）預設會觸發'sync'和'error'事件，因此可以使用這些事件代替回呼。考慮一下這兩種情況。

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

登入後複製

model何時填充（fetched）並不重要，handleSucess/handleError會被呼叫。

7. Views是有作用域的

視圖永遠不要操作除了它本身以外的DOM。

view會引用它自己的DOM元素，如'el'或jquery物件'$el'

那表示你永遠不要直接使用jQuery：

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

登入後複製

請把DOM元素的選擇限定到你自己的域裡面：

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

登入後複製

如果你需要更新一个别的不同的视图，只要触发一个事件，让别的视图去做。你也可以使用Backbone的全局Pub/Sub系统。

例如，我们阻止页面滚动：

var BodyView = Backbone.View.extend({
 initialize: function() {
  this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
 },
 
 preventScroll: function(prevent) {
  // .prevent-scroll 有下面的CSS规则： overflow: hidden;
  this.$el.toggleClass('prevent-scroll', prevent);
 }
});
 
// 现在从任何其他地方调用:
Backbone.trigger('prevent-scroll', true);  // 阻止 scrolling
Backbone.trigger('prevent-scroll', false); // 允许 scrolling

登入後複製

还有一件事

只要读读backbone的源代码，你会学到更多。看一看backbone.js的源代码，然后看看这些神奇的事情是怎么实现的。这个库非常小，而且可读性很好，整个读完不会超过10分钟的。

这些小贴士帮助我们写干净的，更好的可读的代码。