相信每位前端的小伙伴對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的簡單實現原理全部內容了,希望大家多多支持~