1.第一章 Hello Backbonejs[轉]

時間 2019-11-11

標籤第一章 hello backbonejs 简体版

原文原文鏈接

1.1 基礎概念

Backbone，英文意思是：勇氣，脊骨，可是在程序裏面，尤爲是在Backbone後面加上後綴js以後，它就變成了一個框架，一個js庫。javascript

Backbone.js，不知道做者是以什麼樣的目的來對其命名的，多是但願這個庫會成爲web端開發中脊樑骨。html

好了，八卦完了開始正題。前端

Backbone.js提供了一套web開發的框架，經過Models進行key-value綁定及自定義事件處理，經過Collections提供一套豐富的API用於枚舉功能，經過Views來進行事件處理及與現有的Application經過RESTful JSON接口進行交互.它是基於jQuery和underscore的一個前端js框架。java

總體上來講，Backbone.js是一個web端javascript的MVC框架，算是輕量級的框架。它能讓你像寫Java（後端）代碼組織js代碼，定義類，類的屬性以及方法。更重要的是它可以優雅的把本來無邏輯的javascript代碼進行組織，而且提供數據和邏輯相互分離的方法，減小代碼開發過程當中的數據和邏輯混亂。python

在Backbonejs有幾個重要的概念，先介紹一下:Model，Collection，View，Router。其中Model是根據現實數據創建的抽象，好比人（People）；Collection是Model的一個集合，好比一羣人；View是對Model和Collection中數據的展現，把數據渲染（Render）到頁面上；Router是對路由的處理，就像傳統網站經過url現實不一樣的頁面，在單頁面應用（SPA）中經過Router來控制前面說的View的展現。jquery

經過Backbone，你能夠把你的數據看成Models，經過Models你能夠建立數據，進行數據驗證，銷燬或者保存到服務器上。當界面上的操做引發model中屬性的變化時，model會觸發change的事件。那些用來顯示model狀態的views會接受到model觸發change的消息，進而發出對應的響應，而且從新渲染新的數據到界面。在一個完整的Backbone應用中，你不須要寫那些膠水代碼來從DOM中經過特殊的id來獲取節點，或者手工的更新HTML頁面，由於在model發生變化時，views會很簡單的進行自我更新。git

上面是一個簡單的介紹，關於backbone我看完他的介紹和簡單的教程以後，第一印象是它爲前端開發制定了一套本身的規則，在這個規則下，咱們能夠像使用django組織python代碼同樣的組織js代碼，它很優雅，可以使前端和server的交互變得簡單。github

在查backbone資料的時候，發現沒有很系統的中文入門資料和更多的實例，因此我打算本身邊學邊實踐邊寫，爭取能讓你們經過一系列文章能快速的用上Backbone.js。web

關於backbone的更多介紹參看這個：django

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

http://backbonetutorials.com/

1.2 backbone的應用範圍：

它雖然是輕量級框架，可是框架這東西也不是隨便什麼地方都能用的，否則就會出現殺雞用牛刀，費力不討好的結果。那麼適用在哪些地方呢？

根據個人理解，以及Backbone的功能，若是單個網頁上有很是複雜的業務邏輯，那麼用它很合適，它能夠很容易的操做DOM和組織js代碼。

豆瓣的阿爾法城是一個極好的例子——純單頁、複雜的前端邏輯。

固然，除了我本身分析的應用範圍以外，在Backbone的文檔上看到了不少使用它的外國站點，有不少，說明Backbonejs仍是很易用的。

稍稍列一下國內用到Backbonejs的站點：

1. 豆瓣阿爾法城 連接：http://alphatown.com/

2. 豆瓣閱讀 連接：http://read.douban.com/ 主要用在圖書的正文頁

3. 百度開發者中心 連接：http://developer.baidu.com/

4. 手機搜狐直播間 連接：http://zhibo.m.sohu.com/

5. OATOS企業網盤 連接：http://app.oatos.com

1.3 學以至用

如今，咱們就要開始學習Backbonejs了，我假設你沒有看過個人初版，那一版有不少不少問題，在博客上也有不少人反饋。可是若是你把那一版看明白了，這新版的教程你能夠粗略的瀏覽一遍，不事後面新補充的實踐是要本身寫出來、跑起來的。

先說咱們爲何要學習這新的東西呢？簡單說來是爲了掌握更加先進的工具。那爲何要掌握先進的工具呢？簡單來講就是爲了讓咱們可以以更合理、優雅的方式完成工做，反應到代碼上就是讓代碼變得可維護，易擴展。若是從複雜的方向來講的話，這倆話題都夠我寫好幾天的博客了。

學以至用，最直接有效的就是用起來，光學是沒用的，尤爲是編程這樣的實踐科學。新手最常犯的一個錯誤就是喜歡不停的去看書，看過了就覺得會了，而後就開始瘋狂的學下一本。卻不知看懂和寫出來能運行是兩種徹底不一樣的狀態。所以建議新手——編程新手仍是踏踏實實的把代碼都敲了，執行了，成功了纔是。

下面直接給一個簡單的Demo出來，用到了Backbonejs的三個主要模塊：Views，Collection，Model。經過執行這個例子，瞭解這個例子的運行過程，快速對要作的東西有一個感受，而後再逐步擊破。

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是用來處理頁面以及簡單的頁面邏輯的。

動手把代碼放到你的編輯器中吧，成功執行，而後修改某個地方，再次嘗試。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。