ホームページ >ウェブフロントエンド >jsチュートリアル >効率的な jQuery コードを作成するための 4 つの原則と 5 つのヒント_jquery

効率的な jQuery コードを作成するための 4 つの原則と 5 つのヒント_jquery

WBOY
WBOYオリジナル
2016-05-16 16:51:19970ブラウズ

jQuery の記述原則:

1. jQuery を使いすぎない

1. jQuery がどんなに高速であっても、ネイティブ JavaScript メソッドとは比較にならず、作成された jQuery オブジェクトには膨大な量の情報が含まれます。したがって、使用できるネイティブ メソッドがある場合は、jQuery の使用を避けるようにしてください。

コードをコピー コードは次のとおりです。

$("a").click( function() {
alert($(this).attr("id"));
});
//改善↓
$("a").click(function() {
アラート(this.id);
});


2. 多くの jQuery メソッドには、jQuery オブジェクト用と jQuery 関数用の 2 つのバージョンがあります。後者は jQuery オブジェクトを介して動作しないため、オーバーヘッドが比較的少なく、高速です。

コードをコピー コードは次のとおりです。

var $text = $("#text ");
var $ts = $text.text();
//改良↓
var $text = $("#text");
var $ts = $.text( $text );

ここでは "$.text()" の組み込み関数を示します。その他の同様の関数には "$.data()" などがあります。


2. jQuery オブジェクトのキャッシュ

DOM 要素の検索には、実際には多くのメモリ オーバーヘッドが伴います。セレクターの使用はできるだけ少なくし、将来の繰り返し使用を容易にするために、選択した結果をできるだけキャッシュする必要があります。同じセレクターを複数回出現させないように注意してください。

例:

コードをコピー コードは次のとおりです:

$(" #top") .find("p.classA");
$("#top").find("p.classB");
改善↓
var queued = $("#top ");
cached.find("p.classA");
cached.find("p.classB");

3. DOM 構造への変更を少なくします

DOM 構造を複数回変更する場合は、変更する部分を取り出し、変更が完了したら元に戻します。ここでの基本的な考え方は、本当に必要なものをメモリ内に構築し、最後に最も効率的な DOM 更新操作を実行することです。

例:

コードをコピー コードは次のとおりです:

var top_100_list = [... ], // これは 100 個の文字列の配列です
$mylist = $("#mylist");
for (var i=0, l=top_100_list.length; i $mylist.append("
  • " top_100_list[i] "
  • "); // 100 回の DOM 操作
    }
    改善後↓
    var top_100_list = [. ..],
    $mylist = $("#mylist"),
    top_100_li = "" // この変数は、変更された文字列
    を保存するために使用されます (var i=0, l =top_100_list .length; i top_100_li = "
  • ";
    }
    $mylist.html(top_100_li); // DOM 操作は 1 つだけです
  • 4. 命名規則

    jQuery コードは必然的に JS コードと混在します。jQuery コードを厳密で整然としたものにし、独自の命名ルールを標準化することで、コードをより良く改善できます。読みやすさ。

    1. 関数名: function getResultByUserId(){..}、キャメルの命名方法に従い、最初の文字を小文字、単語の最初の文字を大文字にして、できるだけ短く、明確に表現してください。方法の目的。

    は次のように定義することもできます:

    コードをコピー コードは次のとおりです:

    $.flushCartItemList = function() {
    isAjaxDate = true;
    }

    2. パラメータ名: function method(recordIdx, RecordVal){..}、関数名と同じ、パラメータには省略形を使用してください。
    名前は意味のあるものでなければならず、インデックス: idx、値: val、名前: nm などの省略形も非常に特殊です。

    3. 変数名: var user_id; var user_list_tab; var user_list_tr_1; (通常、「naming_element_index」の規則に従って、単語としてアンダースコアで区切られます)。

    jQuery オブジェクトの変数名には、JavaScript オブジェクトを区別するために「$」を接頭辞として付ける必要があります。


    jQuery ライティング スキル:

    1. セレクターの選択

    セレクターは jQuery の基礎です。最も効率的なセレクターを選択するには、まずさまざまなセレクターのパフォーマンスの違いを理解する必要があります。

    ①IDセレクターとタグ要素セレクター: $("#ID");

    jQuery は内部でブラウザのネイティブ メソッド (getElementById();、getElementByTagName();) を自動的に呼び出すため、実行速度が速くなります。

    ②クラスセレクター: $(".Class");

    jQuery はすべての DOM ノードを走査して class=Class の DOM オブジェクトを見つけるため、実行速度が遅くなります。

    ③疑似クラスセレクターと属性セレクター: $(":Type"); $("[Attribute='Value']");

    ブラウザにはネイティブ メソッドがないため、これら 2 つのセレクターの実行が最も遅くなります。ただし、一部のサードパーティ ブラウザーには、このタイプのセレクターのパフォーマンスが大幅に向上する querySelector() メソッドと querySelectorAll() メソッドが追加されている可能性があります。

    2. チェーン書き込み

    コードをコピー コードは次のとおりです。
    $("div").find("h3" ).eq (2).html("こんにちは");

    チェーン書き込みメソッドを使用すると、jQuery は各ステップの結果を自動的にキャッシュします。これは、非チェーン書き込みメソッド (手動キャッシュ) よりも高速です。


    3. 効率的な循環

    ループ処理は常に時間がかかります。JavaScript のネイティブ ループ メソッド for および while は、jQuery の「.each()」よりも高速です。また、forループに関しては以下の書き方が最も効率的です。

    コードをコピー コードは次のとおりです。

    for (var i = 0, len = array.length ; i < len i ) {
    // アラート(i);
    }

    最初に変数を宣言してからループ操作を実行すると、配列「for (var i in arr)」を走査するよりも効率が高く、配列の長さを取得する「for (var)」よりも効率的です。 i = 0; i

    4. 文字列の接続

    開発中に文字列の結合が頻繁に発生します。文字列の結合に「=」メソッドを使用するのは非常に効率的ではありません。配列の「.join()」メソッドを使用できます。

    コードをコピー コードは次のとおりです:

    var array = [];

    for(var i = 0; i array[i] = "";
    }

    document.getElementById("one").innerHTML = array.join("");

    私はネイティブの配列メソッド ".push()" を好んで使用していました。実際、arr[i] または arr[arr.length] を直接使用した方が高速ですが、その違いは大きくありません。

    5. ページの読み込み

    $(function(){}); は、すべての DOM 要素が読み込まれた後で完了します。ページが常に読み込まれている場合は、この関数が原因である可能性が高くなります。 jQuery 関数を $(window).load イベントにバインドすることで、ページの読み込み時の CPU 使用率を削減できます。

    コードをコピー コードは次のとおりです。

    $(window).load(function( ){
    // ページが完全にロードされた後に初期化される jQuery 関数 (すべての DOM 要素と JS コードを含む)
    });

    ドラッグ アンド ドロップ、視覚効果とアニメーション、隠し画像のプリロードなどの一部の特殊効果機能は、このテクノロジーに適しています。

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。