【探究jQuery】jQuery.extend 和 jQuery.fn.extend 的区别

jquery在拓展方面，提供了两个很强大的方法：jquery.extend和jquery.fn.extend。

接下来我们来深究一下这兄弟俩的具体区别。

其实从字面上我们就可以看出，一个是对jquery的extend，一个是对jquery.fn的extend。

这么说可能有点笼统，但是很方便理解。

我们一步步来看。

首先，理解jquery是什么

我们知道，在使用jquery的过程中，我们可以jquery(“#a”)或者$(“.c”)来获取dom中的元素。

我们来看一下jquery源码中的定义（构造函数）：

// Define a local copy of jQuery
jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
}

我们看到一个很熟悉的字眼new，那我们也就知道了，jquery其实可以看作是一个类，$是他的简写方式。

那么jquery.extend也就很好理解了，是对这个jquery类的拓展，举个例子：

$.extend({
tip : function (msg) {
alert("My tips is" + msg);
}
});

那我们该怎么使用呢？我们要这么用：$.tip(“hello world”);

看到这里，我想，聪明的你应该大体有些明白的赶脚了~~

其次，理解jquery.fn是什么

同样，我们还是先来看一下jquery的源码中的定义：

jQuery.fn = jQuery.prototype = {
//省略中间部分
};

这下就一目了然了，原来jquery.fn就是jquery的原型对象呀~~

那jquery.fn.extend不就是对jquery原型对象的拓展么~

那也就是对$(“#a”)这样的拓展咯~

所以，我们再来个例子：

$.fn.extend({
tip : function (msg) {
alert("My tips is" + msg);
}
});

这个该怎么用呢？我想聪明的你肯定猜到了：$(“#a”).tip(“hello world”);

如果这时候再$.tip(“hello world”);这么用，肯定就要报错啦~

总结一下：一般只有很特殊的方法如.ajax();.trim();等才会对jquery类去拓展。通常我们去写的插件，都是对jquery原型对象的拓展。

欢迎大家加入我的QQ群：484805249

来一起讨论前端技术，互相学习。写的不到位的地方，还请指教。