亚洲精品中文字幕无乱码_久久亚洲精品无码AV大片_最新国产免费Av网址_国产精品3级片

jQuery

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

時(shí)間:2024-08-17 22:50:55 jQuery 我要投稿
  • 相關(guān)推薦

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

  相信每位前端的小伙伴對(duì)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è)對(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)鍵來了,我們明明是把方法掛載在$.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)的基本思想,把公共的方法掛載到對(duì)象的原型上。

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

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

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

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

母乳的乳汁分泌原理知識(shí)02-08

亞偉速錄機(jī)的原理07-26

拉丁舞的簡單介紹01-09

高爾夫的短桿原理及練習(xí)要點(diǎn)09-05

原理圖設(shè)計(jì)基礎(chǔ)簡介07-22

滑移裝載機(jī)的工作原理02-01

計(jì)算機(jī)的組成及工作原理07-02

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