- 相關(guān)推薦
jQuery插件擴(kuò)展extend的簡單實(shí)現(xiàn)原理介紹
相信每位前端的小伙伴對(duì)jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去幫助我們更輕松的實(shí)現(xiàn)各種功能。
前幾天晚上,閑來無事,就自己動(dòng)手寫了個(gè)簡單的jQuery插件,功能很簡單,只是讓選定的元素高亮,但是其中的一些思想,還是很值得學(xué)習(xí)的,可以戳這里查看代碼。
本文不聊怎么寫jQuery插件,我們聊聊怎么去實(shí)現(xiàn)jQuery的插件擴(kuò)展功能,extend是怎么實(shí)現(xiàn)把我們寫的插件掛載到j(luò)Query上的。(大?梢猿鲩T右拐......)
我們可以模擬創(chuàng)建一個(gè)迷你jQuery。
var $ = {};
好的,就這么簡單......
下面我們要在這個(gè)對(duì)象上掛載一個(gè)extend方法,用于讓開發(fā)者為我這個(gè)對(duì)象添加功能和方法。
var $ = { extend:function(ob){ /**暫時(shí)不管里面寫什么**/ } }
現(xiàn)在,我們就在$這個(gè)對(duì)象上添加了一個(gè)extend方法,外部可以通過$.extend(obj)的方法去調(diào)用它。
假設(shè)現(xiàn)在我們要往$上面添加一個(gè)方法,也就是添加一個(gè)插件,我們只需要:
$.extend({ myFunction:function(obj){ //do something.... } })
現(xiàn)在只需要$.myFunction(obj);就可以實(shí)現(xiàn)方法內(nèi)所要做的事了。
問題的關(guān)鍵來了,我們明明是把方法掛載在$.extend上,為什么可以直接用$去調(diào)用?這里就要看看extend內(nèi)部是怎么處理傳入的obj了。
var $ = { extend:function(obj){ for(var key in obj){ this.__proto__[key]=obj[key]; } }}
原來,extend把傳入的obj遍歷,然后掛到$的__proto__上了,這樣,$隨時(shí)都能夠調(diào)用原型上的方法。
當(dāng)然,實(shí)際上jQuery的extend實(shí)現(xiàn)比這個(gè)復(fù)雜的多,這里只是介紹了jQuery插件底層實(shí)現(xiàn)的基本思想,把公共的方法掛載到對(duì)象的原型上。
具體的插件編寫可以看看文章開頭的鏈接,我把插件編寫的每個(gè)細(xì)節(jié)都做了注釋,大家相互學(xué)習(xí)!
【jQuery插件擴(kuò)展extend的簡單實(shí)現(xiàn)原理介紹】相關(guān)文章:
數(shù)碼相機(jī)的曝光原理06-08
色彩搭配原理和技巧09-04
母乳的乳汁分泌原理知識(shí)02-08
亞偉速錄機(jī)的原理07-26
拉丁舞的簡單介紹01-09
滑移裝載機(jī)的工作原理02-01
計(jì)算機(jī)的組成及工作原理07-02