backbone里很多思想都与后台有关，如果有后台语言基础的学习起来比较简单。
它是一个MVVM模型，因为我觉得前端MVVM，比MVC好理解，虽然它也是MVC，但
C的概念很模糊，因为前端mvc的c很不好理解，但mvvm就很简单。
backbone很多方法都要自己new，就像你做了个模子，然后不断的印出你要的样子。
backbone-Model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="./backbone/underscore.js"></script>
<script src="./backbone/backbone.js"></script>
</head>
<body>
<script>
/* Backbone.Model.extend() 继承了Backbone.Model()
Backbone.Model.extend() 相当于创建一个类 然后new 实例化
传入的对象属性会存放在attributes里
*/
var Note=Backbone.Model.extend({
defaults:{title:"默认值"},
initialize:function(){
console.log("创建一个记录:"+this.get("title"));
this.on("change:title",function(m,opt){
console.log("m:");
console.log(m);
console.log("opt:");
console.log(opt);
console.log("change");
});
this.on("invalid",function(m,err){
console.log(err);
});
},
validate:function(attrs,options){
/*console.log(attrs);
console.log(options);*/
if(attrs.title.length<3){
return "哈哈";
}
}
});
var note1=new Note({"title":"zhang"});
/*都是对于属性操作的*/
/*
增删查改
set(),unset(),has(),set()
获取
get()
默认值
defaults
Backbone.Model.extend({defaults:{...}})
初始化
initialize
监听事件 on()
有change this.on("change",function(model,option){})
this.on("change:title",function(){})
验证:
validate
在属性改变时加上{validate:true} 开启验证
返回错误信息
监听错误信息
invalid
*/
</script>
</body>
</html>
backbone-view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="./backbone/underscore.js"></script>
<script src="./backbone/backbone.js"></script>
</head>
<body>
<!--
underScore 库的html模板
_.template(html)
传入对象{...}
变量为key
变量获取使用 <% = 变量 %>
类似jsp
-->
<script type="text/template" id="list1">
<ul>
<p><%= txt %></p>
<small><%= name %></small>
</ul>
</script>
<script>
var Model=Backbone.Model.extend();
/*
视图 BackBone.view.extend()
html模板
tagName
className
attributes
*/
var viewNode=Backbone.View.extend({
"tagName":"p",
"className":"txt",
attributes:{
"data-id":"txt"
},
template:_.template($("#list1").html()),
render:function(){
this.$el.html(this.template(this.model.attributes));
$("body").append(this.el);
}
});
var m=new Model({name:"张志成",txt:"一二三四五"});
var view1=new viewNode({model:m});
view1.render();
/*
el 属性
$el jq对象
render() 渲染html,即调用对象中的render函数
*/
</script>
</body>
</html>
backbone-collection
这个要说说，如果有java基础的很好理解，就是集合，方便操作数据的集合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="./backbone/underscore.js"></script>
<script src="./backbone/backbone.js"></script>
</head>
<body>
<script>
var Note=Backbone.Model.extend({
initialize:function(){
console.log("创建Model:"+this.get("id"));
}
});
var note1=new Note({txt:"一天",id:"a"});
var note2=new Note({txt:"二天",id:"b"});
var note3=new Note({txt:"三天",id:"c"});
/*集合 与java类似*/
/*增删改查
add 在没有设置{"merge":true}时，虽然添加过但不会真正添加到里面去
但可以监听到
{at:index}
{at:1}
就是手动设置索引号，这样可以设置添加的位置
remove
remove(note1)
reset
重新定义集合
pop
删除最后一个
shift
删除第一个
push
unshift
*/
var Collection=Backbone.Collection.extend({model:Note,
initialize:function(){
this.on({
add:function(model,c,opts){
console.log("add");
},
remove:function(model,c,opts){
console.log("remove");
},
change:function(model,opts){
console.log("change");
}
});
}});
var c=new Collection([note1,note2,note3]);
c.add({id:"a",ccc:"sasa"},{"merge":true});
//c.remove(note3);
/*set
可以把存在的模型就会合并，
不存在就添加
如果不想删除set没有传进来的，可以设置{remove:false}
*/
/*
获取集合
从ID get(index)
从索引 at(index)
*/
</script>
</body>
</html>
backbone-view-model-collection-route
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="./backbone/underscore.js"></script>
<script src="./backbone/backbone.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/template" id="temp">
<span><%= id %></span>
<span><%= name %></span>
<p><%= txt %></p>
</script>
<script>
/*增删可以对collection进行操控
改可以对model进行操控
on监听的第三个参数是指向，就是上下文环境
*/
var Model=Backbone.Model.extend({
initialize:function(){
this.on("change",function(model,opts){});
}
});
var Collection=Backbone.Collection.extend({model:Model});
var UlView=Backbone.View.extend({
tagName:"ul",
className:"ul",
attributes:{},
initialize:function(){
//$("#container").append(this.el);
this.collection.on("add",this.addOne,this);
this.render();
},
addOne:function(m){
//console.log(m);
var vView=new LiView({model:m});
this.$el.append(vView.render().el);
},
render:function(){
this.collection.each(this.addOne,this);
return this;
}
});
var LiView=Backbone.View.extend({
tagName:"li",
className:"li",
template:_.template($("#temp").html()),
initialize:function(){
this.model.on("change",this.change,this);
},
change:function(m){
this.render();
},
render:function(){
this.$el.html(this.template(this.model.attributes));
return this;
}
});
var note1=new Model({"id":"a","txt":"哈哈","name":"张志成"});
var note2=new Model({"id":"b","txt":"哈哈aaa","name":"张志成"});
var note3=new Model({"id":"c","txt":"哈哈vvv","name":"张志成"});
var c=new Collection([note1,note2]);
var view=new UlView({collection:c});
/*路由*/
/*:变量，会返回给指定函数
可选性输入(...)
*是随意长度路径，会把*的路径返回出来
navigate是跳转，但不在历史记录里，设置trigger就是可以有了
*/
var Route=Backbone.Router.extend({
routes:{
"a(/page/:id)":"index",
"a/:id":"show",
"login(/form/*form)":"login"},
login:function(form){
console.log(form);
console.log("请先登录。。。");
},
index:function(id){
console.log("index"+id);
if(id){
this.show(id);
return ;
}
$("#container").append(view.el);
},
show:function(id){
this.navigate("/login/form/a/"+id,{trigger:true});
var m=c.get(id);
console.log(m);
var v=new LiView({model:m});
$("#container").html(v.render().el);
}
});
var r=new Route();
/*监听hashchange,就是操作历史管理*/
Backbone.history.start();
/*fetch 需要后台php框架配合实现直接返回集合，collection.fetch()会发送ajax，返回集合*/
/*使用一整套backbone框架可以实现从前端到后台的结合*/
/*使用chrome 插件postman 可以很方便看到数据的返回*/
</script>
</body>
</html>
这就是基本的backbone知识，一门框架，基础知识懂了，后面各种使用方法由api补充就很快速理解这门框架了。
基础才是王道。
工作中很多东西都是要扎实的基础，然后才能快速找到问题，解决问题。
时间： 2024-07-29 20:50:49