jQuery.extend和jQuery.fn.extend的區別

瓜瓜東西發表於2015-01-17

jQuery.extend和jQuery.fn.extend的區別,其實從這兩個辦法本身也就可以看出來。很多地方說的也不詳細。這裡詳細說說之間的區別.

工具/原料

  • jQuery庫。
  • javascript

方法/步驟

  1. 我們先把jQuery看成了一個類,這樣好理解一些。

    jQuery.extend(),是擴充套件的jQuery這個類。

    假設我們把jQuery這個類看成是人類,能吃飯能喝水能跑能跳,現在我們用jQuery.extend這個方法給這個類擴充一個能唱歌的技能。這樣的話,不論是男人,女人,xx人.....等能繼承這個技能(方法)了。

    可以如下圖這樣寫著:

    jQuery.extend和jQuery.fn.extend的區別
  2. 然後:$.liu();這樣就能列印出來”liu“這個字串

    程式碼在下面:

    jQuery.extend和jQuery.fn.extend的區別
  3.  這說明啥啊,這說明.liu()變成了jQuery這個類本身的方法(object)嘛。他現在能”唱歌“了。

    但是吧,這個能力啊,只有代表全人類的 jQuery 這個類本身,才能用啊。你個人想用,你張三李四王五麻六,你個小草民能代表全人類嘛?

    所以啊,這個擴充套件也就是所謂的靜態方法。只跟這個 類 本身有關。跟你具體的例項化物件是沒關係滴。

    我們再看看jQuery.fn.extend()這個方法。

    從字面理解嘛,這個擴充的是jQuery.fn的方法。

    jQuery.fn是啥玩意呢?

    原始碼如下

    jQuery.extend和jQuery.fn.extend的區別
  4. 哦,原來jQuery.fn=jQuery.prototype,就是原型啊。

    那就一目瞭然了,jQuery.fn.extend擴充的是jQuery物件(原型的)的方法啊!

    物件是啥?就是類的例項化嘛,例如

    $("#abc") 

     這個玩意就是一個例項化的jQuery物件嘛。

    那就是說,jQuery.fn.extend擴充的方法,你得用在jQuery物件上面才行啊!他得是張三李四王五痳六這些例項化的物件才能用啊。

    說白了就是得這麼用(假設xyz()是擴充的方法):

    $('selector').xyz();

     你要是這麼用$.xyz();是會出錯誤滴。

    程式碼看下面圖片:

    jQuery.extend和jQuery.fn.extend的區別
  5.  和上邊的區別區別一目瞭然吧?

    其實吧,jQuery.extend()這個方法,主要是用來擴充個全域性函式啦,例如$.ajax()這種,要不就是擴充個選擇器啦,例如$.fn.each(),當選擇器用。

    大部分外掛都是用jQuery.fn.extend()。