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

核心要點(diǎn):

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

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

為什麼要?jiǎng)?chuàng)建 jQuery 插件？

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

jQuery 的工作原理

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

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

注意：儘管 jQuery 庫(kù)名為“jQuery”，但“$”是引用它的快捷變量。請(qǐng)注意，其他庫(kù)可能會(huì)佔(zhàn)用“$”。

jQuery 插件的工作原理

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

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

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

插件聲明

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

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

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

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

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

插件參數(shù)

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

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

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

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

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

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

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

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

插件代碼

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

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

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

解釋?zhuān)?/p>

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

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

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

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

完整的代碼

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

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

    // 將單個(gè)節(jié)點(diǎn)表示為 jQuery 對(duì)象
    var $t = $(this);

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

    // 文本長(zhǎng)度是否在定義的限制內(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 庫(kù)加載後將其包含在任何 HTML 頁(yè)面中，例如：

return this;

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

資源：

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

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

(此處省略了原文檔中的FAQ部分，因?yàn)樵摬糠謨?nèi)容與偽原創(chuàng)要求不符，且篇幅過(guò)長(zhǎng)。)

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