前端培训_backbone
2024-06-13 05:50:43
1、简单的backbone实现观察者模式
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <script src="jquery-1.7.1.js"></script>
6 <script src="underscore-min.js"></script>
7 <script src="backbone-min.js"></script>
8 <title>Document</title>
9 </head>
10 <body>
11
12 <script>
13
14 var person = Backbone.Model.extend({
15 default:{
16 name: "susan",
17 sex: "female",
18 age: 32,
19 score: 120
20 }
21 });
22 var someOne = new person();
23 someOne.on("hello", function () {
24 alert("触发了一个事件");
25 });
26
27 someOne.trigger("hello");
28
29 </script>
30
31 </body>
32 </html>2、运用backbone，实现基本的文件夹列表、邮件列表、正文展示逻辑，效果图如下：
代码如下：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>阅读邮件</title>
6 <script type="text/javascript" src="jquery.min.js"></script>
7 <script type="text/javascript" src="underscore.js"></script>
8 <script type="text/javascript" src="backbone.js"></script>
9
10 <style type="text/css">
11 *{margin:0px; padding:0px;}
12 .left{border:1px #222 solid; width:200px; height:410px; float:left; padding:20px 10px 10px 70px;}
13 .right{border:1px #222 solid; width:900px; height:410px; padding:20px 10px 10px 70px; }
14 .bottom{border:1px solid #222; width:100%; height:600px; }
15 .right ul li{line-height: 21px;list-style-type:none;margin-left:30px}
16 .left ul li{line-height: 30px; list-style-type:none; }
17
18 a:visited {color:#00FF00;} /* 已被访问的链接 */
19 a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
20 a:active {color:#0000FF;} /* 正在被点击的链接 */
21 .hello{ color:red; }
22 </style>
23
24 </head>
25 <body>
26 <!--开始左侧的内容-->
27 <div class="left" name="left" id="left">
28 <ul id="list"></ul>
29 </div>
30 <!--结束左侧的内容-->
31
32 <!--开始右侧的内容-->
33 <div class="right" name="right">
34 <ul id="mailList" ></ul>
35 </div>
36 <!--结束左侧的内容-->
37
38 <!--开始底部的内容-->
39 <div class="bottom" name="bottom">
40 <p id="mailContent"></p>
41 </div>
42 <!--结束左侧的内容-->
43 </body>
44
45 <script type="text/javascript">
46 Model = Backbone.Model.extend({
47 getResult : function(options){
48 $.ajax({
49 url : options.url,
50 dataType : "json",
51 type : "post",
52 data : options.data,
53 error : function(msg){
54 options.error(msg.responseText);
55 },
56 success: function(text) {
57 options.success(text.responseText);
58 }
59 });
60 }
61 });
62
63 ViewLeft = Backbone.View.extend({
64 el: $("body"),
65 initialize: function () {
66 this.model = new Model;
67 },
68 events: {
69 "click #list li a": "checkIn", //事件绑定,根据信箱显示主题
70 "click #mailList li a": "checkIn2", //事件绑定，根据主题显示内容
71 },
72 zidong: function(){ //打开首页时，自动加载收件箱主题
73 $("#list li:first a").click();
74 },
75 checkIn: function(e){
76 var sid = location.href.match(/sid=([^?#&]*)[?#&]?/)[1];
77 var target = $(e.target);
78 target.parent().parent().find("li").find("a").removeClass("hello"); //删除点击时的样式。
79 target.addClass("hello");
80 var data = [ '<object>',
81 '<int name="fid">'+target.attr("fid")+'</int>',
82 '<string name="order">receiveDate</string>',
83 '<string name="desc">1</string>',
84 '<int name="start">1</int>',
85 '<int name="total">20</int>',
86 '<string name="topFlag">top</string',
87 '<int name="sessionEnable">2</int>',
88 '</object>'].join("");
89 var options = {};
90 options.url = "http://appmail.mail.10086.cn/s?func=mbox:listMessages&"+sid;
91
92 options.data = data;
93 options.success = function(result){
94 console.log(result);
95 };
96 options.error = function(result){
97 //console.log(result);
98 var resultData = eval("(" + result + ")"); //转成JSON格式
99 var array = resultData.var;
100 var tbody="";
101 _.each( array, function(item){
102 var str ="";
103 str += "<li><a mid="+item.mid+" href='javascript:void(0);'>" +item.subject+"</a></li>";
104 tbody += str;
105 });
106 document.getElementById("mailList").innerHTML=""; //先清空ID为mailLIst的内容。
107 $("#mailList").append(tbody); //在ID为mailList的容器中追加获取的内容。
108 };
109
110 this.model.getResult(options);
111
112 },
113
114 checkIn2: function(e){
115 var sid = location.href.match(/sid=([^?#&]*)[?#&]?/)[1];
116 var target = $(e.target);
117 target.parent().parent().find("li").find("a").removeClass("hello");
118 target.addClass("hello");
119
120 var xmlHttpReg = null;
121 if (window.ActiveXObject) {//如果是IE
122 xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
123 } else if (window.XMLHttpRequest) {
124 xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
125 }
126 //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
127 if (xmlHttpReg != null) {
128 xmlHttpReg.open("post", "http://appmail.mail.10086.cn/RmWeb/view.do?func=view:readMessage&sid="+sid+"&mid="+target.attr('mid'), true);1
129 xmlHttpReg.send();
130 xmlHttpReg.onreadystatechange = doResult; //设置回调函数
131 }
132
133 //回调函数
134 //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应
135
136 //设定函数doResult()
137 function doResult() {
138 if (xmlHttpReg.readyState == 4) {//4代表执行完成
139 if (xmlHttpReg.status == 200) {//200代表执行成功
140 document.getElementById("mailContent").innerHTML = xmlHttpReg.responseText;
141 }
142 }
143 }
144 },
145
146 getFolder : function(){
147 var self = this;
148 var sid = location.href.match(/sid=([^?#&]*)[?#&]?/)[1];
149 var data = [ '<object>',
150 '<int name="stats">1</int>',
151 '<int name="type">0</int>',
152 '<int name="command">1</int>',
153 '</object>'].join("");
154 var options = {};
155 options.url = "http://appmail.mail.10086.cn/s?func=mbox:getAllFolders&"+sid;
156
157 options.data = data;
158 options.success = function(result){
159 console.log(result);
160 };
161 options.error = function(result){
162 //console.log(result);
163 var resultData = eval("(" + result + ")");
164 var array = resultData.var;
165 var tbody="";
166 //console.log(array[0].fid);
167 _.each( array, function(item){
168 var str ="";
169 str += "<li><a fid="+item.fid+" href='javascript:void(0);'>" +item.name+"</a></li>";
170 tbody += str;
171 });
172 $("#list").append(tbody);
173 self.zidong();
174 };
175
176 this.model.getResult(options);
177 }
178
179 });
180
181 //实例化AppView
182 var viewLeft = new ViewLeft;
183 viewLeft.getFolder();
184 </script>
185
186 </html>转载于:https://www.cnblogs.com/qianlihorse/p/3878717.html
前端培训_backbone相关推荐
- web前端培训分享：面向对象中类和对象的定义是什么?
在学习web前端技术的时候,我们接触的最多的便是面向对象这一块,其实很多编程技术都有用到这个现象,下面我们就为大家详细的介绍一下面向对象中类和对象的定义是什么? web前端培训分享:面向对象中类和对象 ...
- 哪些人适合学web前端培训呢
哪些人适合学web前端培训呢?经常会有人问到这个问题,因为互联网对于很多人来说是非常具有诱惑力的,前端便是其中的一种互联网技术,那么针对这个问题,我们来看看下面的详细介绍吧. 哪些人适合学web前端培 ...
- web前端培训要学多久
近几年web前端在互联网行业的快速发展,很多人都对web前端是非常感兴趣的,学习web前端技术的人越来越多,那么参加web前端培训要学多久呢?相信大家都想知道这个答案,我们来看看下面的详细介绍. ...
- web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- 女生参加web前端培训压力大吗
女生参加web前端培训压力大吗?这个问题很多人都是想知道的,因为对于互联网行业来说,大部分都是男性,尤其是技术岗位,女生做前端压力大小和能力也有很大的关系,前端技术好工作效率高,那么压力相对较低. 女 ...
- 参加web前端培训要学会哪些技能
想要成为一名合格的web前端程序猿,要学习的东西有很多,那么参加web前端培训要学会哪些技能呢?来看看下面的详细介绍就知道了. 参加web前端培训要学会哪些技能?想从事web前端开发,只会HTML.C ...
- 参加web前端培训需要注意什么
web前端在互联网行业的就业形势是非常良好的,是很多人进入到互联网行业的一个首要选择,要想学会web前端技术,一定要参加系统的培训,那么参加web前端培训需要注意什么呢? 参加web前端培训需要注意什 ...
- 参加web前端培训要学哪些知识
IT行业,web前端技术是比较吃香的,也是工资待遇非常高的行业之一,如果想要做一名合格的web前端工程师,系统学习是非常重要的,那么参加web前端培训要学哪些知识呢?来看看下面的详细介绍. 参加web ...
- 如何分辨Web前端培训机构的好坏
web前端在互联网行业有着非常高的薪水和很好的前景,想要学习web前端的人越来越多,对于web前端培训机构的选择让很多人犯了难,那么如何分辨Web前端培训机构的好坏呢?该如何选择呢?来看看下面的详细介 ...
最新文章
- 为什么阿里巴巴不建议在for循环中使用+进行字符串拼接
- flask urllib上传图片
- 一个包从服务器到达客户端
- 31行代码AC——PTA 求二叉树的叶子结点个数 (20分)——解题报告
- 给脚本添加到环境变量_让你的脚本可以在任意地方都可执行的几个方法
- 【神经网络计算】——神经网络实现鸢尾花分类
- linux防火墙的复规则,Centos下iptables防火墙规则编辑方法 - YangJunwei
- Kinect for Windows Samples
- ❤️大佬都在学什么？Python爬虫分析C站大佬收藏夹，跟着大佬一起学， 你就是下一个大佬❤️!
- python 帮助 help
- 5行代码识别各种验证码
- 【神兵利器】介绍一款支持屏幕录制、滚动截图、高清长图、图片编辑、图片转PDF格式、屏幕取色的截图软件：FastStone Capture
- Buffer() is deprecated due to security and usability issues.webpack 报错
- 批量cherry-pick
- C++函数参数省略号
- 入门神经网络优化算法（六）：二阶优化算法K-FAC
- python数据分析基础技术篇_HTML5小游戏---爱心鱼（上）
- log buffer及日志管理深入分析及性能调整（七）
- 互联网晚报 |12/8 星期四| 购火车票乘车将停止查验核酸证明；iPhone 15折叠屏渲染图曝光；前三季度京津冀经济持续恢复...
- 真实评测 i51155g7和锐龙r75700u选哪个好