jQueryプラグインの開発方法

jQueryプラグイン開発ガイド：再利用可能なコンポーネントの作成

コアポイント：

• jQueryプラグインの作成により、開発者は任意のWebページで再利用できるコンポーネントを作成して、機能名の競合のリスクを軽減できます。プラグインは、jQueryライブラリに追加されたメソッドのfn関数定義を使用します。 this
jQueryプラグインを開発する場合、パラメーター処理は非常に重要です。複雑なパラメーター処理を回避するには、複数のパラメーターの代わりに単一のJSONオブジェクトを渡します。 jQueryの
• 関数を使用して、デフォルトのパラメーターとユーザーパラメーターをマージできます。 extend
メソッドが
• を返して、他の関数が「チェーンズコール」と呼ばれるjQueryの重要な機能であるチェーンズコールを作成できるようにします。プラグインは、this拡張子で保存し、jQueryライブラリがロードされた後にHTMLページに含まれている必要があります。 .js

jQueryは最も人気のあるJavaScriptライブラリであり、多くのWebサイトが動的効果とAJAX機能を実現するために使用しています。ただし、プラグインの開発を掘り下げている開発者は比較的少ないです。このチュートリアルでは、その基本を説明する簡単なプラグインを作成します。私たちのコードは、1つ以上の選択されたノードからテキストを反転させます - デモページを表示します。

なぜjQueryプラグインを作成するのですか？ 要するに

：再利用。 jQueryを拡張することにより、任意のWebページで再利用できるコンポーネントを作成できます。あなたのコードはカプセル化されており、他の場所で同じ関数名を使用する可能性は低いです。

jqueryはどのように機能しますか

コア部分では、jQueryはCSSセレクターを含むDOM要素または文字列を受け取ります。 jqueryオブジェクトを返します。これは、ドムノードの配列のようなコレクションです。次に、このノードのグループのチェーンで、1つまたは複数の方法

と呼ぶことができます。 注：jQueryライブラリは「jquery」と呼ばれていますが、「$」はそれを参照するショートカット変数です。他のライブラリは「$」を占有する場合があることに注意してください。

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

jqueryプラグインはどのように機能しますか

jQueryを使用すると、ライブラリにメソッドを追加できます。これらのメソッドが呼び出されると、jQueryオブジェクトはjavascriptのオブジェクトとして渡されます。 DOMノードは必要に応じて操作でき、メソッドは他の関数をChainedと呼ぶことができるように

を返す必要があります。サンプルプラグインは、次のコードを使用して呼び出されます。

また、 2つのオプションパラメーターを追加します。これらの2つのパラメーターが定義されている場合、逆にするために、文字列の長さはこれら2つの制限の間にある必要があります。 this this

プラグインステートメント

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

minlengthプラグインはjQueryのmaxlength関数定義を使用します。たとえば

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

「$」の代わりに「jquery」を使用することで、他のJavaScriptライブラリと競合しないことが保証されます。すべての内部コードは、「$」ではなく「jquery」も参照する必要があります。ただし、匿名関数を使用して入力を保存し、ファイルサイズを削減できます。

この関数はすぐに実行され、「$」という名前のパラメーターとしてjQueryを渡します。 「$」はローカル変数であるため、グローバルな「$」変数を取得する最初の他のライブラリではなく、常にjQueryライブラリを参照すると想定できます。

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

プラグインパラメーター

プラグインには、2つのパラメーターが必要です。最も簡単な方法は、それらを関数パラメーターとして定義することです。

しかし、後でさらにパラメーターを追加することにした場合はどうなりますか？プラグインには多数のオプションがある場合があります。パラメーター処理はすぐに複雑になる可能性があります。別の方法として、単一のJSONオブジェクトを渡すことができます。 minlength 関数の最初の行は、デフォルトのパラメーターのセットを定義し、ユーザー定義の値maxlengthを使用して

パラメーターをオーバーライドする必要があります。 jqueryの

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

機能は、この問題に対処するのに役立ちます：

したがって、

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

コールコードがこれらの値を上書きしない限り、

は0およびreverseTextは99999です。 extendプラグインコード

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

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

メインプラグインコードを書き込むことができます：params.minlength params.maxlength

説明：

関数は、すべてのjQuery domノードをトラバースし、匿名関数を呼び出します。

関数では、「This」には単一のノードが含まれています。 jQueryノードコレクションは

に割り当てられているため、jQueryメソッドを実行できます。

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

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

変数

は、domノードのテキスト文字列として割り当てられます。

空の文字列に設定します。
1. this.eachの長さの長さが
と
2. の間にある場合、loopは$tで反転したテキスト文字列を作成します。次に、それに応じてDOMノードを更新します。
3. origTextnewTextチェーンコールを壊さないでください！
4. origText最後に、他の方法をチェーンと呼ぶことができるように、jqueryオブジェクトを返すことを忘れないでください：params.minlength params.maxlength newText
フルコード

プラグインコードが完了するようになりました：

このファイルを

として保存します。その後、jqueryライブラリをロードした後、任意のHTMLページに含めることができます。

// 合并默认参数和用户参数
params = $.extend( {minlength: 0, maxlength: 99999}, params);

このページのリストは、最初と3番目の弾丸のテキストを逆転させるようになりました（最初の項目は0から始まることを忘れない）：

リソース：

// 遍历所有节点
this.each(function() {

    // 将单个节点表示为 jQuery 对象
    var $t = $(this);

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

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

});

• プラグインのデモページを表示
• プラグインJavaScriptコードを表示
• プラグインとサンプルコードをダウンロードします

JQueryプラグインの開発をよく理解する必要があります。 SitePoint JavaScriptフォーラムは、ヘルプとアドバイスを求めるための優れたリソースでもあります。近日公開：jQueryプラグインに便利なページコンポーネントを構築する方法に関する新しい3部構成のチュートリアル。

（元のドキュメントのFAQパーツは、擬似オリジナル要件と一致せず、長すぎるため、ここでは省略されています。）

以上がjQueryプラグインの開発方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。