快捷導(dǎo)航

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

更新時(shí)間：2016年06月24日 10:52:56 投稿：jingxian

下面小編就為大家?guī)?lái)一篇jQuery插件擴(kuò)展extend的簡(jiǎn)單實(shí)現(xiàn)原理。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

前幾天晚上，閑來(lái)無(wú)事，就自己動(dòng)手寫(xiě)了個(gè)簡(jiǎn)單的jQuery插件，功能很簡(jiǎn)單，只是讓選定的元素高亮，但是其中的一些思想，還是很值得學(xué)習(xí)的，可以戳這里查看代碼。

本文不聊怎么寫(xiě)jQuery插件，我們聊聊怎么去實(shí)現(xiàn)jQuery的插件擴(kuò)展功能，extend是怎么實(shí)現(xiàn)把我們寫(xiě)的插件掛載到j(luò)Query上的。（大?？梢猿鲩T(mén)右拐......）

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

var $ = {};

好的，就這么簡(jiǎn)單......

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

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

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

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

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

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

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

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

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

當(dāng)然，實(shí)際上jQuery的extend實(shí)現(xiàn)比這個(gè)復(fù)雜的多，這里只是介紹了jQuery插件底層實(shí)現(xiàn)的基本思想，把公共的方法掛載到對(duì)象的原型上。

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

以上就是小編為大家?guī)?lái)的jQuery插件擴(kuò)展extend的簡(jiǎn)單實(shí)現(xiàn)原理全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线