Backbone

来源：互联网发布：剑灵捏脸数据下载不了编辑：程序博客网时间：2024/04/29 00:02

backbone: 勇气，脊骨

整体上来说，Backbone.js是一个web端javascript的MVC框架，算是轻量级的框架。它能让你像写Java（后端）代码组织js代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。

框架模式中的MVC模式的思想:

1、将模型与视图分离，通过控制器来连接

2,、web端本身就是一个大的view，要实现分离比较难，服务器端则很容易实现。

3、backbone 适合大型的复杂的开发

Backbone的模块主要有：

events

model : Model是根据现实数据建立的抽象，比如人（People）,Model是js应用的核心，包括基础的数据以及围绕着这些数据的逻辑：数据转换、验证、属性计算和访问控制.除了是对业务中实体对象的抽象，另外的作用就是做持久化，所谓持久化就是把数据存储到磁盘上——文件形式、数据库形式。在web端也有对应的操作，比如存入LocalStorage，或者Cookie。

colleation (模型集合器，不是mvc中的c) 是Model的一个集合，比如一群人

router : 是对路由的处理，就像传统网站通过url现实不同的页面，在单页面（SPA）中通过Router来控制前面说的View的展示

history (在高版本浏览器检测onhashchange低版本做轮训，兼容)

sync (默认是以ajax的方式通信，如果需要修改，接受CRUD四个参数进行重写)

view是对Model和Collection中数据的展示，把数据渲染（Render）到页面上( 事件跟视图渲染都在v中，因为前段要实现真正的分离还是比较空难，也是完全没有必要的)

通过Backbone，你可以把你的数据当作Models，通过Models你可以创建数据，进行数据验证，销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时，model会触发change的事件。那些用来显示model状态的views会接受到model触发change的消息，进而发出对应的响应，并且重新渲染新的数据到界面。在一个完整的Backbone应用中，你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点，或者手工的更新HTML页面，因为在model发生变化时，views会很简单的进行自我更新

需要依赖的库： underscore.js 实现了对数组或者方法对象提供了一些方法

Model

对事物的抽象数据

1. hello world!

var Man = Backbone.Model.extend({ 
        initialize: function(){   
  alert( 'Hello Backbone!' );
}
    }); 
   var man = new Man();

上面简单的定义了一个最基础的Model,实现了initialize这个初始化方法，也称之为构造函数，这个构造函数默认是在Model被实例化的时候调用。

2. 对象属性赋值的两种方式：关键字：initialize defaults get() 获得属性 set()设置属性

         var Man = Backbone.Model.extend({ 
           initialize: function(){
  alert( 'Hello Backbone!' );
},
defaults: { 
  name: 'anikin',
  age: 23
}
    }); 
    var man = new Man();
   alert( man.get('name') );   //  Hello Backbone!    anikin

  var Man = Backbone.Model.extend({ 
  initialize: function(){ 
alert('Hey, Backbone '); 
  } 
});
var man = new Man;
man.set({ name: 'anikin', age:'12' });　// 给defaults进行赋值
alert( man.get('age') )

3. 自定义方法：

 var Man = Backbone.Model.extend({   
        initialize: function(){  
alert('Hey, Backbone '+ this.defaults.name); 
  },
  defaults:{ 
    name: 'anikin',
age: 12
  },
  aboutMe: function(){ 
return 'name is '+ this.get('name')+'age si '+ this.get( 'age' );
   }
});
var man = new Man
alert( man.aboutMe() )
    // 静态方法跟实例化方法
   var Model = new Backbone.Model();
   var Models = new Backbone.Collection();
   var View = new Backbone.View();

   var M = Backbone.Model.extend({ 
     // 实例方法
 aaa: function(){ 
   alert(1)
 }
   },{
  // 静态方法 
     bbb: function(){ 
   alert(2)
 }   
})
   var m = new M();
   m.aaa();
   M.bbb();

4, 监听事件属性的变化

var Man = Backbone.Model.extend({ 
  initialize: function(){ 
alert('Hey, Backbone '+ this.defaults.name); 
this.bind( 'change:name',function(){ 
  var name = this.get('name');
  alert('你改变了name为'+name)
});
  },
  defaults:{ 
    name: 'anikin',
age: 12
  }
});
var man = new Man
man.set({ name: 'jj' });  // 这里就会触发change事件

5，为对象添加验证规则以及错误提示

var Man = Backbone.Model.extend({  
  initialize: function(){ 
alert('Hey, Backbone '+ this.defaults.name); 
this.bind( 'change:name',function(){ 
  var name = this.get('name');
  alert('你改变了name为'+name)
});
this.bind( 'invalid',function( model,error ){ 
  alert(error);
  console.log(model);
})
  },
  defaults:{ 
    name: 'anikin',
age: 12
  },
  validate:function( a ){ 
    if( a.name == '' ){
  return 'name 不能为空'
}
  }
});
var man = new Man
/* 另一种写法
man.on('invalid', function(model, error){
        alert(error);
    });*/
   man.set({name:''}, {'validate':true})  // 主动触发

6. 远程的数据请求也是在这个model中来完成的。

7. 继承的操作

var M = Backbone.Model.extend({ 
 defaults: { 
   name: 'anikin'
 },
     aaa: function(){ 
   alert(1)
 } 
   });
   var Child = M.extend();
   var c = new Child;
   alert( c.get('name') );
   c.aaa();

collection

collection是model对象的一个有序的集合，也可以理解为是model的容器.

var Book = Backbone.Model.extend({ 
   defaults:{ 
     title: 'anikin'
   },
   initialize: function(){ 
     alert(1)
   }  
   });
   var BookShelf = Backbone.Collection.extend({ 
      model:Book 
   });
  var book1 = new Book({title : 'book1'});
  var book2 = new Book({title : 'book2'});
  var book3 = new Book();
  var bookShelf = new BookShelf([book1, book2, book3]);
  //基于underscore这个js库，还可以使用each的方法获取collection中的数据
  bookShelf.each(function(book){
     alert(book.get('title'));
  });

VIEW

$().ready(function(e) {   
    var M = Backbone.Model.extend({ 
   　　defaults:{ 
        name: 'anikin',
age:23
      }
   });
   
   var V = Backbone.View.extend({ 
     initialize: function(){   
   this.listenTo( this.model, 'change',this.show );   
 },
 show: function( model ){     
$('body').append( '<div style="color:red;">'+model.get('name')+'</div>' )
 } 
   });
   var m  = new M; 
   var v = new V({ model: m });
   m.set({ name: 'hi' })
});

0 0