WHAT?【 $.fn.extend() 】vs【 $.extend() 】

廢話很少說，乾貨來了，轉自http://www.cnblogs.com/hellman/p/4349777.html

(function($){
  $.fn.extend({
    test:function(){
       alert($(this).attr('id'));
    }
})
})(jQuery)
 
$('#myDiv').test();
打印出 : myDiv
 
(function($){
$.extend({
test:function(){
alert('111');
}
})
})(jQuery)
$.test();
打印出：111

 

 
前者是綁定在頁面元素上的插件，後者是 綁定在jquery上的插件。

---

$.fn是指jquery的命名空間，加上fn上的方法及屬性，會對jquery實例每個有效。 
如擴展$.fn.abc(),即$.fn.abc()是對jquery擴展了一個abc方法,那麼後面你的每個jquery實例均可以引用這個方法了. 
那麼你能夠這樣子：$("#div").abc(); 

jQuery爲開發插件提拱了兩個方法，分別是： 

jQuery.extend(object);爲擴展jQuery類自己.爲類添加新的方法。 
jQuery.fn.extend(object);給jQuery對象添加方法。 

fn是什麼東西呢。查看jQuery代碼，就不難發現。 
. 代碼以下:

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

 

原來 jQuery.fn =jQuery.prototype.對prototype確定不會陌生啦。 
jQuery即是一個封裝得很是好的類，好比咱們用語句　$("#btn1") 會生成一個 jQuery類的實例。 

jQuery.extend(object);　爲jQuery類添加添加類方法，能夠理解爲添加靜態方法。如： 
. 代碼以下:

$.extend({ 
　　add:function(a,b){returna+b;} 
}); 

 

便爲　jQuery　添加一個爲add　的　「靜態方法」，以後即可以在引入 jQuery　的地方，使用這個方法了， 
$.add(3,4); //return 7 

jQuery.fn.extend(object);對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。 
好比咱們要開發一個插件，作一個特殊的編輯框，當它被點擊時，便alert當前編輯框裏的內容。能夠這麼作：

jQuery代碼 
. 代碼以下:

$.fn.extend({ 

alertWhileClick:function(){ 

$(this).click(function(){ 

alert($(this).val()); 
}); 
} 
}); 

 

---

 

思考

關於$(function(){})   jQuery(function(){　})   以及  (function(){　})(jQuery)

轉載http://blog.csdn.net/rambo_china/article/details/7742321

這裏其實是匿名函數

function(arg){...}
這就定義了一個匿名函數，參數爲arg

而調用函數 時，是在函數後面寫上括號和實參的，因爲操做符的優先級，函數自己也須要用括號，即：
(function(arg){...})(param)
這 就至關於定義了一個參數爲arg的匿名函數，而且將param做爲參數來調用這個匿名函數

而(function($){...}) (jQuery)則是同樣的，之因此只在形參使用$，是爲了避免與其餘庫衝突，因此實參用jQuery

**************************************************************************
其實就等於
var fn = function($){....};
fn(jQuery);

其實能夠這麼理解，不過要注意的是fn是不存在的
那個函數直接定義，而後就運行了。就「壓縮」成下面的樣子了
(function($){...})(jQuery) 
**************************************************************************
簡單理解是(function($){...})(jQuery)用來定義一些須要預先定義好的函數
$(function(){ })則是用來在DOM加載完成以後運行\執行那些預行定義好的函數.
**************************************************************************

開發jQuery插件時總結的一些經驗分享一下。 
1、先看 

jQuery(function(){ 
}); 
全寫爲 
jQuery(document).ready(function(){ 

}); 

意義爲在DOM加載完畢後執行了ready()方法。 
2、再看 

(function(){ 

})(jQuery)； 
其其實是執行()(para)匿名方法,只不過是傳遞了jQuery對象。 

3、總結 

jQuery(function(){　});用於存放操做DOM對象的代碼，執行其中代碼時DOM對象已存在。不可用於存放開發插件的代碼，因 爲jQuery對象沒有獲得傳遞，外部經過jQuery.method也調用不了其中的方法（函數）。 
(function(){　})(jQuery)；用於存放開發插件的代碼，執行其中代碼時DOM不必定存在，因此直接自動執行DOM操做的代碼 請當心使用。