jquery.extend() 和jquery.fn.extend()的区别

引子

jQurey 提供了两种方法扩张方式,分别为

jQuery.fn.extend(object)和jQuery.extend(object).

想要搞清楚两种扩展方式之间的区别的话,先要了解什么是jQuery.fn.

本猿参考了 jQuery 的源码,发现其中玄机:

jQuery.fn = jQuery.prototype = {       init:function(selector, context){// ...};}

jQuery.fn = jQuery.prototype这句代码明确指出jQuery.fn指代的就是 jQuery 的原型


其次,我们要引入两个概念类方法实例方法

类方法是直接可以使用类引用,不需要实例化就可以使用的方法。一般在项目中类方法都是被设置为工具类使用;

实例方法必须先创建实例,然后才能通过实例调用该实例方法


jQuery可以看做是这个封装得非常好的类,而我们可以使用jQuery选择器来创建 jQuery 的实例。比如:使 id 选择器$('#btn')来创建一个实例。

区别

jQuery.extend(object)相当于对类方法的扩展。

jQuery.extend({/* 返回两个元素中较小的值 */

min:function(a, b){returna < b ? a : b;    },/* 返回两个元素中较大的值 */

max:function(a, b){returna > b ? a : b;    }});

jQuery.min(2,3);// 2jQuery.max(4,5);// 5

jQuery.fn.extend(object)是对jQuery.prototype上的扩展。


jQuery.fn.extend = jQuery.prototype.extend

这种方式相当对实例方法的扩展。

举个栗子:开发一个简单的小功能,使用该方法可以使选定元素内的文字变红。

$.fn.extend({    setRed:function(){        $(this).css("color","red");    }});$('.tip').setRed();

$(".tip")创建了一个jQuery实例,通过它可以调用成员方法setRed.

上述代码可以实现预想的扩展,但最好返回this以满足 jQuery链式操作的需要。

改良之后,代码如下:

$.fn.extend({    red:function(){return$(this).css("color","red");    }});


转载:https://segmentfault.com/a/1190000004082170

你可能感兴趣的:(jquery.extend() 和jquery.fn.extend()的区别)