backbone學習總結（一）

本文轉載自查看原文 2016-09-11 22:22 10649 backbone

入職第三天，新公司項目用到backbone+underscore+require等框架，前兩天把項目的開發環境都配置好啦，項目也能跑起來，現在准備好好學習公司自己的框架以及用到的框架，有點想吐槽，開發工具必須得用VS10+VS13還得配合起來使用，一臉懵逼，比起我用的sublime差好遠。而且裝vs10和vs13，下載的時候，我都想吐啦，整整就搞了2天，還碰到一些問題，不過在同事幫助下都解決了，項目也能正常跑起來。現在好好學習下backbone的用法。嘎嘎嘎，上古的框架，不知道為什么還在用。（萌萌噠）

backbone中文學習文檔：http://www.css88.com/doc/backbone/

什么是BACKBONE？

即一個實現了WEB前端的MVC模式的JS庫，像JQUERY，angularjs等。

什么是MVC模式？

模式：一種解決問題的通用方法

--設計模式：工廠模式，適配器模式，觀察者模式等

--框架模式：MVC ，MVP,MVVM等

思想：模型和試圖分離，通過控制器來連接他們。關於WEB前端MVC模式。web頁面本身就是一個大的VIEW，不容易做到分離操作。其次BACKBONE適合復雜的大型開發。

backbone模塊組成

events : 事件驅動方法

model ：數據模型

collection：模型集合器

router ：路由器（hash）

history：開啟歷史管理

SYNC ：同步服務器方式

view ：視圖（含事件行為和渲染頁面）下面，我們通過一張圖，了解一下他們之間的關系。

collection是model數據的集合。指對多條數據的操作，view是渲染頁面的展示。router通過hash指，將對應的數據呈現在不同的view中，當然router必須指定歷史管理，歷史管理主要是檢測hash的變化。模型數據的修改通過ajax的方式，傳輸到服務器中，進行同步服務器sync。

backbone的使用

1：基於jquery(針對試圖的實現具體的效果，操作dom)，服務器環境，面向對象

2：基於underscore.js庫--作用是：提供了80多種方法，包括數組，對象，事件中的方法，有利於對backbone中的數據模型和集合的操作。

下面來看一個單個模型實際列子，可自行貼代碼測試：

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>測試backbone</title>
        <!-- 按照先后順序，否則會報錯 -->
        <script  src = "jquery-3.1.0.min.js"></script>
        <script  src = "underscore-min.js"></script>
        <script  src = "backbone-min.js"></script>
        <script type="text/javascript">
                     var  model = new  Backbone.Model(); //創建一個backbone的模型實列
                     model.set('name' , 'jt');
                     console.log( model . get('name'));  //使用set和get方法來獲取屬性值
        </script>
</head>
<body> 
</body>
</html>

控制台打印出來的為：

下面看下將多個模型數據連接起來的列子，這里不再整個貼代碼，看js即可：

    var  model_1  =  new  Backbone.Model({'name':'jt'}); //直接賦值進行數據初始化
    var  model_2  =  new  Backbone.Model({'name':'lkm'});

    //創建一個數據模型集合
    var   models  =  new  Backbone.Collection();
    //通過add方法將單個模型添加到模型集合中
    models.add(model_1);
    models.add(model_2);
    console.log(JSON.stringify(models));//JSON解析，將數據集合打印出來

控制台打印出來的效果為：

關於模型的擴展

其實相當於類里面的繼承，子類可以使用其繼承的方法和屬性，在BACKBONE里面，新創建的實列可以使用其模型的方法。看下實列代碼：

 //模型的構造函數的擴展,相當於繼承，則聲稱的實列可以使用其父類的方法
 var   M  =  Backbone.Model.extend({
//第一個參數寫實列方法,第二個參數寫靜態方法
        aaa : function(){          //實列方法
                   console.log('jt');
        }
 },{
         bbb : function(){           //靜態方法
                   console.log('lkm');
         }                                   
 });
    var  model =  new M;
    model.aaa(); //實列方法，直接使用實列來進行調用
    M.bbb(); //靜態方法是掛載在構造函數下面的，所以需要使用構造函數來直接調用

控制台打印結果如下：

再來看下屬性的列子，可自行貼代碼進行測試：

     var  M =   Backbone.Model.extend({
          defaults: {
                 name : 'jt'
          }
      });
      var  model = new   M;
      console.log(model.get('name'));

這里defaults相當於是默認的數據值，當進行創建實列時，進行GET方法調用時，直接使用的是默認的數據值。

關於在BACKBONE中對象如何實現繼承，我們直接看下代碼：

     var  M =   Backbone.Model.extend({
            aaa: function(){
                console.log('婷風');
            }
      });
     var  childM =    M.extend(); //繼承父類的模型                 
     var  model = new  childM;  //聲稱一個實列的對象
     model.aaa();

控制台打印結果為：

關於自定義事件

BACKBONE有很多事件，比如on事件，這里了舉個栗子。具體的可看官網給的列子。

object.on(event, callback, [context])

在 object 上綁定一個callback回調函數。只要event觸發，該回調函數就會調用。

   var  M = Backbone.Model.extend({
             defaults : {
                  name : '婷風'
             },
             initialize : function(){
                  this.on('change',function(){
                     console.log(123);
                  });
             }
    });

    var  model = new M;
    model.set('name' , 'lkm');

這里給初始的default改變了其name屬性，所以會觸發change事件，從而發生相對應的行為。

打印結果如下：

上面那個是不管什么屬性發生改變都會觸發該事件，下面來看下特定的事件觸發。

   var  M = Backbone.Model.extend({
             defaults : {
                  name : '婷風'
             },
             initialize : function(){
                  this.on('change : name',function(){   //這里指定了只當name屬性發生改變時才會觸發該事件
                     console.log(123);
                  });
             }
    });
    var  model = new M;
    model.set('name' , 'lkm');

下面來看下回調函數里面帶參數的，看下代碼

    var  M = Backbone.Model.extend({
                defaults : {
                         name : '婷風'
                },
                initialize : function(){
                         this.on('change : name',function(model){
                                  console.log(model);
                         });
                }
     });
     var  model = new M;
     model.set('name' , 'lkm');

我們看下打印台打印出來的東西：

打印出來的都是model里面的一些屬性。可自行貼碼測試。

如何將模型和試圖聯系起來？

當然，肯定是MODEL和view想結合，舉個列子看看。

   $(function(){
          var  M = Backbone.Model.extend({
                   defaults : {
                          name : '婷風'
                   }
          }) ;
          //創建一個試圖，listenTo比on多一個參數，改寫了this指向
          var  V = Backbone.View.extend({
                   initialize : function (){
                      this.listenTo(this.model , ' change' , this.show); //操作的元素 |數據發生改變的時候，發生show事件
                   },
                   show : function (model){
                       $('body').append('<div>' + model.get('name') + '</div>');
                   }
           });
           var   m = new  M; 
           var    v  = new  V({model:m});
           m.set('name' , 'jt' );
   });

打印出來的結果如下：該DIV渲染到body中

關於數據與服務器

Backbone.sync 是 Backbone 每次向服務器讀取或保存模型時都要調用執行的函數。默認情況下，它使用 jQuery.ajax 方法發送 RESTful json 請求，並且返回一個 jqxhr。如果想采用不同的持久化方案，比如 WebSockets, XML, 或 Local Storage，我們可以重載該函數。

Backbone.sync 的語法為 sync(method, model, [options])。

默認 sync 映射 REST 風格的 CRUD 類似下面這樣：

create → POST /collection
read → GET /collection[/id]
update → PUT /collection/id
patch → PATCH /collection/id
delete → DELETE /collection/id

來看下列子：

    Backbone.sync = function(method , model){   //AJAX請求
           cnsole.log(method + ":" + JSON.stringify(method));
    }

       var  M =  Backbone.Model.extend({
            defaults : {
                    name : '婷風'
            },
                     url : '/user'  //后台的地址
             }) ;
         var  m = new  M;
          m.save(); //將數據保存到服務器上
          m.save({name : 'jt'});//更新操作

我們看下控制台效果：

再來看下如何更新數據庫里面的數據：

  Backbone.sync = function(method , model){   //AJAX請求
          console.log(method + ":" + JSON.stringify(method));
   }
  var C = Backbone.Collection.extend({ //集合綁定事件
                  initialize : function(){
                       this.on('reset', function(){  //當服務器數據獲取成功，調用該事件
                                           console.log('jt');
                        })
                  },
                 url : '/users'
    });
    var  models = new C;
    models.fetch();//從服務器上進行數據的更新

看下控制台打印效果：

其實原理和我們平常請求數據的增刪改查是一樣的，后端給API，前端根據字段發送AJAX請求，獲取數據等。

先寫到這么多，下篇關於路由，事件委托，前端模板，繼續學習中.如有不對的地方，請大家給我指正哈！

作者：婷風

出處：http://www.cnblogs.com/jtjds/p/5859305.html

如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！歡迎各位轉載，但是未經作者本人同意

轉載文章之后必須在文章頁面明顯位置給出作者和原文連接否則保留追究法律責任的權利。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 backbone學習總結（二） backbone 學習之View backbone 學習之Router Backbone學習筆記一Backbone中的MVC backbone 學習之backbone.localStorage.js backbone 學習之sync backbone 學習之history backbone 學習之全部源碼 backbone 學習之Events backbone 學習之Collection