jQuery外掛程式擴充套件extend的實現原理

相信每位前端的小夥伴對jquery都不陌生吧，它最大的魅力之一就是有大量的外掛程式，去幫助我們更輕鬆的實現各種功能。

前幾天晚上，閒來無事，就自己動手寫了個簡單的jquery外掛程式，功能很簡單，只是讓選定的元素高亮，但是其中的一些思想，還是很值得學習的，可以戳這裡檢視**

。本文不聊怎麼寫jquery外掛程式，我們聊聊怎麼去實現jquery的外掛程式擴充套件功能，extend是怎麼實現把我們寫的外掛程式掛載到jquery上的。（大牛可以出門右拐......）

我們可以模擬建立乙個迷你jquery。

var $ = {};

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

下面我們要在這個物件上掛載乙個extend方法，用於讓開發者為我這個物件新增功能和方法。

1

var $ = 
5 }

現在，我們就在$這個物件上新增了乙個extend方法，外部可以通過$.extend(obj)的方法去呼叫它。

假設現在我們要往$上面新增乙個方法，也就是新增乙個外掛程式，我們只需要：

1

$.extend(
5 })

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

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

1

var $ =6}
7 }

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

當然，實際上jquery的extend實現比這個複雜的多，這裡只是介紹了jquery外掛程式底層實現的基本思想，把公共的方法掛載到物件的原型上。

jquery 外掛程式擴充套件

第一步 建立乙個js檔案 第二步 編寫有關 jquery.fn.extend 必須return回乙個jquery物件 uncheck function 第三步 在頁面中使用該擴充套件方法 選擇全部 清除全部 測試測試 測試測試 測試測試 測試這裡有乙個細節 div是不可以放在runat server...

JQuery擴充套件外掛程式Validate

jquery.validate是基於jquery的乙個b s客戶端驗證框架，借助jquery的優勢，我們可以迅速驗證一些常見的輸入,大大提高了開發效率，下面是本人做的學習筆記 jquery擴充套件外掛程式validate 1基本使用方法 jquery擴充套件外掛程式validate 2通過引數設定驗...

自定義jquery外掛程式擴充套件

根據我們的需要有時候會擴充套件 例項方法，eg id customfunction 這裡需要用到 jquery 內建的 fn.extend方法,有關 fn.extend請參考 總體結構 function jquery eg 擴充套件jquery例項的parentname,獲取父節點的name htm...