第一章 Hello Backbonejs · Backbone.js入門教程第二版

## 1.1 基礎概念 Backbone，英文意思是：勇氣，脊骨，但是在程序里面，尤其是在Backbone后面加上后綴js之后，它就變成了一個框架，一個js庫。 Backbone.js，不知道作者是以什么樣的目的來對其命名的，可能是希望這個庫會成為web端開發中脊梁骨。好了，八卦完了開始正題。 Backbone.js提供了一套web開發的框架，通過Models進行key-value綁定及自定義事件處理，通過Collections提供一套豐富的API用于枚舉功能，通過Views來進行事件處理及與現有的Application通過RESTful JSON接口進行交互.它是基于jQuery和underscore的一個前端js框架。整體上來說，Backbone.js是一個web端javascript的MVC框架，算是輕量級的框架。它能讓你像寫Java（后端）代碼組織js代碼，定義類，類的屬性以及方法。更重要的是它能夠優雅的把原本無邏輯的javascript代碼進行組織，并且提供數據和邏輯相互分離的方法，減少代碼開發過程中的數據和邏輯混亂。在Backbonejs有幾個重要的概念，先介紹一下:Model，Collection，View，Router。其中Model是根據現實數據建立的抽象，比如人（People）；Collection是Model的一個集合，比如一群人；View是對Model和Collection中數據的展示，把數據渲染（Render）到頁面上；Router是對路由的處理，就像傳統網站通過url現實不同的頁面，在單頁面應用（SPA）中通過Router來控制前面說的View的展示。通過Backbone，你可以把你的數據當作Models，通過Models你可以創建數據，進行數據驗證，銷毀或者保存到服務器上。當界面上的操作引起model中屬性的變化時，model會觸發change的事件。那些用來顯示model狀態的views會接受到model觸發change的消息，進而發出對應的響應，并且重新渲染新的數據到界面。在一個完整的Backbone應用中，你不需要寫那些膠水代碼來從DOM中通過特殊的id來獲取節點，或者手工的更新HTML頁面，因為在model發生變化時，views會很簡單的進行自我更新。上面是一個簡單的介紹，關于backbone我看完他的介紹和簡單的教程之后，第一印象是它為前端開發制定了一套自己的規則，在這個規則下，我們可以像使用django組織python代碼一樣的組織js代碼，它很優雅，能夠使前端和server的交互變得簡單。在查backbone資料的時候，發現沒有很系統的中文入門資料和更多的實例，所以我打算自己邊學邊實踐邊寫，爭取能讓大家通過一系列文章能快速的用上Backbone.js。關于backbone的更多介紹參看這個： [http://documentcloud.github.com/backbone/](http://documentcloud.github.com/backbone/) [http://backbonetutorials.com/](http://backbonetutorials.com/) ## [](https://github.com/the5fire/backbonejs-learning-note/blob/master/chapters/01-hello-backbonejs.rst#12-backbone的應用范圍)1.2 backbone的應用范圍：它雖然是輕量級框架，但是框架這東西也不是隨便什么地方都能用的，不然就會出現殺雞用牛刀，費力不討好的結果。那么適用在哪些地方呢？根據我的理解，以及Backbone的功能，如果單個網頁上有非常復雜的業務邏輯，那么用它很合適，它可以很容易的操作DOM和組織js代碼。豆瓣的阿爾法城是一個極好的例子——純單頁、復雜的前端邏輯。當然，除了我自己分析的應用范圍之外，在Backbone的文檔上看到了很多使用它的外國站點，有很多，說明Backbonejs還是很易用的。稍稍列一下國內用到Backbonejs的站點： _1\. 豆瓣阿爾法城_?鏈接：[http://alphatown.com/](http://alphatown.com/) _2\. 豆瓣閱讀_?鏈接：[http://read.douban.com/](http://read.douban.com/)?主要用在圖書的正文頁 _3\. 百度開發者中心_?鏈接：[http://developer.baidu.com/](http://developer.baidu.com/) _4\. 手機搜狐直播間_?鏈接：[http://zhibo.m.sohu.com/](http://zhibo.m.sohu.com/) _5\. OATOS企業網盤_?鏈接：[http://app.oatos.com](http://app.oatos.com/) ## [](https://github.com/the5fire/backbonejs-learning-note/blob/master/chapters/01-hello-backbonejs.rst#13-學以致用)1.3 學以致用現在，我們就要開始學習Backbonejs了，我假設你沒有看過我的第一版，那一版有很多很多問題，在博客上也有很多人反饋。但是如果你把那一版看明白了，這新版的教程你可以粗略的瀏覽一遍，不過后面新補充的實踐是要自己寫出來、跑起來的。先說我們為什么要學習這新的東西呢？簡單說來是為了掌握更加先進的工具。那為什么要掌握先進的工具呢？簡單來說就是為了讓我們能夠以更合理、優雅的方式完成工作，反應到代碼上就是讓代碼變得可維護，易擴展。如果從復雜的方向來說的話，這倆話題都夠我寫好幾天的博客了。學以致用，最直接有效的就是用起來，光學是沒用的，尤其是編程這樣的實踐科學。新手最常犯的一個錯誤就是喜歡不停的去看書，看過了就以為會了，然后就開始瘋狂的學下一本。殊不知看懂和寫出來能運行是兩種完全不同的狀態。因此建議新手——編程新手還是踏踏實實的把代碼都敲了，執行了，成功了才是。下面直接給一個簡單的Demo出來，用到了Backbonejs的三個主要模塊：Views，Collection，Model。通過執行這個例子，了解這個例子的運行過程，快速對要做的東西有一個感覺，然后再逐步擊破。 ## [](https://github.com/the5fire/backbonejs-learning-note/blob/master/chapters/01-hello-backbonejs.rst#14-完整demo)1.4 完整DEMO 這個demo的主要功能是點擊頁面上得“新手報到”按鈕，彈出對話框，輸入內容之后，把內容拼上固定的字符串顯示到頁面上。事件觸發的邏輯是： click 觸發checkIn方法，然后checkIn構造World對象放到已經初始化worlds這個collection中。來看完整的代碼: ~~~ <!DOCTYPE html> <html> <head> <title>the5fire.com-backbone.js-Hello World</title> </head> <body> <button id="check">新手報到</button> <ul id="world-list"> </ul> <a href="http://www.the5fire.com">更多教程</a> <script src="http://the5fireblog.b0.upaiyun.com/staticfile/jquery-1.10.2.js"></script> <script src="http://the5fireblog.b0.upaiyun.com/staticfile/underscore.js"></script> <script src="http://the5fireblog.b0.upaiyun.com/staticfile/backbone.js"></script> <script> (function ($) { World = Backbone.Model.extend({ //創建一個World的對象，擁有name屬性 name: null }); Worlds = Backbone.Collection.extend({ //World對象的集合 initialize: function (models, options) { this.bind("add", options.view.addOneWorld); } }); AppView = Backbone.View.extend({ el: $("body"), initialize: function () { //構造函數，實例化一個World集合類 //并且以字典方式傳入AppView的對象 this.worlds = new Worlds(null, { view : this }) }, events: { //事件綁定，綁定Dom中id為check的元素 "click #check": "checkIn", }, checkIn: function () { var world_name = prompt("請問，您是哪星人?"); if(world_name == "") world_name = '未知'; var world = new World({ name: world_name }); this.worlds.add(world); }, addOneWorld: function(model) { $("#world-list").append("<li>這里是來自 <b>" + model.get('name') + "</b> 星球的問候：hello world！</li>"); } }); //實例化AppView var appview = new AppView; })(jQuery); </script> </body> </html> ~~~ 這里面涉及到backbone的三個部分，View、Model、Collection，其中Model代表一個數據模型，Collection是模型的一個集合，而View是用來處理頁面以及簡單的頁面邏輯的。動手把代碼放到你的編輯器中吧，成功執行，然后修改某個地方，再次嘗試。