jQuery插件擴展extend的實現原理

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

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

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

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

var $ = {};

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

下麵我們要在這個對象上掛載一個extend方法，用於讓開發者為我這個對象添加功能和方法。

1 var $ = {
2     extend:function(ob){
3           /**暫時不管裡面寫什麼**/
4     }  
5 }

現在，我們就在$這個對象上添加了一個extend方法，外部可以通過$.extend(obj)的方法去調用它。

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

1 $.extend({
2     myFunction:function(obj){
3         //do something....     
4     }
5 })

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

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

1 var $ = {
2     extend:function(obj){
3         for(var key in obj){
4             this.__proto__[key]=obj[key];
5         }
6     }
7 }

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

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

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