1. 程式人生 > 其它 >理解jquery的$.extend & $.fn.extend用法

理解jquery的$.extend & $.fn.extend用法

jQuery為開發外掛提拱了兩個方法,分別是:

1、jQuery.fn.extend(); //dom方法

2、jQuery.extend(); // 工具方法


jQuery.fn

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

原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。 雖然 javascript 沒有明確的類的概念,但是用類來理解它,會更方便。 jQuery便是一個封裝得非常好的類,比如我們用 語句 $(“#btn1″) 會生成一個 jQuery類的例項。

jQuery.extend(object)

a、為jQuery類新增類方法,可以理解為新增靜態方法。如:

jQuery.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5
Objectj Query.extend( target, object1, [objectN])

b、用一個或多個其他物件來擴充套件一個物件,返回被擴充套件的物件

var settings = { 
 validate: false, 
 limit: 5, 
 name: "foo" 
}; 
var options = { 
 validate: true, 
 name: "bar" 
};
 jQuery.extend(settings, options); //結果:settings == { validate: true, limit: 5, name: "bar" } 
jQuery.fn.extend(object);

對jQuery.prototype進得擴充套件,就是為jQuery類新增“成員函式”。jQuery類的例項可以使用這個“成員函式”。 比如我們要開發一個外掛,做一個特殊的編輯框,當它被點選時,便alert 當前編輯框裡的內容。可以這麼做

$.fn.extend({
    alertWhileClick:function() {
        $(this).click(function(){
            alert($(this).val());
        });
    }
}); 
$("#input1").alertWhileClick();     // 這種寫法就更像是jQuery的連結寫法

jQuery.extend() 的呼叫並不會把方法擴充套件到物件的例項上,引用它的方法也需要通過jQuery類來實現,如jQuery.init(),而 jQuery.fn.extend()的呼叫把方法擴充套件到了物件的prototype上,所以例項化一個jQuery物件的時候,它就具有了這些方法,這 是很重要的,在jQuery.js中到處體現這一點

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一個物件到jQuery的 prototype裡去,這樣的話就是外掛機制了。

(function( $ ){ 
    $.fn.tooltip = function( options ) { }; //等價於 var tooltip = { function(options){ } 
}; 
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip })( jQuery );