jQuery插件开发心得

1. 插件与库

库就相当于上面讲到的原生应用，可以独立去使用，这里就指jQuery，网站的一个页面，只要引入了jQuery，就可以使用它的方法。jQuery由于其方便简洁，很多开发人员就做了功能各异的插件出来。这些插件要使用，必须先包含了jQuery，否则便会运行出错。jQuery类似的JavaScript库还有很多，prototype,moontools,等等，当然这些库也有各自的很多插件。

2. jQuery挂载插件

插件相对于和依附于原生应用，那么，它与原生应用就有一个接入点，要写jQuery插件，就要从这个接入点着手。

2.1 jQuery的工具插件

工具插件是直接挂载在jQuery对象上的，可以直接用  $.工具名  或  jQuery.工具名  调用，jQuery中原生就有几个工具

如:

$.each    //遍历数组或对象
$.support    //判断浏览器是否支持某功能
$.browser   //存储浏览器信息
$.contains  //判断某个元素是否包含另一个元素
$.isArray    //判断某个对象是否数组

//....

要编写工具插件，直接将相关功能挂载到jQuery上就可以了

//在闭包内实现，防止污染外部命名空间
(function($){

//该函数返回浏览器窗口尺寸
var windowsize=function(){
    return {
		width:$(window).width(),
		height:$(window).height(),
		toString:function(){
			return ['浏览器宽度:',this.width,'\n','浏览器高度:',this.height].join('');
		}
	};
}

//挂载到jQuery上
jQuery.windowSize=windowsize;
//另外一种方式
jQuery.extend({windowSize:windowsize});

})(jQuery);

alert(jQuery.windowSize());

2.2 jQuery的功能插件

jQuery有两种对象，一种是原生的jQuery对象，另一种是选择html元素得来的对象，上面讲的jQuery工具插件就相当于类中的静态元素，只能在jQuery对象上调用。这里讲的功能插件，必须在jQuery元素上调用。举个简单的例子，jQuery的hide方法

如果直接这样调用

jQuery.hide();
//报错:
//TypeError: Object function (selector,context){return new 
//    jQuery.fn.init(selector,context,rootjQuery)} has no method 'hide'

jQuery(document.body).hide();

比如要编写获取元素尺寸的插件(当然这个jQuery中已经有了，这里仅作测试)

jQuery.fn.extend({
	getSize:function(){
		//这里this就指代jQuery元素
		return {
			width:this.width(),
			height:this.height(),
			toString:function(){
				//这里this指代尺寸对象，并非jQuery元素
				return ['宽:',this.width,'\n','高:',this.height].join('');
			}
		};
	}
});

alert(jQuery(document.body).getSize());

可能有同学注意到了，上面两个小插件的返回对象上都挂了一个toString方法，这个不是必要的，仅用于直接输出时生成一个格式化的数据，这里使用alert输出更明显

另外两小节举例时挂载的语法也不一样，其实都是通用的。

即，要编写工具插件，可以用jQuery.extend方法挂载，要编写功能插件，也可以写jQuery.fn.xxx=xxxx;

jQuery.extend({
	windowSize:function(){
		//不写内容了
		return {};
	}
});


jQuery.fn.getSize=function(){
	return {};
}

好了，这次就先总结到这里，下次有时间再写吧