backbone學習總結（一）

時間  2019-11-12
標籤 backbone 學習 總結 简体版
原文   原文鏈接

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

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

什麼是BACKBONE？html

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

什麼是MVC模式？java

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

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

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

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

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

 若是您以爲閱讀本文對您有幫助，請點一下「推薦」按鈕，您的「推薦」將是我最大的寫做動力！歡迎各位轉載，可是未經做者本人贊成 

轉載文章以後必須在 文章頁面明顯位置給出做者和原文鏈接不然保留追究法律責任的權利。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程