av手机免费在线观看,国产女人在线视频,国产xxxx免费,捆绑调教一二三区,97影院最新理论片,色之久久综合,国产精品日韩欧美一区二区三区

jQuery

jQuery插件擴展extend的簡單實現(xiàn)原理介紹

時間:2024-08-17 22:50:55 jQuery 我要投稿
  • 相關推薦

jQuery插件擴展extend的簡單實現(xiàn)原理介紹

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

  前幾天晚上,閑來無事,就自己動手寫了個簡單的jQuery插件,功能很簡單,只是讓選定的元素高亮,但是其中的一些思想,還是很值得學習的,可以戳這里查看代碼。

  本文不聊怎么寫jQuery插件,我們聊聊怎么去實現(xiàn)jQuery的插件擴展功能,extend是怎么實現(xiàn)把我們寫的插件掛載到jQuery上的。(大牛可以出門右拐......)

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

  var $ = {};

  好的,就這么簡單......

  下面我們要在這個對象上掛載一個extend方法,用于讓開發(fā)者為我這個對象添加功能和方法。

  var $ = { extend:function(ob){ /**暫時不管里面寫什么**/ } }

  現(xiàn)在,我們就在$這個對象上添加了一個extend方法,外部可以通過$.extend(obj)的方法去調(diào)用它。

  假設現(xiàn)在我們要往$上面添加一個方法,也就是添加一個插件,我們只需要:

  $.extend({ myFunction:function(obj){ //do something.... } })

  現(xiàn)在只需要$.myFunction(obj);就可以實現(xiàn)方法內(nèi)所要做的事了。

  問題的關鍵來了,我們明明是把方法掛載在$.extend上,為什么可以直接用$去調(diào)用?這里就要看看extend內(nèi)部是怎么處理傳入的obj了。

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

  原來,extend把傳入的obj遍歷,然后掛到$的__proto__上了,這樣,$隨時都能夠調(diào)用原型上的方法。

  當然,實際上jQuery的extend實現(xiàn)比這個復雜的多,這里只是介紹了jQuery插件底層實現(xiàn)的基本思想,把公共的方法掛載到對象的原型上。

  具體的插件編寫可以看看文章開頭的鏈接,我把插件編寫的每個細節(jié)都做了注釋,大家相互學習!

【jQuery插件擴展extend的簡單實現(xiàn)原理介紹】相關文章:

數(shù)碼相機的曝光原理06-08

色彩搭配原理和技巧09-04

母乳的乳汁分泌原理知識02-08

亞偉速錄機的原理07-26

拉丁舞的簡單介紹01-09

高爾夫的短桿原理及練習要點09-05

原理圖設計基礎簡介07-22

滑移裝載機的工作原理02-01

計算機的組成及工作原理07-02

質(zhì)量管理創(chuàng)新如何實現(xiàn)05-16