jQuery插件擴展extend的簡單實現原理介紹
相信每位前端的小夥伴對jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去幫助我們更輕鬆的實現各種功能。
前幾天晚上,閒來無事,就自己動手寫了個簡單的jQuery插件,功能很簡單,只是讓選定的元素高亮,但是其中的一些思想,還是很值得學習的,可以戳這裏查看代碼。
本文不聊怎麼寫jQuery插件,我們聊聊怎麼去實現jQuery的`插件擴展功能,extend是怎麼實現把我們寫的插件掛載到jQuery上的。(大牛可以出門右拐......)
我們可以模擬創建一個迷你jQuery。
var $ = {};
好的,就這麼簡單......
下面我們要在這個對象上掛載一個extend方法,用於讓開發者爲我這個對象添加功能和方法。
var $ = { extend:function(ob){ /**暫時不管裏面寫什麼**/ } }
現在,我們就在$這個對象上添加了一個extend方法,外部可以通過$nd(obj)的方法去調用它。
假設現在我們要往$上面添加一個方法,也就是添加一個插件,我們只需要:
$nd({ myFunction:function(obj){ //do something.... } })
現在只需要$nction(obj);就可以實現方法內所要做的事了。
問題的關鍵來了,我們明明是把方法掛載在$nd上,爲什麼可以直接用$去調用?這裏就要看看extend內部是怎麼處理傳入的obj了。
var $ = { extend:function(obj){ for(var key in obj){ this.__proto__[key]=obj[key]; } }}
原來,extend把傳入的obj遍歷,然後掛到$的__proto__上了,這樣,$隨時都能夠調用原型上的方法。
當然,實際上jQuery的extend實現比這個複雜的多,這裏只是介紹了jQuery插件底層實現的基本思想,把公共的方法掛載到對象的原型上。
具體的插件編寫可以看看文章開頭的鏈接,我把插件編寫的每個細節都做了註釋,大家相互學習!
相關文章
-
Jquery中extend擴展方法的三個原型
1、extend(dest,src1,src2,src3...);它的含義是將src1,src2,src3...合併到dest中,返回值爲合併後的dest,由此可以看出該方法合併後,是修改了dest的結構的。如果想要得到合併的結果卻又不想修改dest的結構,可以如下使用:2 -
關於jquery插件jTimer(jquery定時器)使用方法
複製代碼 代碼如下:(function ($) {$nd({timer: function (action,context,time) {var _timer;if ($nction(action)) {(function () {_timer = setInterval(function () {if (!action(context)) {clearInterval(_time -
jQuery中outerWidth的方法介紹
xx同志自到公司工作以來,始終以精湛的技術挑起了全廠機縫車間的生產標兵大梁,她兢兢業業、盡心盡力,把勤奮工作當作自己最大的樂趣。她從一股新生的力量成長爲省五一勞動獎章獲得者、縣勞動模範獲得者、成功與榮譽的背後 -
jQuery中delegate()實例用法
本文實例講述了jQuery中delegate()方法用法。分享給大家供大家參考。具體分析如下:此方法爲匹配元素的子元素添加一個或多個事件,並規定當這些事件發生時運行的函數。語法結構:複製代碼 代碼如下:$(selector)gate(child -
jQuery中delegate與on的用法與區別
在jQuery1.7中 gate()已被()取代。對於早期版本,它仍然使用事件委託的最有效手段。在事件綁定和委派,delegate()和on在一般情況下,這兩種方法是等效的。gate() 指定的元素(屬於被選元素的子元素)添加一個或多個事件處理 -
怎樣理解jquery中ajax的dataType屬性選項值
jquery中ajax的dataType屬性用於指定服務器返回的數據類型,如果不指定,jQuery 將自動根據HTTP包MIME信息來智能判斷,如果datatype選項不填寫的話,會將返回的數據當成字符串處理。 一、ajax語法複製代碼 代碼如下:([set -
如何實現bootstrap jquery dataTable異步ajax刷新表格數據
導語:下面小編給大家提供瞭如何實現bootstrap jquery dataTable 異步ajax刷新表格數據,大家可以參考閱讀,更多詳情請關注應屆畢業生考試網。 異步請求var postData = {"env_name" : new_env_name,"env_url": new_env_ -
jquery之超簡單的div顯示和隱藏特效demo簡介
“十大傑出青年”候選人儲亮事蹟材料安徽幸福裏文化傳播有限公司執行董事、安徽亮華貿易有限公司董事長儲亮,志存高遠、敢爲人先、心繫社會、矢志不渝追求人生價值的體現。年僅32歲的他,已獨自創辦並管理着二家企業。其 -
asp.net+jquery Jsonp使用方法介紹
忙碌而又充實的一週又過去了,這一小段時間裏,我們一定有不少所感所惑吧,是時候仔細地寫一篇週記了。怎樣寫週記才更能吸引眼球呢?以下是小編爲大家整理的國小生週記6篇,供大家參考借鑑,希望可以幫助到有需要的朋友。國小生 -
關於Dtree+Jquery動態生成樹節點
dtree是一個由JavaScript編寫成的簡單的樹形菜單組件,目前免費並且開源。目前有很多的樹形菜單組件(比如ext),dtree是一種簡單易懂的js組件,不需要複雜的操作即可生產,同時支持動態從數據庫引入數據。Dtree目錄樹的總結