jquery插件开发预学习

//是为学习的铺垫

Part 1 开发插件的两个很好的工具

在js中给一些类（严格的说并不是类）如Object、Function、Number、String等的原型prototype添加某个方法，那么它们的实例后代们都将具有该方法，一个栗子：

<a id="go" href="#test" name="test">Basic</a>    //HTML部分

Object.prototype.showNodeName = function(){
		this.οnclick=function() {
			alert(this.nodeName);
		};
		return false;
	}
document.getElementById('go').showNodeName();   //A

上例中，给Object对象添加了showNodeName的方法，那么它们的后代都可以调用这个方法。因为document.getElementById("go")获取出来的也是一个对象，所以这个对象可以直接调用上述方法。

好了，类似的原理迁移到jQuery上是怎样呢？

jQuery为开发插件提拱了两个很好的方法：jQuery.extend({})和jQuery.fn.extend({}),其中jQuery是等同于$符号，所以写作$.extend({})和$.fn.extend({})也是ok的。

如同js中的Object、Function这些“类”一样，jQuery也是一个类，$("#go") 会生成一个 jQuery类的实例，这与js中用document.getElementById('go')生成一个Object类的实例是一个道理。所以上述js可以改成jQuery：

$.fn.extend({
	showNodeName:function(){
		$(this).click(function(){
			alert($(this)[0].tagName);
		});
	return false;
	}
})
$('#go').showNodeName();

再回过头来， $.extend({})和$.fn.extend({})分别是什么？先说$.extend({})：

$.extend({})为jQuery类扩展方法，$("selector")生出的实例并不继承该方法，就像js中给Object类添加方法一样：

$.extend({
	max:function(a,b){return alert(x=a>b?a:b)}
})
$.max(22,11);  //22

既然能为jQuery类扩展方法，那么是否有对jQuery对象进行扩展呢？

jQueryobj.extend(defaults_obj,reset_obj1,reset_obj2[,reset_objn]);  //默认对象，重置对象

所以这里杀出了这样一个用法：用一个或多个其他对象来扩展默认对象——这个给插件提供了可配置参数的能力，后面有巧妙的应用。
jQuery.fn.extend({}); 对jQuery.prototype进得扩展，为jQuery类添加“成员函数，jQuery类的实例$("selector")这回就可以使用这个“成员函数”了。

 

Part 2 插件开发的模子

Part 1讲了工具了，这里继续讲下模子——即一个基础的插件长啥样。

//step 1 : 定义插件

$(function() {
   $.fn.插件名称 = function(options) {

	//设置默认参数，这将成为该插件投放出来的接口
      	var defaults = {
         	Event : "click",        //触发响应事件
         		msg : "Holle word!"        //显示内容
       	};
      	var options = $.extend(defaults,options);  //这就是Part 1讲的给jQuery对象做重置
      	var $this = $(this);        //you know this，，事件要响应在哪个对象元素上
      	//更多功能代码部分
      	//绑定事件
      	$this.live(options.Event,function(e){  //live绑定
         	alert(options.msg);
      	});
   }
});

更多功能代码部分，那就需要你根据实际去发挥了。~~~

但什么叫插件，不可能只插入一次就不用了的，所以在针对性上也尽可能的通用一些，那么留出的接口就要多加考虑了。好了，从上面的模子好像并不能看出插件有多方便，现在用一用，你就造有多轻便了。

step 2 ： 调用插件

<pre class="html" name="code"><a id="go" href="#test" name="test">Basic</a>    //HTML部分

$(function() {
	//绑定元素事件
   	$("#go").插件名称({
     	Event : "click",        //点击鼠标，触发事件
      	msg : "你想在这里显示神马？"     //显示内容
	});
});

//$("#go").插件名称(options)就相当于一个对象，执行一个方法     so easy~

这个插件你可以绑定在任何jQuery对象上，并赋予任何一种事件让它在触发时，显示一段内容。

最后，如果你和我一样是新手，那就弄几个小插件试试，然后再深入了解下2工具$.extend( ) 和$.fn.extend( )吧