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

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 コードを含む)
});

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