コードの繰り返し実行を回避するための経験とヒントを JavaScript_javascript ヒントで共有します。

私は、いくつかの大規模な Web サイトにアクセスして、その元のコードを調べて、自分のコードに適用できるパターンを見つけたり、これまで聞いたことのないツールやテクニックを発見したりするのが好きです。しかし、これらの大規模な Web サイトのソース コードを見ると、コードが繰り返し実行され、機能的なアプリケーションが繰り返し実行されているという問題がよく見つかります。以下は、JavaScript コードをより簡潔かつ効率的に作成できることを願って、ソース コードを表示したときに見つかったいくつかの問題を紹介します。
コレクション要素の重複

JavaScript コードで最もよく見られる問題は、コレクション要素の重複です。 jQuery セレクター エンジンまたは querySelectorAll の実行速度は非常に高速ですが、繰り返し作業を行うと、より多くの時間とリソースが消費されます。この問題は非常に単純で、解決策は次のとおりです:

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

//
$$(".items").addClass("hide");
// ...以降...
$$(".items") .removeClass("hide") ;

//
var items = $$(".items");
// ... ここからはこの参照変数を使用します。

はい、私たちは毎日繰り返しコードを書くプログラマーを非難しますが、それでもそれを強化する必要があります。もちろん、一部の繰り返しアクション (ページの ajax 読み込みなど) は避けられませんが、このような状況では、コンテンツを直接取得するのではなく、イベント プロキシを使用するのが最善です。
条件評価の重複

条件評価の重複はよくありますが、通常、重複を回避するための一般的なパターンがあります。次のように書かれたコードが表示される場合があります:

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

var PerformMiracle = function() {
// ブラウザが機能 A をサポートしている場合...
if(features.someFeature) {

}
// ... If
else {

}
};

これは機能しますが、最も効率的なコードではなく、上記の条件が複数回評価される可能性があります。次のように記述するとよいでしょう:

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

var PerformMiracle = features .someFeature ? function() {
// プラン A の内容
} : function() {
// プラン B の内容

}; 🎜>条件は 1 つだけで、条件付きの計算が完了すると、結果としてメソッドまたは変数が返されます。
重複したオブジェクトの作成

繰り返しの操作と比較して、オブジェクトの繰り返しの作成は検出が難しく、通常は正規表現で表されます。以下のコードを見てください:

コードをコピーします コードは次のとおりです: function cleanText(dirty ) {

// SCRIPT タグを削除

clean = virgin.replace(/<script>]*>([sS]*?)</script>/gi, "");

// 空白などをさらに実行します。

return clean;


上記のコードは繰り返し作成します。新しい (ただし同じ) 正規表現オブジェクト この場合、このオブジェクトをこの関数の外で作成すると、この状況を回避できます:

Copy code

コードは次のとおりです。 var scriptRegex = /<script>]*>([sS]*?)</script>> ;/gi ; function cleanText(dirty) {

// SCRIPT タグを削除します

clean = virgin.regex, "");

// 空白を追加してください

return clean;
}


上記の例では、正規表現オブジェクトは 1 回だけ作成されますが、複数回使用されるため、大量の CPU 処理が節約されます。 。

これらは、他のプログラマによって繰り返される問題をよく見かける例のほんの一部です。あなたもこれを見つけますか?