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

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意

转载文章之后必须在文章页面明显位置给出作者和原文连接否则保留追究法律责任的权利。