jQuery 插件開髮指南：創(chuàng)建可複用的組件

核心要點:

• 創(chuàng)建 jQuery 插件允許開發(fā)者創(chuàng)建可在任何網(wǎng)頁上復(fù)用的組件，降低函數(shù)名衝突的風(fēng)險。插件使用 jQuery 的 fn 函數(shù)定義，添加到 jQuery 庫的方法會將 jQuery 對像作為 JavaScript 的 this 對像傳遞。
• 在開發(fā) jQuery 插件時，參數(shù)處理非常重要。為了避免複雜的參數(shù)處理，請傳遞單個 JSON 對象而不是多個參數(shù)?？梢允褂?jQuery 的 extend 函數(shù)合併默認參數(shù)和用戶參數(shù)。
• 確保方法返回 this 以允許其他函數(shù)進行鍊式調(diào)用，這是 jQuery 的關(guān)鍵特性，稱為“鍊式調(diào)用”。插件應(yīng)以 .js 擴展名保存，並在 jQuery 庫加載後包含在 HTML 頁面中。

jQuery 是最流行的 JavaScript 庫，許多網(wǎng)站都採用它來實現(xiàn)動態(tài)效果和 Ajax 功能。然而，相對較少的開發(fā)者深入研究插件開發(fā)。本教程將創(chuàng)建一個簡單的插件來解釋其基礎(chǔ)知識。我們的代碼將反轉(zhuǎn)一個或多個選定節(jié)點中的文本——查看演示頁面。

為什麼要創(chuàng)建 jQuery 插件？

簡而言之：復(fù)用。通過擴展 jQuery，您可以創(chuàng)建可在任何網(wǎng)頁上復(fù)用的組件。您的代碼被封裝，並且您不太可能在其他地方使用相同的函數(shù)名。

jQuery 的工作原理

在核心部分，jQuery 會接收 DOM 元素或包含 CSS 選擇器的字符串。它返回一個 jQuery 對象，這是一個類似數(shù)組的 DOM 節(jié)點集合。然後可以將一個或多個方法 鍊式調(diào)用 到這組節(jié)點，例如：

// 將所有 <p> 標簽的顏色設(shè)置為紅色
$("p").css("color", "red");</p>

注意：儘管 jQuery 庫名為“jQuery”，但“$”是引用它的快捷變量。請注意，其他庫可能會佔用“$”。

jQuery 插件的工作原理

jQuery 允許向其庫中添加方法。調(diào)用這些方法時，會將 jQuery 對像作為 JavaScript 的 this 對像傳遞?？梢愿鶕?jù)需要操作 DOM 節(jié)點，並且方法應(yīng)返回 this，以便可以鍊式調(diào)用其他函數(shù)。我們的示例插件將使用如下代碼調(diào)用：

// 反轉(zhuǎn)所有 <p> 標簽中的文本
$("p").reverseText();</p>

我們還將添加兩個可選參數(shù)：minlength 和 maxlength。如果定義了這兩個參數(shù)，則字符串長度必須在這兩個限制之間才能進行反轉(zhuǎn)。

插件聲明

插件使用 jQuery 的 fn 函數(shù)定義，例如：

// 將所有 <p> 標簽的顏色設(shè)置為紅色
$("p").css("color", "red");</p>

使用“jQuery”而不是“$”可以確保不會與其他 JavaScript 庫衝突。我們所有的內(nèi)部代碼也應(yīng)該引用“jQuery”而不是“$”。但是，我們可以使用匿名函數(shù)來節(jié)省一些輸入並減小文件大?。?/p>

// 反轉(zhuǎn)所有 <p> 標簽中的文本
$("p").reverseText();</p>

此函數(shù)立即運行，並將 jQuery 作為名為“$”的參數(shù)傳遞。由於“$”是一個局部變量，我們可以假設(shè)它始終引用 jQuery 庫，而不是第一個獲取全局“$”變量的另一個庫。

插件參數(shù)

我們的插件需要兩個參數(shù)：minlength 和 maxlength。最簡單的方法是將它們定義為函數(shù)參數(shù)，例如：

jQuery.fn.reverseText = function(params) { ... };

但是，如果我們決定稍後添加更多參數(shù)怎麼辦？我們的插件可能會有數(shù)十個選項——參數(shù)處理很快就會變得複雜。作為替代方案，我們可以傳遞單個 JSON 對象，例如：

(function($) {
    $.fn.reverseText = function(params) { ... };
})(jQuery);

reverseText 函數(shù)的第一行應(yīng)該定義一組默認參數(shù)，然後用任何用戶定義的值 覆蓋 這些參數(shù)。 jQuery 的 extend 函數(shù)可以幫我們處理這個問題：

(function($) {
    $.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// 示例
$("p").reverseText(0, 100);

因此，除非調(diào)用代碼覆蓋這些值，否則 params.minlength 為 0，params.maxlength 為 99999。

插件代碼

現(xiàn)在我們可以編寫我們的主要插件代碼：

(function($) {
    $.fn.reverseText = function(params) { ... }
})(jQuery);

// 示例
$("p").reverseText( { minlength: 0, maxlength: 100 } );

解釋：

1. this.each 函數(shù)遍歷所有 jQuery DOM 節(jié)點並調(diào)用一個匿名函數(shù)。
2. 在函數(shù)中，“this”包含單個節(jié)點。一個 jQuery 節(jié)點集合被賦值給 $t，以便我們可以運行 jQuery 方法。
3. 變量 origText 被賦值為 DOM 節(jié)點中的文本字符串。 newText 設(shè)置為空字符串。
4. 如果 origText 的長度在 params.minlength 和 params.maxlength 之間，則循環(huán)在 newText 中創(chuàng)建一個反轉(zhuǎn)的文本字符串。然後相應(yīng)地更新 DOM 節(jié)點。

不要破壞鍊式調(diào)用！

最後，我們應(yīng)該記住返回 jQuery 對象，以便可以鍊式調(diào)用其他方法：

// 合并默認參數(shù)和用戶參數(shù)
params = $.extend( {minlength: 0, maxlength: 99999}, params);

完整的代碼

我們的插件代碼現(xiàn)在已完成：

// 遍歷所有節(jié)點
this.each(function() {

    // 將單個節(jié)點表示為 jQuery 對象
    var $t = $(this);

    // 查找文本
    var origText = $t.text(), newText = '';

    // 文本長度是否在定義的限制內(nèi)？
    if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {
        for (var i = origText.length; i--; ) newText += origText.substr(i, 1);
        $t.text(newText);
    }

});

此文件保存為 jquery.reversetext.js。然後，我們可以在 jQuery 庫加載後將其包含在任何 HTML 頁面中，例如：

return this;

此頁面中的列表現(xiàn)在在第一個和第三個項目符號中反轉(zhuǎn)了文本（記住，第一個項目從 0 開始編號）：

資源：

• 查看插件演示頁面
• 查看插件 JavaScript 代碼
• 下載插件和示例代碼

您現(xiàn)在應(yīng)該對 jQuery 插件開發(fā)有了很好的了解。 SitePoint JavaScript 論壇也是一個尋求幫助和建議的好資源。即將推出：一個新的三部分教程，介紹如何將有用的頁面組件構(gòu)建為 jQuery 插件。

(此處省略了原文檔中的FAQ部分，因為該部分內(nèi)容與偽原創(chuàng)要求不符，且篇幅過長。)

以上是如何開發(fā)jQuery插件的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！