backbone测试代码
一、入门测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script> //一、创建对象
//var model=new Backbone.Model();
//var models=new Backbone.Collection();
//var view=new Backbone.View(); //二、调用model中set和get方法
//var model=new Backbone.Model();
//model.set('title','lili');
//var aa=model.get('title');
//alert(aa); //三、调用collection中add方法
var model01=new Backbone.Model({'name':'lili'});
var model02=new Backbone.Model({'name':'haha'});
var models=new Backbone.Collection();
models.add(model01);
models.add(model02);
alert(JSON.stringify(models)); </script>
</head> <body>
</body>
</html>
二、backbone继承
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script> //一、扩展一个实例化方法和一个构造方法，其中extend第一个参数是实例化方法，第二个方法是构造方法
//var M=Backbone.Model.extend({
// aa:function (){
// alert(123);
// }
//},{
// bb:function (){
// alert(456);
// }
//});
//
//var AA=new M(); //调用实例化方法必须先实例化出来
//AA.aa();
//M.bb(); //二、扩展一个方法并用model中参数调用
//var M=Backbone.Model.extend({
// defaults:{ //注意此处是json格式
// 'name':'lili'
// }
//}); //二次继承
var M=Backbone.Model.extend({
aa:function(){alert(123)}
});
var AA=M.extend(); //调用实例化方法必须先实例化出来
var test=new AA();
test.aa();
</script>
</head> <body>
</body>
</html>
三、自定义事件以及触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script> //一、触发自定义事件
//var M=Backbone.Model.extend({
// defaults:{'name':'lili'},
// initialize:{ //初始化构造函数
// this.on('change',function(){
// alert("默认参数被改变");
// })
// }
//})
//var m=new M();
//m.set('name','haha'); //二、触发自定义事件中固定属性
//var M=Backbone.Model.extend({
// defaults:{'name':'lili'},
// initialize:function(){
// this.on('change:name',function(model){
// alert("默认参数被改变");
// console.log(model)
// })
// }
//})
//var m=new M();
//m.set('name','haha'); //三、view和MVC模式
$(function(){
var M=Backbone.Model.extend({
defaults:{'name':'lili'},
});
var V=Backbone.View.extend({
initialize: function() {
this.listenTo(this.model, "change", this.render);
},
render: function() {
alert("默认参数被改变");
}
});
var m=new M();
var v=new V({model:m});
m.set('name','hahah')
})
</script>
</head> <body>
</body>
</html>
四、传给服务器值和从服务器获取值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.将数据或者更新的数据保存到服务器上
// Backbone.sync=function(method,model){
// alert(method + ": " + JSON.stringify(model));
// model.set('id', 1);
// }
// var M=Backbone.Model.extend({
// defaults:{
// 'name':'lili',
// },
// url:'/user' //此处一定要写服务器地址
// });
// var m=new M();
// m.save();
// m.save('name','haha'); //2.从服务器上获取数据,一般都是从集合中取值,等从服务器取值完毕后,开始渲染页面
Backbone.sync=function(method,model){
alert(method + ": " + JSON.stringify(model));
model.set('id', 1);
}
var C=Backbone.Collection.extend({
initialize:function(){
this.on('reset',function(){ //从服务器获取完毕后会执行此函数，但是本测试中url是假连接
alert("从服务器拉取值完毕");
})
},
url:'/user',
})
var c=new C();
c.fetch(); </script>
</head>
<body>
</body>
</html>
五、Backbone路由和历史管理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//适用于单页面跳转
var W=Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
}, help: function() {
alert("您打开的是help");
}, search: function(query, page) {
alert("您打开的是search");
}
});
var w=new W();
Backbone.history.start();//此处必须开启Backbone的路由历史管理
</script>
</head>
<body>
</body>
</html>
六、事件委托
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var V=Backbone.View.extend({
el:$('body'),
events:{ //通过event进行事件委托
'click a':'aaa',
'mouseover li':'bbb',
},
aaa:function(){
alert("a标签被点击了");
},
bbb:function(){
alert("li标签被鼠标悬浮了");
}
});
var v=new V();
})
</script>
</head>
<body>
<a href="javascript:">我是a标签</a>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>
七、前端模板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//前端模板：主要是控制JS与html分离
//1.js与html混合代码如下:
//$(function(){
//
// var M = Backbone.Model.extend({
// defaults : {
// name : 'hello'
// }
// });
//
// var V = Backbone.View.extend({
//
// initialize : function(){
//
// this.listenTo( this.model , 'change' , this.show );
//
// },
// show : function(model){
// $('body').append( '<div>'+ model.get('name') +'</div>' );
// }
//
// });
//
// var m = new M;
// var v = new V({model:m});
// m.set('name','hi');
//
//}); //2.JS与html分离代码如下(需配合body中template)：
$(function(){ var M = Backbone.Model.extend({
defaults : {
name : 'hello'
}
}); var V = Backbone.View.extend({ initialize : function(){ this.listenTo( this.model , 'change' , this.show ); },
show : function(model){
$('body').append( this.template(this.model.toJSON()) );
},
template:_.template($("#template").html()), //此处用的是underscoreJS里面的_.template方法 }); var m = new M;
var v = new V({model:m});
m.set('name','hi'); }); </script>
</head>
<body>
<!--<script type="text/template" id="template">
<div><%=name%></div>
</script>-->
<script type="text/template" id="template">
<%var i=0;
for(i=0;i<=3;i++){%>
<div><%=name%></div>
<%}%> </script>
</body>
</html>
backbone测试代码的更多相关文章
- .NET单元测试的艺术-3.测试代码
开篇:上一篇我们学习单元测试和核心技术:存根.模拟对象和隔离框架,它们是我们进行高质量单元测试的技术基础.本篇会集中在管理和组织单元测试的技术,以及如何确保在真实项目中进行高质量的单元测试. 系列目录 ...
- mysql锁 实战测试代码
存储引擎 支持的锁定 MyISAM 表级锁 MEMORY 表级锁 InnoDB 行级锁 BDB 页面锁 表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最高,并发度最低.行级锁:开销 ...
- 使用Microsoft Fakes隔离测试代码
在单元测试(Unit Test)中我们遇到的问题之一是:假如被测试组件(类或项目)为A,组件A依赖于组件B,那么在组件A的单元测试ATest中测试A时,也需要依赖于B,在B发生改动后,就可能影响到A的 ...
- iOS开发：XCTest单元测试（附上一个单例的测试代码）
测试驱动开发并不是一个很新鲜的概念了.在我最开始学习程序编写时,最喜欢干的事情就是编写一段代码,然后运行观察结果是否正确.我所学习第一门语言是c语言,用的最多的是在算法设计上,那时候最常做的事情就是编 ...
- 在内核中异步请求设备固件firmware的测试代码
在内核中异步请求设备固件firmware的测试代码 static void ghost_load_firmware_callback(const struct firmware *fw, void * ...
- x264测试代码
建立一个工程,将头文件,库文件加载到工程,测试代码如下:#include <iostream>#include <string>#include "stdint.h& ...
- Android网络传输中必用的两个加密算法:MD5 和 RSA (附java完成测试代码)
MD5和RSA是网络传输中最常用的两个算法,了解这两个算法原理后就能大致知道加密是怎么一回事了.但这两种算法使用环境有差异,刚好互补. 一.MD5算法 首先MD5是不可逆的,只能加密而不能解密.比如明 ...
- Git合并开发代码分支到测试代码分支
——转载请注明出自天外归云的博客园 用TortoiseGit下载代码到本地 首先需要在本机安装好TortoiseGit.然后在随便哪个路径下比如D盘,右键“Git Clone”: 然后URL处选择项目 ...
- mvn编写主代码与测试代码
maven编写主代码与测试代码 3.2 编写主代码 项目主代码和测试代码不同,项目的主代码会被打包到最终的构件中(比如jar),而测试代码只在运行测试时用到,不会被打包.默认情况下,Maven假设项目 ...
随机推荐
- Spring Boot中实现异步调用之@Async
一.什么是异步调用 “异步调用”对应的是“同步调用”,同步调用指程序按照定义顺序依次执行,每一行程序都必须等待上一行程序执行完成之后才能执行:异步调用指程序在顺序执行时,不等待异步调用 的语句返回结果 ...
- 中途相遇法 解决 超大背包问题 pack
Description [题目描述] 蛤布斯有n个物品和一个大小为m的背包,每个物品有大小和价值,它希望你帮它求出背包里最多能放下多少价值的物品. [输入数据] 第一行两个整数n,m.接下来n行每行两 ...
- objective-c 类目(Category)和延展(Extension)
类目的基本概念: 如果有封装好的一个类,随着程序功能的增加,需要在类中增加一个方法,那我们就不必在那个类中做修改或者再定义一个子类,只需要在用到那个方法时添加一个该类的类目即可. 1.在类目定义的方法 ...
- 邁向IT專家成功之路的三十則鐵律 鐵律二十四：IT人歲月增長之道-智慧
老子曾經在道德經中提到:「以道為本而繁守不失的,可算是長久.身雖死亡而精神不朽的,可算是長壽」.人在世間最悲哀的莫過於老死,但最可貴的則莫過於智慧.只是人的智慧不一定會隨著年齡的增長與歲月的流逝而成長 ...
- 老毛桃winpe优盘启动系统个性修改全攻略.（全）
博主从05年开始接触计算机,不能说是高手也算个老菜了,当时装系统还是用蕃茄花园的光盘安装系统,后来在学校管理机房,哪台电脑坏了就硬盘对拷. 时到今日,重启系统的方法五花八门,其中使用最广的莫过于PE优 ...
- win10拷贝文件卡顿的问题-竟然是winrar搞的
win10拷贝文件卡顿的问题-竟然是winrar搞的 学习了: http://www.w10zj.com/Win10xy/Win10xf_3378.html 没想到你竟然是这样的WinRAR 去除了s ...
- Unity3D：Gizmos画圆（原创）
Unity3D引擎技术交流QQ群:[21568554] Gizmos是场景视图里的一个可视化调试工具. 在做项目过程中.我们常常会用到它,比如:绘制一条射线等. Unity3D 4.2版本号截至.眼下 ...
- 【Java编程】Java在dos窗体编译与运行的批处理
近期在Java编程过程中,常常使用到dos窗体对程序进行编译与执行. 可是不方便之处在于每次都要输入命令进入将要编译的程序的文件夹(事实上也有简单的方法,在文章末尾给出).于是编写了一个配置文件,能够 ...
- C++学习总结2
链接上一篇日志,下面介绍下C++里面的其他内容 补充上一届里面的异常处理代码: try { cout << "try num" << endl; throw ...
- iOS 私有库的使用
最近项目说要用私有库 主要过程 创建两个库: 索引库 组件库 组件库 用git操作 比如更新代码 push 打tag等 索引库 存放组件的描述信息 也就是 .spec文件 这个文件和 ...