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のインストール手順の詳細な説明

推薦する

MySQL ステートメントの配置と概要の紹介

SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...

Docker で Elasticsearch Kibana と ik Word Segender をデプロイする詳細な説明

esインストール docker pull elasticsearch:7.4.0 # -d : バッ...

Linuxパフォーマンス監視コマンドの簡単な紹介

システムでさまざまな IO ボトルネック、メモリ使用量の増加、CPU 使用率の増加などの問題が発生し...

Ubuntu システムログで /var/log/messages を設定する方法

1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...

Vueは適切なスライドアウトレイヤーアニメーションを実装します

この記事では、適切なスライドアウトレイヤーアニメーションを実装するためのVueの具体的なコードを例と...

効率をN倍に高めるVimクイックリファレンステーブル15個

昨年の前半から開発と娯楽のために Linux を使い始めましたが、今では Windows には戻れま...

GaussDB for MySQL パフォーマンス最適化の詳細な説明

目次背景インスピレーションは人生から生まれる速達配送の最適化原則GaussDB の最適化 (MySQ...

画像比較を実現するjQueryプラグイン

この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...

MySQL スロークエリ関連パラメータの原理の分析

MySQL スロー クエリ (正式名称はスロー クエリ ログ) は、MySQL によって提供されるロ...

Reactは一般的なスケルトン画面コンポーネントの例を実装します

目次スケルトンスクリーンとは何ですか?デモデザインのアイデア具体的な実装スケルトンスクリーンとは何で...

JDBC を使用して Mysql データベースに接続する際に発生する可能性のある問題の概要

まず、いくつかの概念を明確にします。 JDBC: Javaデータベース接続、Oricalによって規定...

MySQLインストーラがコミュニティモードで実行されている場合の解決策

今日、リモートデスクトップを実行してログインしているときにこのプロンプトを見つけました「MySQL ...

iview権限管理の実装

目次iview-admin2.0 組み込み権限管理権限に基づいてコンポーネントの表示を制御するカスタ...

bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明

SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...

jQueryはバウンドボールゲームを実装します

この記事では、バウンドボールゲームを実装するためのjQueryの具体的なコードを参考までに共有します...