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

前端之家收集整理的这篇文章主要介绍了[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

写在前面

文章《》,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病,总感觉不完美,心里一直惦记着那件事,也是在我写过那篇文章之后,没多久,在博客园首页看到了一篇文章,这里的代码看着比较简介,就想着抽时间将之前的那段js代码进行重构。说做就做,不想一想起之前写过那样的代码,心里就有疙瘩。所以也就有了这篇文章

$.extend

方法,之前虽然见过它,但并不了解它,为了加深彼此的了解,所以先对它进行初步的学习,并在以后的项目中,经常的去使用它,达到彼此熟悉。

方法。

$.extend()方法原型

$.extend(dest,src1,src2,src3....);

方法合并后,是修改了des的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

newSrc=$.extend({},src3...)

名称,那么后面的会覆盖前面的参数值,如果为后面的对象添加一个age属性并设置为11,则结果如下:

省略dest参数

方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:

方法合并到jquery的全局对象中。

$.fn.extend(src)

方法将src合并到jquery的实例对象中去,如:

调用扩展方法hello。

Meta

页面加载,调用按钮jquery对象实例的hello方法

几个例子

嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

result = $.extend( name: "John" { city: "Boston",county: "USA" last: "Resig" { state: "MA",county: "China" });

文章:

重构代码

方法,那么下面就对上篇文章中的图片走马展示的js进行重写。

代码如下:

Meta 图片对象 方法用来获取jquery对象的位置索引 图片的索引位置,以中间高亮图片为原点 hightIndex说明单击的图片在高亮图片右边 图片之前的单击处理 显示的li 显示的li 图片的处理 = < < < < < < < < < 萌萌雨5 上海复旦大学硕士学位5

总结

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

猜你在找的jQuery相关文章