jQuery插件开发心得

所谓插件,就是依附于其它原生应用的增强功能。如:chrome插件,jQuery插件。它是相对于原生应用而言的。它只能对应某个原生应用,就好比古代的一夫多妻制,丈夫可以独立生存,可以有多个妻子,而妻子只能依附于丈夫。今天难得有点时间,就总结一下我对于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上防止命名空间污染而已,如果内部实现没有用到jQuery的其它功能,那么这个工具插件就可以完全独立出来使用。它无关于jQuery元素

 

要编写工具插件,直接将相关功能挂载到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上。

比如要编写获取元素尺寸的插件(当然这个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 {};
}

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