写在前面
前面写过一篇文章《[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为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.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进行重写。
代码如下：
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方法使用起来。
时间： 2024-11-03 05:23:29