[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             + "\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>

结果

也就是说它会将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进行重写。

代码如下：

    
   
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title></title>
   <link href="Css/Style.css" rel="stylesheet" />
   <script src="Script/jquery-1.10.2.js"></script>

   <script type="text/javascript">
       var Tearchers = [{
           "id": "1",
           "T1": "萌萌雨1",
           "T2": "上海复旦大学硕士学位1",
           "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师1",
           "imgsrc": "imges/teach_1.png"
       },
        {
            "id": "2",
            "T1": "萌萌雨2",
            "T2": "上海复旦大学硕士学位2",
            "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师2",
            "imgsrc": "imges/teach_2.png"

        },
        {
            "id": "3",
            "T1": "萌萌雨3",
            "T2": "上海复旦大学硕士学位3",
            "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师3",
            "imgsrc": "imges/teach_3.png"
        }, {
            "id": "4",
            "T1": "萌萌雨4",
            "T2": "上海复旦大学硕士学位4",
            "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师4",
            "imgsrc": "imges/teach_4.png"
        }, {
            "id": "5",
            "T1": "萌萌雨5",
            "T2": "上海复旦大学硕士学位5",
            "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师5",
            "imgsrc": "imges/teach_5.png"
        }
        , {
            "id": "6",
            "T1": "萌萌雨6",
            "T2": "上海复旦大学硕士学位6",
            "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师6",
            "imgsrc": "imges/teach_6.png"

        }, {
            "id": "7",
            "T1": "萌萌雨7",
            "T2": "上海复旦大学硕士学位7",
            "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师7",
            "imgsrc": "imges/teach_7.png"

        }, {
            "id": "8",
            "T1": "萌萌雨8",
            "T2": "上海复旦大学硕士学位8",
            "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师8",
            "imgsrc": "imges/teach_8.png"

        }, {
            "id": "9",
            "T1": "萌萌雨9",
            "T2": "上海复旦大学硕士学位9",
            "T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师9",
            "imgsrc": "imges/teach_9.png"

        },
       ];

       //滚动图片对象
       var srcollImages = {
           //timer句柄
           timerHandle: null,

           //初始化操作
           init: function (options) {
               var newoptions = this.setOptions(options);
               //设置高亮li
               this.getHightLightLi(newoptions);
               //开启定时器
               this.timerStart(newoptions);
               //鼠标悬停操作
               this.hoverElement(newoptions);
               //单击操作处理
               this.clickElement(newoptions);
           },
           //设置参数
           setOptions: function (options) {
               var defaultoptions = {
                   interval: 1000,//定时器时间间隔
                   //容器
                   "scrollContainer": null,
               }
               //扩展默认配置进行扩展
               return $.extend({}, defaultoptions, options || {})
           },
           //开启定时器
           timerStart: function (options) {
               var self = this;
               self.timerHandle = setInterval(function myfunction() {
                   self.firstInsertAfterLast();
                   var $hightli = self.getHightLightLi(options.scrollContainer);
                   $hightli.removeClass("Zzhao_cent").addClass("Zzhao").next().removeClass("Zzhao").addClass("Zzhao_cent");
               },options.interval)
           },
           //停止定时器
           timerStop: function (options) {
               clearInterval(this.timerHandle);
           },
           hoverElement: function (options) {
               //得到当前对象
               var self = this;
               $("ul li").hover(function () {
                   self.timerStop(options);
               }, function () {
                   self.timerStart(options);
               })
           },
           clickElement: function (options) {
               $("ul li").each(function () {
                   $(this).click(function () {
                       var selfclik = $(this);
                       //停止定时器
                       clearInterval(self.timerHandle);
                       //只对普通的照片进行处理，高亮居中的照片不再处理
                       if ($(this).hasClass("Zzhao")) {
                           //index()方法用来获取jquery对象的位置索引
                           var currentIndex = $(this).index();
                           //高亮图片的索引位置，以中间高亮图片为原点
                           var hightIndex = $(".Zzhao_cent").index();
                           //currentIndex > hightIndex说明单击的图片在高亮图片右边
                           if (currentIndex > hightIndex) {
                               //移动的步数
                               var step = currentIndex - hightIndex;
                               $(this).removeClass("Zzhao").addClass("Zzhao_cent");
                               $(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
                               //移动多少次
                               for (var i = 0; i < step; i++) {
                                   srcollImages.firstInsertAfterLast();
                               }
                           } else {
                               //中间高亮图片之前的单击处理
                               //移动的步数
                               var step = currentIndex + hightIndex + 1;
                               $(this).removeClass("Zzhao").addClass("Zzhao_cent");
                               $(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
                               //移动多少次
                               for (var i = 0; i < step; i++) {
                                   srcollImages.firstInsertAfterLast();
                               }
                           }
                           for (var i = 0; i < Tearchers.length; i++) {
                               var teacher = Tearchers[i];
                               if (teacher) {
                                   if (selfclik.find("img").attr("src") == teacher.imgsrc) {
                                       $(".T1").html(teacher.T1);
                                       $(".T2").html(teacher.T2);
                                       $(".T3").html(teacher.T3);
                                   }
                               }
                           }
                       }
                   });
               });
           },
           //将第一个li插在最后一个ul之后
           firstInsertAfterLast: function () {
               $("ul li:first").insertAfter($("ul li:last"));
           },
           /*
               获得高亮显示的li
               $containerObject：ul容器jquery对象
               $result：高亮显示的li
             */
           getHightLightLi: function (options) {
               var $lis = $("ul li", options.scrollContainer);
               var $result = null;
               $lis.each(function (index, element) {
                   if ($(this).attr("class") == "Zzhao_cent") {
                       $result = $(element);
                       $.each(Tearchers, function (index) {
                           //当前对象
                           var teacher = this;
                           if ($result.find("img").attr("src") == teacher.imgsrc) {
                               index = index + 1;
                               //对最后一张图片的处理
                               if (index >= (Tearchers.length - 1)) {
                                   teacher = Tearchers[0];
                               } else {
                                   teacher = Tearchers[index];
                               }
                               $(".T1").html(teacher.T1);
                               $(".T2").html(teacher.T2);
                               $(".T3").html(teacher.T3);
                           }
                       })
                   }
               });
               return $result;
           }
       };
       $(function () {
           //初始化滚动对象
           srcollImages.init({ "scrollContainer": $(".Teac") ,interval: 2000 });
       });

   </script>
</head>

<body>
   <div class="teacher">
       <div class="Teac">
           <ul>
               <li class="Zzhao">
                   <a href="#"><img src="imges/teach_1.png" /></a>
               </li>
               <li class="Zzhao">
                   <a href="#"><img src="imges/teach_2.png" /></a>
               </li>
               <li class="Zzhao">
                   <a href="#"><img src="imges/teach_3.png" /></a>
               </li>
               <li class="Zzhao">
                   <a href="#"><img src="imges/teach_4.png" /></a>
               </li>
               <li class="Zzhao_cent">
                   <a href="#"><img src="imges/teach_5.png" /></a>
               </li>
               <li class="Zzhao">
                   <a href="#"><img src="imges/teach_6.png" /></a>
               </li>
               <li class="Zzhao">
                   <a href="#"><img src="imges/teach_7.png" /></a>
               </li>
               <li class="Zzhao">
                   <a href="#"><img src="imges/teach_8.png" /></a>
               </li>
               <li class="Zzhao">
                   <a href="#"><img src="imges/teach_9.png" /></a>
               </li>
           </ul>
           <div class="Jjie">
               <span class="T1">萌萌雨5</span>
               <span class="T2">上海复旦大学硕士学位5</span></br>
               <p class="T3">
                   追求完美与一身的现代化教师女性，才华横溢
                   一表人才，优秀教师5
               </p>
           </div>
       </div>
   </div>
</body>
</html>
    
   

总结

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

博客地址：

http://www.cnblogs.com/wolf-sun/

博客版权：

本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！
再次感谢您耐心的读完本篇文章。

转载：http://www.cnblogs.com/wolf-sun/p/4052480.html

[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

写在前面

$.extend

重构代码

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景