[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
写在前面
前面写过一篇文章《[JQuery]用InsertAfter实现图片走马灯展示效果》，自从写过那样的也算是使用面向对象的写法吧，代码实在丑陋，自从写过那样的代码，就是自己的一块心病，总感觉不完美，心里一直惦记着那件事，也是在我写过那篇文章之后，没多久，在博客园首页看到了一篇文章较复杂js的书写格式，这里的代码看着比较简介，就想着抽时间将之前的那段js代码进行重构。说做就做，不想一想起之前写过那样的代码，心里就有疙瘩。所以也就有了这篇文章。
$.extend
在开始重构之前，需要先学习一下$.extend()方法，之前虽然见过它，但并不了解它，为了加深彼此的了解，所以先对它进行初步的学习，并在以后的项目中，经常的去使用它，达到彼此熟悉。
extend的意思就是扩展，$.extend()就是jquery的扩展方法。
$.extend()方法原型
$.extend(dest,src1,src2,src3....);
含义：将src1,src2,src3...合并到dest中,返回值为合并后的des,由此可以看出该方法合并后，是修改了des的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
<script src="Script/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
var result = $.extend({},{ name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy" });
alert("name:" + result.name + " age:" + result.age + " sex:" + result.sex);
</script>
结果：
![[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构](http://img.e-com-net.com/image/product/fcdaea95206747148f9f1c921f38648d.jpg)
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值，如果为后面的对象添加一个age属性并设置为11，则结果如下：
1 <script type="text/javascript"> 2 var result = $.extend({}, { name: "Tom", age: 21 }, { name: "Jerry",age:11, sex: "Boy" }); 3 alert("name:" + result.name + " age:" + result.age + " sex:" + result.sex); 4 </script>
结果
![[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构](http://img.e-com-net.com/image/product/8b03dbb2945b43e9afe6a25f9df7c32b.jpg)
省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
<script type="text/javascript"> $.extend({ hello: function () { alert('hello'); } }); $.hello(); </script>
结果
![[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构](http://img.e-com-net.com/image/product/2c6d7edeceea4224b4000dcd6d2043c9.jpg)
就是将hello方法合并到jquery的全局对象中。
$.fn.extend(src)
该方法将src合并到jquery的实例对象中去，如:
单击按钮，调用扩展方法hello。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="Script/jquery-1.10.2.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $.fn.extend({ hello: function () { alert('hello'); } }); 9 $(function () { 10 //jquery实例对象$("#btn") 11 $("#btn").hello(); 12 }); 13 </script> 14 </head> 15 <body> 16 <input type="button" name="name" value="按钮" id="btn" /> 17 </body> 18 </html>
结果
页面加载，调用按钮jquery对象实例的hello方法。
几个例子
<script type="text/javascript">
//这是在jquery全局对象中扩展一个net命名空间。
$.extend({ net: {} });
//这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。
$.extend($.net, {
hello: function () {
alert("net.hello");
}
});
//调用net下的hello
$.net.hello();
结果为弹出“net.hello”
jquery.extend()另外一个原型
$.extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
1 <script type="text/javascript"> 2 var result = $.extend(true, {}, 3 { 4 name: "John", 5 location: 6 { city: "Boston", county: "USA" } 7 }, { 8 last: "Resig", 9 location: 10 { state: "MA", county: "China" } 11 }); 12 </script>
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：
1 <script type="text/javascript"> 2 var result = $.extend(true, {}, 3 { 4 name: "John", 5 location: 6 { city: "Boston", county: "USA" } 7 }, { 8 last: "Resig", 9 location: 10 { state: "MA", county: "China" } 11 }); 12 alert("name:" + result.name 13 + "\r\nlast:" + result.last 14 + "\r\nlocation.state:" + result.location.state 15 + "\r\nlocation.county:" + result.location.county 16 + "\r\nlocation.city:" + result.location.city) 17 </script>
结果![[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构](http://img.e-com-net.com/image/product/94673df456694db7b484926905b93e02.jpg)
也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：
1 var result = $.extend(false, {}, 2 { 3 name: "John", 4 location: 5 { city: "Boston", county: "USA" } 6 }, { 7 last: "Resig", 8 location: 9 { state: "MA", county: "China" } 10 });
![[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构](http://img.e-com-net.com/image/product/611d228953c64fbfa57a797e077f0ca4.jpg)
参考文章：http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
重构代码
学习了上面的extend方法，那么下面就对上篇文章中的图片走马展示的js进行重写。
代码如下：
![[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构](http://img.e-com-net.com/image/product/806da7fa9d244ebba78e4a3ccb7837cc.gif)
![[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构](http://img.e-com-net.com/image/product/613cce1d7e224465916443e6996c692b.gif)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <link href="Css/Style.css" rel="stylesheet" /> 7 <script src="Script/jquery-1.10.2.js"></script> 8 9 <script type="text/javascript"> 10 var Tearchers = [{ 11 "id": "1", 12 "T1": "萌萌雨1", 13 "T2": "上海复旦大学硕士学位1", 14 "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师1", 15 "imgsrc": "imges/teach_1.png" 16 }, 17 { 18 "id": "2", 19 "T1": "萌萌雨2", 20 "T2": "上海复旦大学硕士学位2", 21 "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师2", 22 "imgsrc": "imges/teach_2.png" 23 24 }, 25 { 26 "id": "3", 27 "T1": "萌萌雨3", 28 "T2": "上海复旦大学硕士学位3", 29 "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师3", 30 "imgsrc": "imges/teach_3.png" 31 }, { 32 "id": "4", 33 "T1": "萌萌雨4", 34 "T2": "上海复旦大学硕士学位4", 35 "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师4", 36 "imgsrc": "imges/teach_4.png" 37 }, { 38 "id": "5", 39 "T1": "萌萌雨5", 40 "T2": "上海复旦大学硕士学位5", 41 "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师5", 42 "imgsrc": "imges/teach_5.png" 43 } 44 , { 45 "id": "6", 46 "T1": "萌萌雨6", 47 "T2": "上海复旦大学硕士学位6", 48 "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师6", 49 "imgsrc": "imges/teach_6.png" 50 51 }, { 52 "id": "7", 53 "T1": "萌萌雨7", 54 "T2": "上海复旦大学硕士学位7", 55 "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师7", 56 "imgsrc": "imges/teach_7.png" 57 58 }, { 59 "id": "8", 60 "T1": "萌萌雨8", 61 "T2": "上海复旦大学硕士学位8", 62 "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师8", 63 "imgsrc": "imges/teach_8.png" 64 65 }, { 66 "id": "9", 67 "T1": "萌萌雨9", 68 "T2": "上海复旦大学硕士学位9", 69 "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师9", 70 "imgsrc": "imges/teach_9.png" 71 72 }, 73 ]; 74 75 //滚动图片对象 76 var srcollImages = { 77 //timer句柄 78 timerHandle: null, 79 80 //初始化操作 81 init: function (options) { 82 var newoptions = this.setOptions(options); 83 //设置高亮li 84 this.getHightLightLi(newoptions); 85 //开启定时器 86 this.timerStart(newoptions); 87 //鼠标悬停操作 88 this.hoverElement(newoptions); 89 //单击操作处理 90 this.clickElement(newoptions); 91 }, 92 //设置参数 93 setOptions: function (options) { 94 var defaultoptions = { 95 interval: 1000,//定时器时间间隔 96 //容器 97 "scrollContainer": null, 98 } 99 //扩展默认配置进行扩展 100 return $.extend({}, defaultoptions, options || {}) 101 }, 102 //开启定时器 103 timerStart: function (options) { 104 var self = this; 105 self.timerHandle = setInterval(function myfunction() { 106 self.firstInsertAfterLast(); 107 var $hightli = self.getHightLightLi(options.scrollContainer); 108 $hightli.removeClass("Zzhao_cent").addClass("Zzhao").next().removeClass("Zzhao").addClass("Zzhao_cent"); 109 },options.interval) 110 }, 111 //停止定时器 112 timerStop: function (options) { 113 clearInterval(this.timerHandle); 114 }, 115 hoverElement: function (options) { 116 //得到当前对象 117 var self = this; 118 $("ul li").hover(function () { 119 self.timerStop(options); 120 }, function () { 121 self.timerStart(options); 122 }) 123 }, 124 clickElement: function (options) { 125 $("ul li").each(function () { 126 $(this).click(function () { 127 var selfclik = $(this); 128 //停止定时器 129 clearInterval(self.timerHandle); 130 //只对普通的照片进行处理，高亮居中的照片不再处理 131 if ($(this).hasClass("Zzhao")) { 132 //index()方法用来获取jquery对象的位置索引 133 var currentIndex = $(this).index(); 134 //高亮图片的索引位置，以中间高亮图片为原点 135 var hightIndex = $(".Zzhao_cent").index(); 136 //currentIndex > hightIndex说明单击的图片在高亮图片右边 137 if (currentIndex > hightIndex) { 138 //移动的步数 139 var step = currentIndex - hightIndex; 140 $(this).removeClass("Zzhao").addClass("Zzhao_cent"); 141 $(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao"); 142 //移动多少次 143 for (var i = 0; i < step; i++) { 144 srcollImages.firstInsertAfterLast(); 145 } 146 } else { 147 //中间高亮图片之前的单击处理 148 //移动的步数 149 var step = currentIndex + hightIndex + 1; 150 $(this).removeClass("Zzhao").addClass("Zzhao_cent"); 151 $(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao"); 152 //移动多少次 153 for (var i = 0; i < step; i++) { 154 srcollImages.firstInsertAfterLast(); 155 } 156 } 157 for (var i = 0; i < Tearchers.length; i++) { 158 var teacher = Tearchers[i]; 159 if (teacher) { 160 if (selfclik.find("img").attr("src") == teacher.imgsrc) { 161 $(".T1").html(teacher.T1); 162 $(".T2").html(teacher.T2); 163 $(".T3").html(teacher.T3); 164 } 165 } 166 } 167 } 168 }); 169 }); 170 }, 171 //将第一个li插在最后一个ul之后 172 firstInsertAfterLast: function () { 173 $("ul li:first").insertAfter($("ul li:last")); 174 }, 175 /* 176 获得高亮显示的li 177 $containerObject：ul容器jquery对象 178 $result：高亮显示的li 179 */ 180 getHightLightLi: function (options) { 181 var $lis = $("ul li", options.scrollContainer); 182 var $result = null; 183 $lis.each(function (index, element) { 184 if ($(this).attr("class") == "Zzhao_cent") { 185 $result = $(element); 186 $.each(Tearchers, function (index) { 187 //当前对象 188 var teacher = this; 189 if ($result.find("img").attr("src") == teacher.imgsrc) { 190 index = index + 1; 191 //对最后一张图片的处理 192 if (index >= (Tearchers.length - 1)) { 193 teacher = Tearchers[0]; 194 } else { 195 teacher = Tearchers[index]; 196 } 197 $(".T1").html(teacher.T1); 198 $(".T2").html(teacher.T2); 199 $(".T3").html(teacher.T3); 200 } 201 }) 202 } 203 }); 204 return $result; 205 } 206 }; 207 $(function () { 208 //初始化滚动对象 209 srcollImages.init({ "scrollContainer": $(".Teac") ,interval: 2000 }); 210 }); 211 212 </script> 213 </head> 214 215 <body> 216 <div class="teacher"> 217 <div class="Teac"> 218 <ul> 219 <li class="Zzhao"> 220 <a href="#"><img src="imges/teach_1.png" /></a> 221 </li> 222 <li class="Zzhao"> 223 <a href="#"><img src="imges/teach_2.png" /></a> 224 </li> 225 <li class="Zzhao"> 226 <a href="#"><img src="imges/teach_3.png" /></a> 227 </li> 228 <li class="Zzhao"> 229 <a href="#"><img src="imges/teach_4.png" /></a> 230 </li> 231 <li class="Zzhao_cent"> 232 <a href="#"><img src="imges/teach_5.png" /></a> 233 </li> 234 <li class="Zzhao"> 235 <a href="#"><img src="imges/teach_6.png" /></a> 236 </li> 237 <li class="Zzhao"> 238 <a href="#"><img src="imges/teach_7.png" /></a> 239 </li> 240 <li class="Zzhao"> 241 <a href="#"><img src="imges/teach_8.png" /></a> 242 </li> 243 <li class="Zzhao"> 244 <a href="#"><img src="imges/teach_9.png" /></a> 245 </li> 246 </ul> 247 <div class="Jjie"> 248 <span class="T1">萌萌雨5</span> 249 <span class="T2">上海复旦大学硕士学位5</span></br> 250 <p class="T3"> 251 追求完美与一身的现代化教师女性，才华横溢 252 一表人才，优秀教师5 253 </p> 254 </div> 255 </div> 256 </div> 257 </body> 258 </html>
总结
每天逛博客园已经是一种习惯，的确收获不少，看到了然后就动手实践，也就有了这篇js重构的文章，虽然看起来仍有点乱，但是通过这次重构，让我对jquery的扩展方法的用法有了一个深入的学习。但如果将这个功能插件化，还得进一步深入学习，然后再次重构，通过这次重构，收获还是有的，我会在以后的项目中更多的采用面向对象的方式去写js或者jquery，也会将extend方法使用起来。