Backbone JS框架指南

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;
  }
});

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>