jQuery插件擴(kuò)展extend的簡(jiǎn)單實(shí)現(xiàn)原理介紹

時(shí)間：2024-07-08 00:54:59 jQuery 我要投稿

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

　　前幾天晚上，閑來(lái)無(wú)事，就自己動(dòng)手寫了個(gè)簡(jiǎn)單的jQuery插件，功能很簡(jiǎn)單，只是讓選定的元素高亮，但是其中的一些思想，還是很值得學(xué)習(xí)的，可以戳這里查看代碼。

　　本文不聊怎么寫jQuery插件，我們聊聊怎么去實(shí)現(xiàn)jQuery的插件擴(kuò)展功能，extend是怎么實(shí)現(xiàn)把我們寫的插件掛載到j(luò)Query上的。（大牛可以出門右拐......）

　　我們可以模擬創(chuàng)建一個(gè)迷你jQuery。

　　var $ = {};

　　好的，就這么簡(jiǎn)單......

　　下面我們要在這個(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)鍵來(lái)了，我們明明是把方法掛載在$.extend上，為什么可以直接用$去調(diào)用？這里就要看看extend內(nèi)部是怎么處理傳入的obj了。

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

　　原來(lái)，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的簡(jiǎn)單實(shí)現(xiàn)原理介紹】相關(guān)文章：