使用Backbone構建精美應用的7條建議

　　咱們在Bizzabo使用Backbone.js已經有兩年的時間了。咱們從一個小的網頁應用爲開始，這些小應用是由Backbone驅動的，並且他們看上去很是友好。

　　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分鐘的。

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

　　原文：geeks.bizzabo.com