jquery插件开发相关

打算把我之前写的一个轮播组件封装成jquery插件，一边学一边改，这个轮播组件的设计思路是把图片拼成一排，然后修改整排的left属性，在配上js的animate方法，实现轮播滑动

这个组件的结构是这样的：

function () {}
Carousel.prototype.afreash = function(){}
Carousel.prototype.listener = function(){}
...

主要讲下我修改其为jquery插件，具体都改了哪些地方。

把全部代码放在闭包里

此时闭包相当于一个私有作用域，外部无法访问到内部的信息，并且不会存在全局变量的污染。

(function($) {
	
	
})(jQuery);

添加 Carousel.DEFAULTS = {} 来保存默认参数

Carousel.DEFAULTS = {
	interval: 5000,
	limit: 0.2,
	mouse: 50,
	toler: 0,
	speed: 500,
	up: false
}

添加Plugin方法

这个Plugin方法是在bootstrap里面看到的，直接拿来用了。
$.extend(target, [object1], [objectN]) 这个方法主要用来合并两个或更多个对象的内容到第一个对象。
值得注意的是：多个对象合并时，会破坏第一个对象的结构，所以可传递一个空对象作为第一个参数。

function Plugin(option) {
	//返回遍历结果是为了保存jquery的链式调用
	
	return this.each(function() {
		var $this   = $(this);
	    var data    = $this.data('xf.carousel');
	    //将默认参数和新修改的参数绑到一起
	    var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option);
	    //方法名
	    var action  = typeof option == 'string' ? option : false;
	    
	    if(!data) {
	    	//持久化数据
	    	$this.data('xf.carousel', (data = new Carousel(this, options)));
	    	data.init();
	    }
	    
	    if(typeof option == 'number') {
	    	data.go(option);
	    } else if(action) {
	
	    	data[action]();
	    } else if(options.interval) {
	    	data.options = options;
	    	data.afresh();
	    	data.alarm();
	    }
	});
}

把Plugin绑定到jquery原型上，也就是$.fn上

$.fn.carousel = Plugin;
$.fn.carousel.Constructor = Carousel;

使用$.proxy

在处理内部代码的时候，遇到在setTimeout和setInterval里面执行方法，如何引入正确this的情况
使用$.proxy可以非常干净的实现，$.proxy本身依靠得还是apply

感兴趣的看官点击这里 github:carousel

原文:大专栏 jquery插件开发相关

jquery插件开发相关

猜你喜欢