前端培训_backbone
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>
