引子

jQurey 提供了兩種方法擴張方式，分別為

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

想要搞清楚兩種擴展方式之間的區(qū)別的話，先要了解什么是jQuery.fn.

本猿參考了 jQuery 的源碼，發(fā)現(xiàn)其中玄機：

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

jQuery.fn = jQuery.prototype這句代碼明確指出jQuery.fn指代的就是 jQuery 的原型。

其次，我們要引入兩個概念類方法和實例方法。

類方法是直接可以使用類引用，不需要實例化就可以使用的方法。一般在項目中類方法都是被設(shè)置為工具類使用；

實例方法必須先創(chuàng)建實例，然后才能通過實例調(diào)用該實例方法。

jQuery可以看做是這個封裝得非常好的類，而我們可以使用jQuery選擇器來創(chuàng)建 jQuery 的實例。比如：使 id 選擇器$('#btn')來創(chuàng)建一個實例。

區(qū)別

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

這種方式相當對實例方法的擴展。

舉個栗子：開發(fā)一個簡單的小功能，使用該方法可以使選定元素內(nèi)的文字變紅。

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

$(".tip")創(chuàng)建了一個jQuery實例，通過它可以調(diào)用成員方法setRed.

上述代碼可以實現(xiàn)預(yù)想的擴展，但最好返回this以滿足 jQuery鏈式操作的需要。

改良之后，代碼如下：

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

轉(zhuǎn)載：https://segmentfault.com/a/1190000004082170