打算把我之前写的一个轮播组件封装成jquery插件,一边学一边改,这个轮播组件的设计思路是把图片拼成一排,然后修改整排的left属性,在配上js的animate方法,实现轮播滑动
这个组件的结构是这样的:
function () {} |
主要讲下我修改其为jquery插件,具体都改了哪些地方。
把全部代码放在闭包里
此时闭包相当于一个私有作用域,外部无法访问到内部的信息,并且不会存在全局变量的污染。
(function($) { |
添加 Carousel.DEFAULTS = {} 来保存默认参数
Carousel.DEFAULTS = { |
添加Plugin方法
这个Plugin方法是在bootstrap里面看到的,直接拿来用了。
$.extend(target, [object1], [objectN]) 这个方法主要用来合并两个或更多个对象的内容到第一个对象。
值得注意的是:多个对象合并时,会破坏第一个对象的结构,所以可传递一个空对象作为第一个参数。
function Plugin(option) { |
把Plugin绑定到jquery原型上,也就是$.fn上
$.fn.carousel = Plugin; |
使用$.proxy
在处理内部代码的时候,遇到在setTimeout和setInterval里面执行方法,如何引入正确this的情况
使用$.proxy可以非常干净的实现,$.proxy本身依靠得还是apply
扫描二维码关注公众号,回复:
7119383 查看本文章
感兴趣的看官点击这里 github:carousel
原文:大专栏 jquery插件开发相关