初學Backbone

簡介

Backbone是一款不錯的前端MVC框架，它主要由Router，Model，View，Collection構成。當咱們在一個頁面中有許多交互，js操做，即構建富應用程序(rich client-side applications)時，用Backbone這類的框架來管理本身的代碼是十分有用的。

在Backbone裏，咱們通常會用Model來處理數據，包括數據的校驗，Ajax等。用View與頁面顯示打交道，會在View中渲染el之類的。Collection只是Model的集合。MVC中的C其實隱藏在View中，並無顯式的Controller。在官方文檔中說的是咱們能夠把View中事件處理做爲Controller，而View中的template之類的渲染函數纔是真正的View。

Backbone的學習仍是直接看官方的英文文檔較好，無論是學習的速度仍是質量。中文的翻譯畢竟仍是很讓人迷惑的。。。。。

Backbone官方文檔：http://backbonejs.org/

Model

咱們會用extend來生成咱們本身的Model，後面的View，Collection，Router也是同樣。在extend中，能夠傳入必要的參數進行構建：

var Note = Backbone.Model.extend({

  initialize: function() { ... },

  author: function() { ... },

  coordinates: function() { ... },

  allowedToEdit: function(account) {
    return true;
  }

});

var PrivateNote = Note.extend({

  allowedToEdit: function(account) {
    return account.owns(this);
  }

});

由於在Backbone中，extend使用prototype實現的。因而按理說能夠無限extend下去，不過應該不會有人extend很長吧。。。。

幾個特殊的函數要注意的：

首先是initialize，上述例子中，咱們若是var note = new Note，initialize函數會默認指向，將其中的值綁定到this對象中。

而後是validate，若是咱們定義了validate函數，那麼調用note.isVaid()或者在調用Model原生的上傳函數save，都會運行validate。來進行校驗Model中保存的數據是否合理。

View

和Model，首先用extend：

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },

  render: function() {
    ...
  }

});

render函數通常是用來渲染的，最後通常會加一句return this;。

通常的，咱們都會這麼使用這個View：

var documentRow = new DocumentRow({
    //options
});
$(targetEle).append(documentRow.render().el);

el和$el的區別在於，$el是jQuery化的el。

Collection

Collection是同一個Model的實例的集合，能夠往裏添加實例，或者刪除等等操做。

Router

Router通常會被用來做爲項目或者組件的入口。一樣是用extend：

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

routes中對應的是訪問時地址後面的hash值所定義要執行的函數，而後能夠再具體函數中初始化相應的View之類的。

 

若是有人能看到這的話。。。確定已經一團霧水了。。。剛開始的時候是這樣。。特別是直接看中文的教程。。因此強烈推薦直接去官方文檔上看

 

 

最近剛入職，被拉去學Backbone，而後立立刻項目。。仍是交易模塊的。。簡直壓力山大。。天天都是到晚上11點的節奏啊。。。

不寫了，睡覺去，明天有空再碼一篇。。。