插件开发
访问量:1172

开发jQuery的扩展,通常有两种方式,第一种是通过jQuery函数prototype属性的别名jQuery.fn进行扩展;第二种就是通过采用jQuery.extend()方法进行扩展。这两种方式又有什么区别呢?

一、基于jQuery.extend()

关于jQuery函数详细信息如下:

jQuery.extend( target [, object1 ] [, objectN ] ) 将两个或更多对象的内容合并到第一个对象,若仅仅传递一个参数,则把传递的对象合并到JQuery对象上。

target

类型: Object

一个对象,如果附加的对象被传递给这个方法将那么它将接收新的属性,如果它是唯一的参数将扩展jQuery的命名空间。

object1

类型: Object

一个对象,它包含额外的属性合并到第一个参数

objectN

类型: Object

包含额外的属性合并到第一个参数

使用jQuery.extend()进行jQuery扩展开发是相当简单的,直接如下:

$.extend({
	'trace' : function(params){
		 console.log(params);
	}
});

由于trace方法是直接合并到JQuery对象上,所以可以直接通过$.trace('web : www.findme.wang'),而不能通过$().trace()方式调用。

二、基于jQuery.fn

在jQuery源码中,有这样一行代码 jQuery.fn = jQuery.prototype ,这说明jQuery.fn是jQuery原型prototype的一个别名。那么我们对其进行扩展的时候,就可以直接如下:

jQuery.fn.fucName = function(){
	//函数体
}

为了简便,可以把jQuery换成$符号。如果写在全局作用域中,是不是觉得有点暴露,当然这不是根本原因,主要是因为若$字符被占用,使用了 jQuery.noConflict(),那么我们插件里面就不能使用$了。于是我们很容易想到使用立即执行函数进行适当的封装,如下:

(function ($) {
  $.fn.myPlugin = function () {
    //插件代码
  };
})(jQuery);

需要注意几个事项

(1)JQuery的链式操作

在jQuery是支持链式操作的,比如$(".title").css("color", "#012").css({"background-color": "#FFF"}),那么我们当然更希望我们开发出来的插件,也能够支持链式操作,之所以能够链式操作,关键是在函数中返回了jQuery对象,由于在插件对应的函数里面this代表了当前的jQuery对象,所以返回this即可。

(function ($) {
  $.fn.trace = function (params) {
   	console.log(params);
    return this;
  };
})(jQuery);

(2)使用each函数

我们更多的时候是需要对集合中的元素进行处理,而不是jQuery对应的集合,这时候就需要使用each函数,因为each函数里面的this代表的是对应的每一个元素。且each函数返回了jQuery对象,于是我们的插件,可以这样写:

(function ($) {
  $.fn.trace = function () {
	return $.each(function(){
		console.log($(this).html());
	});  	
  };
})(jQuery);

(3)参数与默认值options

定一个插件,来修改元素的颜色,若没有指定颜色,颜色为#123。代码如下:

(function ($) {
  $.fn.firstPlugin = function () {
  	var defaults ={color:'#123'}
	var opts = $.extend({}, defaults, options);
	return $.each(function(){
		$(this).css('color', opts.color);
	});  	
  };
})(jQuery);

三、两种扩展开发的区别

这两种扩展的开发,还是有一定的区别。使用jQuery.extend()进行扩展开发,相当于在当前的jQuery对象上添加方法,类似

$.myPlugin = function(){
	//some code
}

使用jQuery.fn进行扩展开发,相当于在jQuery的原型prototype上添加方法。除了使用jQuery.fn.pluginName,jQuery提供了jQuery.fn.extend( object )方法,其效果是一样一样的。

参考

http://learn.jquery.com/plugins


请在下面输入需要执行的语句