jQuery插件擴(kuò)展extend的簡單實(shí)現(xiàn)原理
相信每位前端的小伙伴對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è)對象上掛載一個(gè)extend方法，用于讓開發(fā)者為我這個(gè)對象添加功能和方法。
var $ = {
extend:function(ob){
/**暫時(shí)不管里面寫什么**/
}
}
現(xiàn)在，我們就在$這個(gè)對象上添加了一個(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)的基本思想，把公共的方法掛載到對象的原型上。
具體的插件編寫可以看看文章開頭的鏈接，我把插件編寫的每個(gè)細(xì)節(jié)都做了注釋，大家相互學(xué)習(xí)！
以上就是小編為大家?guī)淼膉Query插件擴(kuò)展extend的簡單實(shí)現(xiàn)原理全部內(nèi)容了，希望大家多多支持腳本之家~
- 模仿JQuery.extend函數(shù)擴(kuò)展自己對象的js代碼
- jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解
- Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)
- jQuery中extend函數(shù)詳解
- jQuery中extend函數(shù)詳解
- 原生js實(shí)現(xiàn)復(fù)制對象、擴(kuò)展對象 類似jquery中的extend()方法
- jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法示例詳解
- Jquery中擴(kuò)展方法extend使用技巧
- 淺談jQuery中的$.extend方法來擴(kuò)展JSON對象
- jQuery中extend函數(shù)簡單用法示例
相關(guān)文章
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開發(fā)項(xiàng)目中扮演著重要角色。jQuery 使用簡單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶體驗(yàn)2011-12-12
jquery 如何動(dòng)態(tài)添加、刪除class樣式方法介紹
獲取與設(shè)置樣式 獲取class和設(shè)置class都可以使用attr()方法來完成。例如使用attr()方法來獲取p元素的class2012-11-11
利用jQuery彈出select選擇的值,當(dāng)單擊按鈕的時(shí)候就會(huì)執(zhí)行的一個(gè)方法，它的作用就是alert select值2013-04-04
這篇文章主要介紹了JQuery事件冒泡和默認(rèn)行為代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?funct
這篇文章主要介紹了jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?function，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
JQuery Jcrop 實(shí)現(xiàn)圖片裁剪的插件
非常不錯(cuò)的模擬 圖片裁剪效果的實(shí)現(xiàn)代碼，文件都是腳本之家本地的，大家可以直接另存為就可以了。2009-05-05
jQuery實(shí)現(xiàn)分章節(jié)錨點(diǎn)“回到頂部”動(dòng)畫特效代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)分章節(jié)錨點(diǎn)“回到頂部”動(dòng)畫特效代碼,涉及jQuery響應(yīng)鼠標(biāo)事件結(jié)合scroll實(shí)現(xiàn)頁面滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了Jquery $when done then的用法詳解的相關(guān)資料,本文還通過一個(gè)例子給大家介紹jquery when then(done) 用法，需要的朋友可以參考下2016-05-05
上一篇提到j(luò)Query中添加事件提供給客戶端程序員的接口方法有很多bind/click等，但其實(shí)現(xiàn)的核心方法是jQuery.event.add。2011-07-07
jquery實(shí)現(xiàn)頁面關(guān)鍵詞高亮顯示的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)頁面關(guān)鍵詞高亮顯示的方法,實(shí)例分析了jQuery插件highlight實(shí)現(xiàn)高亮顯示的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03