首页 > 代码库 > [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
[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=http://www.mamicode.com/$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
<script src="http://www.mamicode.com/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>
结果：
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值，你会发现此时age为undefined，如果为后面的对象添加一个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>
结果
省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
<script type="text/javascript"> $.extend({ hello: function () { alert(‘hello‘); } }); $.hello(); </script>
结果
就是将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.name13 + "\r\nlast:" + result.last14 + "\r\nlocation.state:" + result.location.state15 + "\r\nlocation.county:" + result.location.county16 + "\r\nlocation.city:" + result.location.city)17 </script>
结果
也就是说它会将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 });
参考文章：http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
重构代码
学习了上面的extend方法，那么下面就对上篇文章中的图片走马展示的js进行重写。
代码如下：
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 获得高亮显示的li177 $containerObject：ul容器jquery对象178 $result：高亮显示的li179 */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 一表人才，优秀教师5253 </p>254 </div>255 </div>256 </div>257 </body>258 </html>
总结
每天逛博客园已经是一种习惯，的确收获不少，看到了然后就动手实践，也就有了这篇js重构的文章，虽然看起来仍有点乱，但是通过这次重构，让我对jquery的扩展方法的用法有了一个深入的学习。但如果将这个功能插件化，还得进一步深入学习，然后再次重构，通过这次重构，收获还是有的，我会在以后的项目中更多的采用面向对象的方式去写js或者jquery，也会将extend方法使用起来。
[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。