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