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分鐘的。
這些小貼士幫助我們寫干淨的,更好的可讀的代碼。