jQuery外掛程式機制

1、封裝對象方法

　　這種外掛程式是將對象方法封裝起來，用於對通過選取器擷取的jQuery對象進行操作，是最常見的一種外掛程式。此類外掛程式可以發揮出jQuery選取器的強大優勢，有相當一部分的jQuery的方法，都是在jQuery指令碼庫內部通過這種形式“插”在核心上的，例如parent()方法，appendTo()方法等。

2、封裝全域函數

　　可以將獨立的函數加到jQuery命名空間下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法，都是jQuery內部作為全域函數的外掛程式附加到核心上去的。

3、選取器外掛程式

　　雖然jQuery的選取器十分強大，但在少數情況下，還是會需要用到選取器外掛程式來擴充一些自己喜歡的選取器。

jQuery外掛程式的機制

　　jQuery外掛程式的機制很簡單，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，擴充jQuery的功能。

　　jQuery.fn.extend()多用於擴充上面提到的3種類型中的第一種，jQuery.extend()用於擴充後兩種外掛程式。這兩個方法都接受一個參數，類型為Object。Object對象的“名/值對”分別代表“函數或方法名/函數主體”。

編寫jQuery外掛程式的一些Tips

　　1、jQuery外掛程式的檔案名稱推薦命名為jquery.[外掛程式名].js，以免和其他JS庫外掛程式混淆。

　　2、所有的對象方法都應當附加到jQuery.fn對象上，而所有的全域函數都應當附加到jQuery對象本身。

　　3、在外掛程式頭部加上一個分號，以免他人的不規範代碼給外掛程式帶來影響。

　　4、所有的方法或函數外掛程式，都應當以分號結尾，以免壓縮時出現問題

　　5、除非外掛程式需要返回的是一些需要擷取的變數，外掛程式應該返回一個jQuery對象，以保證外掛程式的可鏈式操作。

　　6、利於jQuery.extend()方法設定外掛程式方法的預設參數，增加外掛程式的可用性。

jQuery外掛程式結構

　　jQuery外掛程式結構如下：

;(function($){    /*這裡放外掛程式代碼，可以將$作為jQuery的別名*/})(jQuery);

封裝jQuery對象方法外掛程式實戰

　　功能：設定選擇的元素的顏色，擷取選擇的首個元素的顏色

　　命名：jquery.color.js

　　結構：

;(function($){    $.fn.extend({         //這裡寫外掛程式代碼    });})(jQuery);

　　思路：設定一個參數value，如果調用時傳遞了value這個參數，就是設定顏色，否則為擷取顏色。擷取和設定顏色可以用jQuery提供的css方法即可

　　完整代碼：

;(function($){    $.fn.extend({        "color":function(value){            if(value==undefined){                return this.css("color");            }            else{                return this.css("color",value);            }        }    });})(jQuery);

　　由於css()方法在擷取顏色時已有取第一個元素的判斷，所以這裡直接用this.css("color")即可。

　　如果是一組外掛程式，可以用如下寫法：

;(function($){    $.fn.extend({        "color":function(value){            //外掛程式代碼        }，        "border":function(value){            //外掛程式代碼        }，        "background":function(value){            //外掛程式代碼        }    });})(jQuery);

　　外掛程式測試：

封裝全域函數外掛程式實戰

　　功能：單獨去除左側或單獨去除右側的空格

　　命名：jquery.lrtrim.js

　　結構：

;(function($){    $.extend({        ltrim:function(text){            //外掛程式代碼        }，        rtrim:function(text){            //外掛程式代碼        }    });})(jQuery);

　　思路：這類外掛程式是在jQuery命名空間內部添加一個函數，直接用Regex即可。

　　完整代碼：

;(function($){    $.extend({        ltrim:function(text){            return (text||"").replace(/^s+/g,"");        },        rtrim:function(text){            return (text||"").replace(/s+$/g,"");        }    });})(jQuery);

　　外掛程式測試：

自訂選取器外掛程式實戰

　　jQuery以其強大的選取器著稱，那麼jQuery的選取器的工作原理是什麼呢？

　　jQuery的選擇解析器首先會使用一組Regex來解析選取器，然後針對解析出的每一個選擇符執行一個函數，稱為選擇函數。最後根據這個選擇函數的傳回值為true還是false來決定是否保留這個元素，這樣就可以找到匹配的元素節點。

　　如$("div:gl(1)")，該選取器首先會擷取所有的<div>元素，然後隱式地遍曆這些<div>元素，並逐個將這些<div>元素作為參數，連同括弧裡的“1”等一些參數一起傳遞給gt對應的選取器函數進行判斷。如果返回true則保留，否則不保留，這樣得到的結果就是一個符合要求的<div>元素的集合。

　　選取器的函數一共接受3個參數，形式如下：

function (a,i,m){         //...}

　　第一個參數為a，指的是當前遍曆到的DOM元素。

　　第二個參數為i，指的是當前遍曆到的DOM元素的索引值，從0開始。

　　第三個參數是m，它是由jQuery正則解析引擎進一步解析後的產物，是一個數組：其中最重要的一個是m[3]，在$("div:gl(1)")中即為括弧裡的數字“1”。

　　在jQuery中已經有lt,gt和eq選取器，因此這裡寫一個介於兩者之間(between)的選取器。

　　功能：選擇索引值為a到b之間(a<b，a、b為正整數)的元素

　　命名：jquery.between.js

　　結構：

;(function($){    $.extend($.expr[":"],{        between:function(a,i,m){            //外掛程式代碼        }    });})(jQuery);

　　思路：在上面的三個參數中，m[3]為"a,b"的形式，因此把m[3]用","分隔，然後跟索引值i進行對比，如果i在m[3]表示的範圍之間就返回true，否則為false

　　完整代碼：

;(function($){    $.extend($.expr[":"],{        between:function(a,i,m){            var temp=m[3].split(",");            return +temp[0]<i&&i<+temp[1];        }    });})(jQuery);

　　註：這裡用+temp[0]、+temp[1]把字串形式的數字轉換成了數字

　　外掛程式測試：

小結

　　本文主要介紹了jQuery外掛程式的種類，機制，並針對每種類型進行了實戰，希望能對大家有所協助。本人也是jQuery的初學者，歡迎大家拍磚。