引子
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