Backbone做为前端的MVC框架,把后端的设计思想带到前端,使前端代码更加清晰、可维护性大大提升前端
Backbone依赖于underscore.js和jquery,因此在使用backbone的时候必定要引入这两个经常使用的js库,jquery应该算是web前端的标配了吧,undersocre也是一个很通用的库,在nodejs中一样也使用。此处有个坑,三个js库的引用是有顺序的,jquery、underscore、backbone必定要按照这个顺序,而且全部的js要放到body的后面也就是页面的底部node
Backbone主要有4部分组成,Model、View、Collections和Routerjquery
Model:很明显数据模型web
View:展现页面ajax
Collections:装载Model对象的集合后端
Router:前端路由,这个在实现单页应用的时候很是实用,很好的控制页面的跳转和返回api
接下来学习Model服务器
定义一个简单的modelrestful
var Person = Backbone.Model.extend({框架
url:"/tt/save",
initialize: function(){
console.log("create person model");
this.bind("invalid", function(model, error){
if(error){
console.log(error);
}
});
this.bind("change:name", function(){
var name = this.get("name");
console.log("你改变了name属性: " + name);
});
},
defaults:{
name:null
},
validate: function(attributes){
if(attributes.name === ""){
return "name不能为空";
}
}
});
var person = new Person;//实例化一个person对象,这样就完成了一个简单Model对象
//initialize:就是构造函数
//defaults:对形默认的属性,一样可使用person.set({});进行赋值
//validate:就是对模型的属性进行验证,可是必定要监听invalid,而且只有在model执行save的时候才能被触发,可是若是要再set的时候执行的话,那么须要
person.set({}, {"validate": true});这样就手动触发了,在执行set的是触发
//change:这个会知道model的属性被set改变时触发,
//url:这个就牛逼了,Model在执行save的时候会和服务器进行数据交换,是经过Backbone.sync来实现的,其实就是jquery的ajax,主要是集中请求方式的对应,
create、update、read、delete,会对应到http请求的post、put、get、delete,因此这个地方是须要用到restful格式的api(这个本身慢慢看吧),
在model中配置了url,默认的save,在没有初始化属性的model时触发的是create(post),若存在初始化属性则触发的是update(put),这就须要在后端配置路由的时候注意了
person.save();//则会触发create,若存在model则触发update,
使用fetch来自定义请求,只不过fetch触发的是read
person.fetch({
url:"/tt/man",
success:function(model, res){},
error: function(){
console.log("error");
}
});
model是否是挺好理解的................