淺談jQuery外掛擴充extend的實作原理

相信每位前端的小夥伴對jQuery都不陌生吧，它最大的魅力之一就是有大量的插件，去幫助我們更輕鬆的實現各種功能。

前幾天晚上，閒來無事，就自己動手寫了個簡單的jQuery插件，功能很簡單，只是讓選定的元素高亮，但是其中的一些思想，還是很值得學習的，可以戳這裡查看程式碼。

本文不聊怎麼寫jQuery插件，我們聊聊怎麼去實作jQuery的插件擴充功能，extend是怎麼實作把我們寫的插件掛載到jQuery上的。 （大牛可以出門右轉......）

我們可以模擬創建一個迷你jQuery。

var $ = {};

好的，就這麼簡單......

#下面我們要在這個物件上掛載一個extend方法，用來讓開發者為我這個物件添加功能和方法。

var $ = {
   extend:function(ob){
      /**暂时不管里面写什么**/
   } 
 }

現在，我們就在$這個物件上加入了一個extend方法，外部可以透過$.extend(obj)的方法去呼叫它。

假設現在我們要往$上面加入一個方法，也就是新增一個插件，我們只需要：

$.extend({
   myFunction:function(obj){
     //do something....   
   }
 })

現在只需要$.myFunction(obj);就可以實現方法內要做的事了。

問題的關鍵來了，我們明明是把方法掛載在$.extend上，為什麼可以直接用$去呼叫？這裡就要看看extend內部是怎麼處理傳入的obj了。

var $ = {
  extend:function(obj){
    for(var key in obj){
      this.proto[key]=obj[key];
    }
  }
}

原來，extend把傳入的obj遍歷，然後掛到$的proto上了，這樣，$隨時都能夠呼叫原型上的方法。

當然，其實jQuery的extend實作比這個複雜的多，這裡只是介紹了jQuery插件底層實作的基本思想，把公共的方法掛載到物件的原型上。

具體的插件編寫可以看看文章開頭的鏈接，我把插件編寫的每個細節都做了註釋，大家相互學習！

#

以上是淺談jQuery外掛擴充extend的實作原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！