jQueryのチェーンプログラミングスタイルの詳細な例

jQueryのチェーンプログラミングスタイルの詳細な例

チェーンプログラミングの実装原理

jQuery を使用すると、開発者は常にドット構文を使用して独自のメソッドを呼び出すことができます。主な理由は、jQuery がそれを実装するために内部的に js オブジェクトを使用するためです。

jQueryでは、同じ要素や他の関連する要素(兄弟要素、親子要素)に対して操作を続ける場合は、. 構文(ドット構文)を使用して記述を続けることができます。

$("#box").css("背景", "ピンク").css("フォントサイズ":"29px");
$("#box").siblings().css("背景", "");

次のように書くことができます:

$("#box").css("背景", "ピンク").siblings().css("背景", "赤");

チェーンプログラミングを実装するには、jQuery セレクター自体が jQuery オブジェクトになります。 jQuery はこれを内部的に使用して自分自身を返します。

    //js でオブジェクトを宣言します var obj = {  
         name:"名前", 
        説明: 関数(){   
        console.log(this); // 現在のオブジェクトを出力します console.log(this.name); // オブジェクトのプロパティを呼び出します return this; // チェーンプログラミングの原則は、メソッドを呼び出した後、メソッド自体がオブジェクトを返すことです。
},  
      読み取り: 関数(){  
        console.log("こんにちは!");    
        これを返します。 
    }}


jQuery のチェーンプログラミングスタイルの例

まず、jQuery のチェーン プログラミング スタイルをケースを使って説明します。まず、リストを表示するページを作成します。コードは次のとおりです。

<本文>
    <div>
        <ul class="メニュー">
            <li class="level1">
                <a href="#">フルーツ</a>
                <ul class="level2">
                    <li><a href="#">アップル</a></li>
                    <li><a href="#">パイナップル</a></li>
                    <li><a href="#">カンタロープ</a></li>
                </ul>
            </li>
            <li class="level1">
                <a href="#">主食</a>
                <ul class="level2">
                    <li><a href="#">麺類</a></li>
                    <li><a href="#">マントウ</a></li>
                    <li><a href="#">米</a></li>
                </ul>
            </li>
        </ul>
    </div>
</本文>

<script type="text/javascript">
    $(関数() {
        $(".level1 > a").click(function() {
            $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide();
            false を返します。
        });
    });
</スクリプト>

コードを実行した後の効果を下の図に示します。

上記のコードの拡張効果は、jQuery のチェーン操作によって実現されます。現在のクラスを追加する操作、子要素を照会するためのメソッド呼び出し、アニメーション メソッドの呼び出しはすべて同じ要素に対して実行されます。したがって、jQuery オブジェクトを取得した後、後続のすべてのメソッドと属性の呼び出しは、"." を通じて連続的に呼び出されます。このモードはチェーン操作です。

コードの可読性と保守性を高めるために、上記のチェーンコード形式を次のように変更します。

<script type="text/javascript">
    $(関数() {
        $(".level1 > a").click(function() {
            // 現在のスタイルを現在の要素に追加します $(this).addClass("current")
                // 次の要素が表示されます。next().show()
                // 親要素の兄弟要素の子要素 ​​a から現在のスタイルを削除します。element.parent.siblings().children("a").removeClass("current")
                // 次の要素は hidden.next().hide(); です。
            false を返します。
        });
    });
</スクリプト>

標準形式を調整すると、コードが読みやすくなり、その後のメンテナンスも便利になります。

同時に、同じ jQuery オブジェクトに対してチェーン操作を実行する場合は、主に次の 3 つの形式仕様に従います。

(1)同じオブジェクトに対する3つ以下の操作は、1行で直接記述することができます。コードは次のようになります。

<script type="text/javascript">
    $(関数() {
        $("li").show().unbind("click");
    });
</スクリプト>

(2)同じオブジェクトに対して複数の操作を行う場合は、1行に1つの操作を記述することをお勧めします。コードは次のようになります。

<script type="text/javascript">
    $(関数() {
        $(this).removeClass("マウスアウト")
            .addClass("マウスオーバー")
            。停止()
            .fadeTo("速い", 0.5)
            .fadeTo("速い", 1)
            .unbind("クリック")
            .click(関数() {
                .......
            });
    });
</スクリプト>

(3)複数のオブジェクトに対する少数の操作の場合は、オブジェクトごとに1行記述することができます。サブ要素が関係する場合は、適切なインデントを考慮してください。コードは次のとおりです。

<script type="text/javascript">
    $(関数() {
        $(this).addClass("highLight")
            .children("a").show().end()
            .siblings().removeClass("highLight")
            .children("a").hide();
    });
</スクリプト>

上記はjQueryのチェーンプログラミングスタイルについてです。

要約する

jQuery チェーン プログラミング スタイルに関するこの記事はこれで終わりです。jQuery チェーン プログラミングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript チェーンプログラミングを使用して JQuery 関数をシミュレートする

<<:  MySQL クエリにおける LIMIT の大きなオフセットによって引き起こされるパフォーマンス低下の分析

>>:  CentOS 7へのJenkinsのインストール手順の詳細な説明

推薦する

Saltstack に Zabbix サービスをデプロイする方法を説明します

目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...

MySQLデータのセキュリティを確保するための提案

データは企業の中核資産であり、企業にとって最も重要なタスクの 1 つです。注意しないと、データが意図...

Excel エクスポートは docker 環境では常に失敗する

Excel のエクスポートは、docker 環境では常に失敗します。最も直接的な原因は、中国語フォン...

VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル

ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...

HTML と CSS を書くための 6 つの最も効果的な方法

この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

Linuxの運用と保守の基本プロセス管理と環境構成分析

目次1. プロセスの基本的な概要2. プロセスの構成要素3. プロセス環境4. プロセスステータス5...

JSはキャンバス技術を使用してeChartsの棒グラフを模倣します

Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...

MySQL でデータをクエリし、条件に基づいて別のテーブルに更新する方法の例

この記事では、MySQL が条件に基づいてデータをクエリし、別のテーブルに更新する方法を例を使用して...

JavaScript進捗管理の詳しい説明

目次序文質問原理テスト序文プログラムを作成するときに、読み込みの進行状況やアップロードの進行状況など...

CSSを使用して、頻繁に表示される奇妙なボタンを簡単に実装します。

背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...

Docker可視化管理ツールであるDocker UIの使用

1. DockerUIの紹介DockerUI は Docker API をベースとしており、Dock...

本をめくる効果を実現するネイティブJS

この記事では、ネイティブ JS で実装された本をめくる効果の図を紹介します。効果は次のとおりです。 ...

CD コマンドを使わずに Linux でディレクトリ/フォルダに入る方法

ご存知のとおり、cd コマンドがないと、Linux でディレクトリを切り替えることはできません。それ...

Nginx で Angular プロジェクトを展開する際の落とし穴

コンパイル後にAngularプロジェクトをNginxにデプロイする方法をオンラインで検索すると、ほと...