JavaScript的Backbone.js架構的一些使用建議整理，javascriptbackbone

JavaScript的Backbone.js架構的一些使用建議整理，javascriptbackbone

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);  // 阻止 scrollingBackbone.trigger('prevent-scroll', false); // 允許 scrolling

還有一件事

只要讀讀backbone的原始碼，你會學到更多。看一看backbone.js的原始碼，然後看看這些神奇的事情是怎麼實現的。這個庫非常小，而且可讀性很好，整個讀完不會超過10分鐘的。

這些小貼士協助我們寫乾淨的，更好的可讀的代碼。

您可能感興趣的文章:

• 簡單瞭解Backbone.js的Model模型以及View視圖的源碼
• Backbone.js架構中簡單的View視圖編寫學習筆記
• 講解JavaScript的Backbone.js架構的MVC結構設計理念
• 深入解析JavaScript架構Backbone.js中的事件機制
• 輕量級javascript 架構Backbone使用指南
• Backbone.js的一些提示
• Backbone.js 0.9.2 源碼注釋中文翻譯版
• Backbone.js的Hello World程式執行個體
• Backbone.js中的集合詳解
• Javascript MVC架構Backbone.js詳解