Backbone.js入門教程

原文: Getting Started with Backbone.js

不像其它的Web開發語言,過去Javascript不多可用的架構.使人感到高興的是,最近幾年這種狀況獲得很是大的改善.

今天我要高興的像你介紹backbont.js.  一個可以很是容易建立複雜的,交互式數據驅動應用但卻很是小巧的框架.她提供

了簡單清楚的方法把數據從表現層中分離出來.

Overview和FAQ我就很少翻譯了.

開始瞭解Backbone.js

Backbone.js由四個大類構成

• Model
• Collection
• View
• Controller

Model

在MVC的架構中不一樣對象的Model有不一樣的實現方法,在Backbone.js中model能夠表示一個單獨的實例,或一條數據庫的記錄 不過這裏並無硬性的規定.如下來自於Backbone.js網站.

Models are the heart of any JavaScript application,

containing the interactive data as well as a large part of

the logic surrounding it: conversions, validations,

computed properties, and access control.

模塊是全部的Javascript應用程序的核心. 包含了數據交互以及大部分的邏輯處理,數據轉換,數據驗證,計算,還有權限控制.

Backbone.js中定義的Model僅僅只是給你提供一個方法自由的擴展屬性並設置屬性值得方法.根據這個思路,如下是一個完整的Model定義.

var Game = Backbone.Model.extend({});

讓咱們在此基礎上來構建它.

var Game = Backbone.Model.extend({
    initialize:function(){
       alert("oh Hey!!");
    },
    defaults:{
       name:"default title",     
       releaseDate: 2011
    }
});

'initialize'是在一個對象實例完成後觸發,這裏僅僅一句消息提醒. 你能夠在這裏數據引導,或者其它一些操做.我還定義了一個默認的版本.這個例子沒有傳遞數據.

在咱們想要學習怎麼編輯屬性前,咱們先建立一個實例

// 建立新Game
var portal = new Game({ name: "Portal 2", releaseDate: 2011});
 
// 將對象的releaseDate屬性值賦給release變量
var release = portal.get('releaseDate');
 
// 修改對象的name屬性值
portal.set({ name: "Portal 2 by Valve"});

若是你注意到了get/set的方法, 它的優勢是不讓你使用object.attribute的方法來讀寫數據,你只能用修改器來操做

這樣能下降數據出錯的概率.

到此爲止,全部的操做都是在內存中, 讓咱們來點和服務器作交互的動做.

portal.save();

就這麼一行,你但願更多,放心這行代碼會發送一個請求到你的服務器. 這個請求會自動調用POST或者PUT
方法去建立一個新的對象.

這裏還能夠有不少的功能,Backbone給你定義一個缺省的方法,其他的由你本身去作.

Collection

Collection在Backbone裏指的就是model的集合.爲了更容易的和數據庫保持同步.集合能夠是從數據庫查詢的幾條記錄(model).

咱們能夠這樣定義一個Collection.

var GameCollection = Backbone.Collection.extend({
  model:Game
});

你注意到這個Collection只是爲集合定義了集合中數據的model,咱們還要獲得以一些實際的數據.

如今你能夠對你model作一些操做,例如獲得一些指定內容的games.

var GameCollection = Backbone.Collection.extend({
    model: Game,
    old: function(){
       return this.filter(function(game){
          return game.get("releaseDate") < 2009;
       });
    }
});

是否是很簡單,咱們僅僅須要檢查一下releaseDate是否是小於2009而後返回這個game就能夠.

咱們也能直接經過操做Collection來活得數據,想這樣:

var games = new GameCollection;
games.get(0);

上面的代碼實例化了一個新的Gamecollection而且查找ID爲0的model數據.你也能夠經過索引查找指定位置的元素.

例如:games.at(0);

最後你的集合應該是動態數據.像這樣:

var GameCollection = Backbone.Collection.extend({
  model: Game,
  url: '/games'
});

var games = new GameCollection;
games.fetch();

咱們經過url屬性告訴Backbone去哪裏獲得數據,作完這些後咱們建立一個新的實例,經過調用fetch()方法異步的

向服務器發送請求並返回結果.

以上涵蓋了Collection的全部基礎,就像我提到的,Backbone就是把倉庫裏成噸的各類貨物分門別類.在你開始以前

最好快速的閱讀一下官方的文檔.

View

初看Backbone裏的view會以爲有點亂.對於純粹的MVC框架來講,它更像是Control而不是view.

總的來講它負責兩方面

• 監聽文檔DOM和model或者collection的事件.
• 將應用程序狀態和數據模型表現給用戶

來建一個簡單的view

Gameview = Backbone.View.extend({
  tagName: 'div',
  className: 'game',
  render: function(){
     //渲染view的html代碼
  }
});

到目前爲止一切都很簡單, 咱們指定了要使用的html元素是什麼,還使用className屬性做爲標籤的id.

接下來看看如何渲染

render: function(){ this.el.innerHtml = this.model.get("name"); //或者使用JQuery的方式 $(this.el).html(this.model.get("name")); }

el指向view中DOM元素的引用. 很簡單的咱們把game的name屬性顯示在了div標籤內內.若是你之前用過JQuery

使用JQuery的方法也能夠.

這樣的方法處理起復雜的html就顯得很笨了,這時候使用模版就頗有必要Backbone包含的小型的Underscroe.js模版方案,你也能夠本身選擇更好的方案.

最後咱們看看View是如何監聽event的.

events:{
  'click .name': 'handleClick'
},
handleClick: function(){
  alert("In the name of science... you monster");
}

若是你直接使用過event那很容易能理解這些,咱們定義了一個事件,而且對有一個對象進行了監聽.

首先定義一個events,接下來指出觸發事件的元素'click .name'. 最後完成觸發事件後要執行的方法handleClick.

接下來就是應該怎麼把view綁定上model或者collection.

GameView = Backone.View.extend({
  initialize: function(args){
    _.bindAll(this,'changeName');
    this.model.bind('change:name',this.changeName);
  }
});

 首先是爲何咱們要把bind的代碼寫到initialize方法裏,固然是初始化的時候作最好了.

bindAll這個方法是Underscore.js提供的一個工具,這個工具特別有用,它把一系列的功能結合在了一塊兒,

特別是尚未回調函數.

如今只要model的屬性發生變化就會調用changeName方法. 你也能夠刪除或者修改監聽的動做.

監聽collectin的方法和監聽model同樣簡單,只要把model換成collection就能夠了.

Controller

控制器在Backbone.js裏基本上就是讓你建立書籤.用hashbangs來表現應用狀態.

var hashbangs = Backbone.Controller.extend({
  routes: {
    "!/": "root",
    "!/games" "games"
  },
  root: function(){

  },
  games: function(){

  }  
});

這在傳統服務器端MVC中很是常見.當url指向domain/#!/games.時games方法將會執行.

靈活應用hashbangs的標籤化功能你能夠建立基於JS的複雜應用.

若是你擔憂瀏覽器返回按鈕的問題.Backbone也爲你想到了.

var ApplicationController = new Controller;
Backbone.history.start();

經過上面的方法,Backbone.js能夠把你以前的路由記錄下來. 使你的應用程序標籤化.

我從Backbone學到了什麼?

總的來講經過這個教程我知道了怎麼用Backbone的方式建立一個應用程序.

• 咱們的確須要一個前端的MVC框架. 傳統的代碼太混亂,耦合度高,不容易理解,難以維護.
• 數據存儲在DOM中是一種很差的方式, 當同一數據更新時應用程序不一樣部分同時更新更有意義.
• 大模型(models)小控制器(controllers),流程容易控制. 業務邏輯只關注模型(models)就能夠了.
• 模版是必須的,如何把html代碼都加在Javascript是會倒黴的.

對咱們來講,這足以說明Backbone對於前端開發來講是一個極大的改變. 這個教程仍是很籠統,相信你們還有不少問題.

期待下一個更詳細的Backbone.js教程.