Backbone学习总结

Backbone中文学习文档：http://www.css88.com/doc/backbone/

来到公司已经有一段时间了，到现在深深的感觉到自己的能力弱的像只周黑鸭，又干涩又黝黑，充满了麻（手麻脑袋也麻）和辣（欲哭无泪），做全栈前后端都得好好学，这不，一个开源项目中出现Backbone，??!??...这是哪个朝代的语言？左打听右询问，才知道是一个上古框架，虽然古老但是很实用也必须要用到（我估计肯定有先东西替代它了，应该会更好用更人性化），懂前端人自然明白。所以各种掰翻找查，在一个做前端姑娘的博客里发现这篇让我看起来很舒服的Backbone，博客我先摘过来，放自己家里习惯点，我在里面也适当加一些自己理解的小东西，算是向这美女姑娘致敬，谢谢，下面会标明出处（不要追究我的法律责任，我不懂法，但是守法），不会白拿的，伸手党确实可恶！

so,什么way，开始学吧。。。。。。

什么是BACKBONE？

即一个实现了WEB前端的MVC模式的JS库，像JQUERY，angularjs等。

什么是MVC模式？

模式：一种解决问题的通用方法

--设计模式：工厂模式，适配器模式，观察者模式等

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

思想：模型和试图分离，通过控制器来连接他们。关于WEB前端MVC模式。web页面本身就是一个大的VIEW，不容易做到分离操作。其次BACKBONE适合复杂的大型开发。

图片解析MVC、MVP、MVVM：

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请求，获取数据等。

关于路由和历史管理

通过 Backbone.Router.extend 来创建路由模型，链接到不同的指定的动作和事件.当应用已经全部链接到路由时，需利用Backbone.history.start() 或者Backbone.history.start({pushState: true}) 来确保驱动初始化 URL 的路由。

我们来具体的看个列子：

 //路由与历史管理

   var   Workplace  =  Backbone.Router.extend({

         routes: {

                 "help" : "help" ,  //对应的调用方法  #help

                  "search/:query" : "search" ,      #search/help

                  "search/:query/p:page" : "search"  #search/query/p3

         } ,

          help : function(){

                    console.log('111');

                      //alert('111');

           },

          search : function(query , page){

                      console.log('222');

                      //alert('333');

           }

   });

   var  w = new    Workplace ;

   Backbone.history.start(); //保证路由在浏览器中有历史管理

开始创建一个自定义的路由类。当匹配了 URL 片段便执行定义的动作，并可以通过routes 定义路由动作键值对。注意:要避免在路由定义时使用前导斜杠!!!!!

关于事件委托

什么叫事件委托呢？即事件代理，利用冒泡原理，将某一元素的事件，委托给其它元素处理的事件。

好处：提高性能 | 新添加的元素，依然保留了该事件。

 //事件委托

  $(function(){

       var   V  =  Backbone.View.extend({

             el : $('body'),   //el当前的委托人。用BODY作为委托人

             events : {        //事件

                   'click  input' : 'aaa' ,

                   'mouseover li ' : 'bbb'

             },

             aaa : function(){

                    console.log('aa');

             },

             bbb : function(){

                    console.log('bb')

             }

        });

        var    view  = new  V;

 });

看下html相对应的代码：

 <input type="button" value="name">

 <ul>

      <li>11111111</li>

      <li>22222222</li>

      <li>33333333</li>

      <li>44444444</li>

 </ul>

当点击Input时候，发生click事件，触发aaa，当鼠标移入li上时，触发bbb。

关于前端模板

好处：更好的实现mvc机制，让js的操作与试图进行分离。通常是template:_.template($('#template').html())这种写法。

 //前端模板 ：更好的让js的操作与视图进行分离

    $(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(this.template(this.model.toJSON()  )); //调用模板的方法

                 },

                 template : _.template($(' #template').html())

            });

            var   m  = new  M;

            var   v  = new  V({model:m});

            m.set('name' , 'jt' );

      });

html代码如下：

<div  id="template"></div>

实例演练分析

效果地址：http://www.css88.com/doc/backbone/examples/todos/index.html

下载地址：https://github.com/foreverjiangting/backbone/tree/master/examples/todos

主页html代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="utf-8">

   <title>Backbone.js Todos</title>

   <link rel="stylesheet" href="todos.css"/>

   <script type="text/javascript" src="jquery.js"></script>

   <script type="text/javascript" src="underscore-min.js"></script>

   <script type="text/javascript" src="backbone.js"></script>

   <script src="backbone.localStorage.js"></script>

   <script src="todos.js"></script>

 </head>

 <body>

   <div id="todoapp">

     <header>

       <h1>Todos</h1>

       <input id="new-todo" type="text" placeholder="What needs to be done?">

     </header>

     <section id="main">

       <input id="toggle-all" type="checkbox">

       <label for="toggle-all">Mark all as complete</label>

       <ul id="todo-list"></ul>   //包含每个li元素

     </section>

     <footer>

       <a id="clear-completed">Clear completed</a>

       <div id="todo-count"></div>

     </footer>

   </div>

   <div id="instructions">

     Double-click to edit a todo.

   </div>

   <!-- 单个li的Templates -->

   <script type="text/template" id="item-template">

     <div class="view">

       <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />

       <label><%- title %></label>

       <a class="destroy"></a>

     </div>

     <input class="edit" type="text" value="<%- title %>" />   //双击li中的输入框进行编辑

   </script>

 <!-- 底部的Templates -->

   <script type="text/template" id="stats-template">

     <% if (done) { %>

       <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>

     <% } %>

     <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>

   </script>

   </body>

 </html>

-----------------------------------------------------------------------------------------------------------------

so,any什么。。。。。。

作者：婷风

出处：http://www.cnblogs.com/jtjds/p/5867193.html