DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery插件擴展extend的簡單實現原理
jQuery插件擴展extend的簡單實現原理
編輯:關於JavaScript     

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

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

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

我們可以模擬創建一個迷你jQuery。

var $ = {};

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

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

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

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

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

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

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

問題的關鍵來了,我們明明是把方法掛載在$.extend上,為什麼可以直接用$去調用?這裡就要看看extend內部是怎麼處理傳入的obj了。

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

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

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

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

以上就是小編為大家帶來的jQuery插件擴展extend的簡單實現原理全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved