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實(shí)現(xiàn)移動(dòng)端懸浮拖拽框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)移動(dòng)端懸浮拖拽框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
查詢功能是開發(fā)中最重要的一個(gè)功能，大量數(shù)據(jù)的顯示，我們用的最多的就是分頁。2011-02-02
Javascript中封裝window.open解決不兼容問題
window.open不兼容,其實(shí)不是, 因?yàn)椴荒苤苯訄?zhí)行, 必須通過用戶手動(dòng)觸發(fā)才行，下面有個(gè)實(shí)例，大家可以看看2014-09-09
這篇文章與大家分享的是10款非常有用的 Ajax 插件，有用于圖片的，用于分頁的，還有用于導(dǎo)航的。這些作者的想法特別新穎，希望你能從中找到自己需要的插件2012-03-03
Easyui使用Dialog行內(nèi)按鈕布局的實(shí)例
下面小編就為大家?guī)硪黄狤asyui使用Dialog行內(nèi)按鈕布局的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
easyui Droppable組件實(shí)現(xiàn)放置特效
droppable和draggable有類似的地方,不過區(qū)別點(diǎn)在于前者著重于將元素放進(jìn)某個(gè)容器中,而后者則著重于可拖拽(雖然可能一些效果兩者都可以實(shí)現(xiàn))。而且通過查看easyloader源碼可知道，droppable并不依賴于draggable。2015-08-08
jQuery Autocomplete簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了jQuery Autocomplete簡介，jQuery UI Autocomplete是jQuery UI的自動(dòng)完成組件，是我用過的最強(qiáng)大、最靈活的Autocomplete，它支持本地的Array/JSON數(shù)組、通過ajax請求的Array/JSON數(shù)組、JSONP、以及Function(最靈活)等方式來獲取數(shù)據(jù)2017-07-07
這幾天一直在研究JQuery，確實(shí)很好用，有很多需求都是要彈出框，并且要定位，我這寫個(gè)簡單的例子，希望能分享給大家.2010-12-12
jQuery dateRangePicker插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery dateRangePicker插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了jQuery使用ajaxSubmit()提交表單示例,使用延第三方插件jquery.form實(shí)現(xiàn),需要的朋友可以參考下2014-04-04