編寫jQuery外掛程式

編寫外掛程式的目的是給已經有的一系列方法或函式做乙個封裝，以便在其他地方重複使用，提高開發效率和方便後期維護。本文將詳細介紹如何編寫jquery外掛程式

jquery的外掛程式主要分為3種型別

1、封裝物件方法

2、封裝全域性函式

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

3、選擇器外掛程式

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

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

2、所有的物件方法都應當附加到jquery.fn物件上，而所有的全域性函式都應當附加到jquery物件本身上

3、在外掛程式內部的this指向的是當前通過選擇器獲取的jquery物件，而不像一般方法那樣，如click，內部的this指向的是dom元素

4、可以通過this.each來遍歷所有的元素

5、所有的方法或函式外掛程式，都應當以分號結尾。否則壓縮的時候可能出現問題。為了穩妥些，甚至可以在外掛程式頭部先加上乙個分號，以免他人不規範的**影響自身的外掛程式**

6、外掛程式應該返回乙個jquery物件，以保證外掛程式的可鏈式操作

7、避免在外掛程式內部使用$作為jquery物件的別名，而應使用完整的jquery來表示，避免衝突。當然，也可以利用閉包來迴避這種問題，使外掛程式內部繼續使用$作為jquery的別名

利用閉包的特性，即可以避免內部臨時變數影響全域性空間，又可以在外掛程式內容繼續使用$作為jquery的別名。常見的jquery外掛程式都是以下這種形式的:

(function
())();

首先定義乙個匿名函式function()，然後用括號括起來，變成(function())這種形式，最後通過()這個運算子來執行。可以傳遞引數進行，以供內部函式使用

//
為了更好的相容性，開始前有個分號
;(function($))(jquery); 
//這裡就將jquery作為實參傳遞給匿名函式了

上面的**是一種常見的jquery外掛程式的結構

jquery提供了兩個用於拓展jquery功能的方法，即jquery.fn.extend()方法和jquery.extend()方法。jquery.fn.extend()方法用於拓展封裝物件方法的外掛程式，jquery.extend()方法用於拓展封裝全域性函式的外掛程式和選擇器外掛程式。這兩個方法都接受乙個引數，型別為object。object物件的"名/值對"分別代表"函式或方法名/函式主體"

【jquery.fn.extend()】

jquery.fn.extend()方法用於將乙個物件的內容合併到jquery的原型，以提供新的jquery例項方法

foo

bar全選

全不選

【jquery.extend()】

jquery.extend()方法用乙個或多個其他物件來擴充套件乙個物件，然後返回被擴充套件的物件

jquery.extend( target [, object1 ] [, objectn ] )

例如，合併settings物件和options物件，修改並返回settings物件

var settings = ;
var options = ;
var newoptions =jquery.extend(settings,options);
console.log(newoptions);
//object

jquery.extend()方法經常被用於設定外掛程式方法的一系列預設引數

function
foo(options),options);
}

如果使用者呼叫foo()方法的時候，在傳遞的引數options物件設定了相應的值，那麼就使用設定的值，否則使用預設值

通過使用jquery.extend()方法，可以很方便地用傳入的引數來覆蓋預設值。此時，對方法的呼叫依舊保持一致，只不過要傳入的是乙個對映而不是乙個引數列表。這種機制比傳統的每個引數都去檢測的方式不僅靈活而且更加簡潔。此外使用命名引數意味著再新增新選項也不會影響過去編寫的**，從而使開發者使用起來更加直觀明了

1、封裝jquery物件方法的外掛程式

編寫設定和獲取顏色的外掛程式color()，該外掛程式用於實現以下兩個功能:

(1)設定匹配元素的顏色

(2)獲取匹配的元素(元素集合中的第乙個)的顏色

由於是對jquery物件的方法拓展，因此採用拓展第一類外掛程式的方法jquery.fn.extend()來編寫，這裡給這個方法提供了乙個引數value，如果呼叫方法的時候傳遞了value這個引數，那麼就是用這個值來設定字型顏色，否則就是獲取匹配元素的字型顏色的值

;(function
()else
} 
}); 
})(jquery);

實際上，css()方法內容已經有判斷value是否為undefined的機制，所以才可以根據傳遞引數的不同而返回不同的值。因此，**可以刪減如下

;(function
() 
}); 
})(jquery);

測試文字

另外，如果要定義一組外掛程式，可以使用如下所示寫法:

;(function
(), "border":function
(value),
"background":function
(value) 
}); 
})(jquery);

2、封裝全域性函式的外掛程式

這類外掛程式是在jquery命名空間內部新增乙個函式

例如新增兩個函式，用於去除左側和右側空格。雖然jquery已經提供了jquery.trim()方法來去除兩端空格，但在某些情況下，會只希望去除某一側的空格

去除左側、右側的空格的函式分別寫成如下jquery**。(text||"")部分是用於防止傳遞進來的text這個字串變數處於未定義的特殊狀態，如果text是undeined，則返回字串""，否則返回字串text。這個處理是為了保證接下來的字串替換方法replace()方法不會出錯

;(function
($),
rtrim:
function
( text )
}); 
})(jquery);
var $str = " test ";
console.log($.trim($str));
//'test'
console.log($.ltrim($str));//
'test '
console.log($.rtrim($str));//
' test'

3、自定義選擇器

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

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

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

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

function
(a,i,m)

第乙個引數為a，指的是當前遍歷到的dom元素

第二個引數為i，指的是當前遍歷到的dom元素的索引值，從0開始

第三個引數是m，它是由jquery正則解析引擎進一步解析後的產物，是乙個陣列：其中最重要的乙個是m[3]，在$("div:gl(1)")中即為括號裡的數字「1」。

在jquery中已經有lt、gt和eq選擇器，因此這裡寫乙個介於兩者之間(between)的選擇器

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

;(function
($) });
})(jquery);

[注意]經測試，函式中第二個引數i的值始終為0，無法獲取索引值，這時就需要自造索引，**如下

;(function
($) });
})(jquery);

<
div>
<
i>0
i>
<
i>1
i>
<
i>2
i>
<
i>3
i>
<
i>4
i>
<
i>5
i>
div>
<
button 
id="btn"
>測試
button
>
<
script
>
;(function
($) });
})(jquery);$('
#btn
').click(
function
());
script
>

編寫jQuery外掛程式

jquery外掛程式編寫

jQuery 編寫外掛程式

jQuery 編寫外掛程式

編寫jQuery外掛程式

jquery外掛程式編寫

jQuery 編寫外掛程式

jQuery 編寫外掛程式

相關推薦