[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>

结果：

也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值，如果为后面的对象添加一个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.name
13             + "
last:"   + result.last
14             + "
location.state:" + result.location.state
15             + "
location.county:" + result.location.county
16             + "
location.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                 获得高亮显示的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>

Index.html

总结

每天逛博客园已经是一种习惯，的确收获不少，看到了然后就动手实践，也就有了这篇js重构的文章，虽然看起来仍有点乱，但是通过这次重构，让我对jquery的扩展方法的用法有了一个深入的学习。但如果将这个功能插件化，还得进一步深入学习，然后再次重构，通过这次重构，收获还是有的，我会在以后的项目中更多的采用面向对象的方式去写js或者jquery，也会将extend方法使用起来。

相关阅读:
java 后端博客系统文章系统——No5
啃碎并发（11）：内存模型之重排序
 java 后端博客系统文章系统——No4
啃碎并发（10）：内存模型之内部原理
 java 后端博客系统文章系统——No3
啃碎并发（九）：内存模型之基础概述
 啃碎并发（八）：深入分析wait&notify原理猿码架构
 快速平方根倒数算法
 查找：哈希表
 注意力机制论文 --- Crop leaf disease recognition based on Self-Attention convolutional neural network
原文地址：https://www.cnblogs.com/wolf-sun/p/4052480.html