ホームページ >ウェブフロントエンド >jsチュートリアル >効率的な jQuery コードを作成するための 4 つの原則と 5 つのヒント_jquery
jQuery の記述原則:
1. jQuery を使いすぎない
1. jQuery がどんなに高速であっても、ネイティブ JavaScript メソッドとは比較にならず、作成された jQuery オブジェクトには膨大な量の情報が含まれます。したがって、使用できるネイティブ メソッドがある場合は、jQuery の使用を避けるようにしてください。
2. 多くの jQuery メソッドには、jQuery オブジェクト用と jQuery 関数用の 2 つのバージョンがあります。後者は jQuery オブジェクトを介して動作しないため、オーバーヘッドが比較的少なく、高速です。
2. jQuery オブジェクトのキャッシュ
DOM 要素の検索には、実際には多くのメモリ オーバーヘッドが伴います。セレクターの使用はできるだけ少なくし、将来の繰り返し使用を容易にするために、選択した結果をできるだけキャッシュする必要があります。同じセレクターを複数回出現させないように注意してください。
例:
3. DOM 構造への変更を少なくします
DOM 構造を複数回変更する場合は、変更する部分を取り出し、変更が完了したら元に戻します。ここでの基本的な考え方は、本当に必要なものをメモリ内に構築し、最後に最も効率的な DOM 更新操作を実行することです。
例:
4. 命名規則
jQuery コードは必然的に JS コードと混在します。jQuery コードを厳密で整然としたものにし、独自の命名ルールを標準化することで、コードをより良く改善できます。読みやすさ。
1. 関数名: function getResultByUserId(){..}、キャメルの命名方法に従い、最初の文字を小文字、単語の最初の文字を大文字にして、できるだけ短く、明確に表現してください。方法の目的。
は次のように定義することもできます:
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. チェーン書き込み
チェーン書き込みメソッドを使用すると、jQuery は各ステップの結果を自動的にキャッシュします。これは、非チェーン書き込みメソッド (手動キャッシュ) よりも高速です。
3. 効率的な循環
ループ処理は常に時間がかかります。JavaScript のネイティブ ループ メソッド for および while は、jQuery の「.each()」よりも高速です。また、forループに関しては以下の書き方が最も効率的です。
最初に変数を宣言してからループ操作を実行すると、配列「for (var i in arr)」を走査するよりも効率が高く、配列の長さを取得する「for (var)」よりも効率的です。 i = 0; i
4. 文字列の接続
開発中に文字列の結合が頻繁に発生します。文字列の結合に「=」メソッドを使用するのは非常に効率的ではありません。配列の「.join()」メソッドを使用できます。
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 使用率を削減できます。
ドラッグ アンド ドロップ、視覚効果とアニメーション、隠し画像のプリロードなどの一部の特殊効果機能は、このテクノロジーに適しています。