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,

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();//从服务器上进行数据的更新

看下控制台打印效果：