Backbone JS框架指南

轉載：http://blog.eood.cn/backbone

Backbone JS框架指南

Posted Mar.13, 2011 under JavaScript, 前端開發

Backbone 是一個前端 JS 代碼 MVC 框架，被著名的 37signals 用來構建他們的移動客戶端。它不可取代 Jquery，不可取代現有的 template 庫。而是和這些結合起來構建複雜的 web 前端交互應用。

如果項目涉及大量的 javascript 代碼，實現很多複雜的前端交互功能，首先你會想到把數據和展示分離。使用 Jquery 的 selector 和 callback 可以輕鬆做到這點。但是對於富客戶端的WEB應用大量代碼的結構化組織非常必要。

Backbone 就提供了 javascript 代碼的組織的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

Models 用來創建數據，校驗數據，存儲數據到服務器端， Collections 包含你創建的 functions ，Views 用來展示數據。

Models 還可以綁定事件。比如用戶動作變化觸發 models 的 change 事件，所有展示此model 數據的 views 都會接收到 這個 change 事件，進行重繪。

事件的綁定和觸發

以下是object 綁定 alert 事件和匿名回調函數的代碼例子，object 之後 觸發 alert 事件，並且傳入參數 “an event”

var object = {};

_.extend(object, Backbone.Events);

object.bind("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

假如你的網頁上事件很多也可以用proxy的方式來分發所有事件：

proxy.bind("all", function(eventName) {
  object.trigger(eventName);
});

Backbone 的 Models 是應用的核心

他包含了數據對象的屬性，操作數據對象的函數。還實現和服務端交互的動作。

以下是定時從服務器端更新 channel 的數據：

// Poll every 10 seconds to keep the channel model up-to-date.
setInterval(function() {
  channel.fetch();
}, 10000);

以下是存儲 book 的數據，這裏通過重載 sync 函數，只讓數據 alert 出來，sync 中的默認觸發事件包括 fetch save refresh

Backbone.sync = function(method, model) {
  alert(method + ": " + JSON.stringify(model));
};

var book = new Backbone.Model({
  title: "The Rough Riders",
  author: "Theodore Roosevelt"
});

book.save();

Backbone 的 Controller 用來對 URL 和事件進行綁定

以下下例子中，分別將不同的以#開頭的 URL 片段 綁定到不同的函數，實現服務器端 MVC 模型中的 router 一樣的功能

var Workspace = Backbone.Controller.extend({

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

  help: function() {
    ...
  },

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

});

值得提出的是 Backbone 的 router 也支持正則表達式的匹配

initialize: function(options) {

  // Matches #page/10, passing "10"
  this.route("page/:number", "page", function(number){ ... });

  // Matches /117-a/b/c/open, passing "117-a/b/c"
  this.route(/^(.*?)\/open$/, "open", function(id){ ... });

}

Backbone 的 Sync 默認通過調用Jquery的ajax方法來實現和服務器端的交互，實現數據的 CURD

比如 fetch 方法會觸發 read 事件

Backbone 的 Views 用來接收用戶的操作和修改 Model 的數據 ，另外通過 render 來展示數據

默認 render 並沒有實現，你可以用 Mustache.js 或者 Underscore.js 來實現。

以下是接收用戶操作的代碼例子：

var DocumentView = Backbone.View.extend({

  events: {
    "dblclick"                : "open",
    "click .icon.doc"         : "select",
    "contextmenu .icon.doc"   : "showMenu",
    "click .show_notes"       : "toggleNotes",
    "click .title .lock"      : "editAccessLevel",
    "mouseover .title .date"  : "showTooltip"
  },

  render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
  },

  open: function() {
    window.open(this.model.get("viewer_url"));
  },

  select: function() {
    this.model.set({selected: true});
  },

  ...

});

以下是數據渲染 render 的例子

var Bookmark = Backbone.View.extend({
  render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
  }
});

參考

http://documentcloud.github.com/backbone/

http://documentcloud.github.com/backbone/examples/todos/index.html