jquery插件开发2

前面我们学会了如何封装一个插件，并且做了一个简单的拖拽效果的插件，现在我们需要再完善一下这个插件。

 

首先，我们知道，很多插件其实是可以配置参数的

插件的参数怎么做呢？

我们来看一下，此处我们做一个改变div宽度和高度的插件（简单到丧心病狂）

;(function($){
	var defaults={
		width:300,
		height:200
	};
	$.fn.changeDiv=function(options){
		var new_defaults=$.extend({},defaults,options);
		return this.each(function(){
			$(this).animate({
				"width":new_defaults.width,
				"height":new_defaults.height
			});
		});
	}
})(jQuery);

我们看到，插件内部，我们声明了一个默认配置对象default，然后呢options作为形参传入，调用的时候是这样的：

$(function(){
	$("#box").click(function(){
		$(this).changeDiv({
			width:500,
			height:50
		});
	});
});

 

来，解释几个问题

1、defaults是什么鬼？

答：defaults是在书写插件的时候定义的默认配置参数，可以为空，也可以有一定的属性，这样的话，如果外界调用插件的时候没有设置参数，那么就使用默认参数defaults的属性来参与运算。

2、var new_defaults=$.extend({},defaults,options);代表什么意思？

答：$.extend是jquery中用来整合数据的工具方法，详细的不解释（主要怕说得太复杂），只需要记住，$.extend()可以把外界赋给的参数和默认参数合并起来，调用形式不一样得到的结果也不一样——

合并defaults和options，并且修改defaults

$.extend(defaults,options);

合并defaults和options，但不修改defaults，而是返回一个新的对象

var new_defaults=$.extend({},defaults,options);

现在看来我们的插件是不是更丰富了？

 

接下来继续完善这个插件

现在的需求是：点击这个div之后不仅仅宽高改变，还要可以调用方法。看看怎么做

;(function($){
	var defaults={
		width:300,
		height:200
	};
	var methods={
		createHtml:function(obj){
			var tit=$("<h3 class='div-tit'>这是生成的标题</h3>"),
				content=$("<p>这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容这是测试内容</p>");
			obj.append(tit).append(content);
		},
		getInfo:function(){
			console.log("这是一个DIV");
		}
	};
	$.fn.changeDiv=function(options){
		if(methods[options]){
			methods[options].apply(this,Array.prototype.slice.call(arguments, 1));
		}else if(!options || typeof options==="object"){
			var new_defaults=$.extend({},defaults,options);
			return this.each(function(){
				$(this).animate({
					"width":new_defaults.width,
					"height":new_defaults.height
				});	
			});
		}else{
			$.error("对不起，你的参数有问题");
		}
		
	}
})(jQuery);

　　

这样的写法里面，我们需要注意的几个问题：

1、尽可能把公共方法都放到唯一命名空间中去。这样能保持jquery插件命名空间的干净。

2、Array.prototype.slice.call(arguments, 1)的作用是把arguments转换成一个数组，（参数中的1是代表截取的起始点）

3、每一次都需要判断参数类型，然后才开始执行对应的代码