jQuery插件擴展extend的簡單實現原理介紹

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

jQuery插件擴展extend的簡單實現原理介紹

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

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

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

var $ = {};

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

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

var $ = { extend:function(ob){ /**暫時不管裏面寫什麼**/ } }

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

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

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

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

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

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

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

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

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