jQuery外掛程式編寫：對象層級外掛程式（二）

通過了上一篇的講解，相信你對於開發“實用函數”jQuery外掛程式的基本技巧有了一定的認識。比如通過即時執行函數來正確使用$函數，通過$.extend()函數實現設定物件的合并。在這一篇中將講解更常用的一種擴充jQuery的方法。即給jQuery封裝集（jQuery對象）添加方法。在這裡說明，本文所說的jQuery封裝集和jQuery對象是同一個概念。都是通過$()函數獲得的JS對象。但封裝集這個說法顯然更能說明其真實含義，畢竟多數時候$()都會返回多個DOM對象的封裝。

1. 初步認識

我們先來看看原有的jQuery封裝集如何調用對象方法執行相應的操作。

$("a").css("color", "red");

這段代碼先獲得一個封裝集封裝了所有的a對象，然後將所有的a對象添加紅色顯示。我們今天所說的這種外掛程式很容易就能寫出來。比如我們可以添加一個方法叫做setColorToRed()。可以直接將選定的元素設定成紅色。可以這樣寫

(function($) {$.fn.setColorToRed = function() {this.css("color", "red"); // this 直接指代封裝集對象return this; // 返回this，保證可以鏈式調用其它方法}})(jQuery);$("a").setColorToRed(); // 直接設定所有a為紅色

jQuery中 $.fn 是 $.prototype的別名，因此我們把方法添加到$.fn上就相當於給jQuery對象原型添加方法。最後方法中返回this，保證了方法支援鏈式調用。

2. jQuery對象級外掛程式的通常做法。

這種類型的外掛程式在很多時候都對選擇的DOM進行了增強。所謂增強可以理解為給選定的HTML添加CSS類、添加新的HTML標籤等等。比如有一個外掛程式叫做showDialog。在頁面中有這樣的一個HTML標籤

<div id="dialog"></div>

在執行 

$("#dialog").showDialog({title : "警告",content : "系統運行錯誤！"});

之後HTML會變成

<div id="dialog"></div><div id="dialog" class="dialog-container"><h1 class="dialog-title">標題></h1><div class="dialog-content"><p>系統運行錯誤！</p></div><button>確定</button></div>

通過jQuery的一系列操作很容易產生上述的HTML代碼並插入到DOM文檔樹中。再配合一定的CSS樣式就可以顯示出一個對話方塊出來。這樣就帶給我們一個編寫jQuery對象外掛程式的一般思路。

第一步：寫出完整的HTML檔案和CSS檔案，包含用到的圖片。並在瀏覽器中調好最終效果

第二步：通過jQuery外掛程式代碼中動態在我們選擇的DOM對象中添加需要的HTML代碼和相應的CSS類。注意盡量添加CSS類而不要添加ID屬性，因為有可能在同一個頁面調用多次你的外掛程式，就會產生多個ID相同的DOM 節點。

在配合上一篇中學到的相關知識。可以給出通用的建立對象層級外掛程式的模板代碼：

(function($) {var settings = {def1 = "def1",def2 = "def2",// 更多的預設配置};$.fn.myPlugin = function(options) {settings = $.extend(settings, options || {}); // 合并預設和使用者配置// 這裡return也是為了保證鏈式調用// 並且each方法會遍曆所有DOM對象，使得我們可以單個處理封裝集中的所有DOM對象return this.each(function() { // 這裡的this是一個DOM對象init(this);});//如果你的外掛程式很複雜，使用更多的函數分割邏輯是個好方法function init(target) {//這裡寫外掛程式的邏輯，可以動態添加DOM節點和為節點添加CSS樣式等}}})(jQuery);

最後總結一下，jQuery的對象外掛程式擴充一般都是添加新的DOM節點，來增強頁面效果。在編寫代碼前一定要先寫出靜態HTML代碼和CSS樣式。