フロントエンドコードでよく発生する問題
2239 ワード
現在、多くのコード品質の検出ツールがありますが、完全に検出できません.いくつかの点は、フロントエンドコードを書く上でよく発生する問題です.
重複する収集要素
jQueryまたはZepto、オリジナルのエレメントセレクタを使用する場合は、エレメントの収集を繰り返します.
このような問題は多く発生していますが、実際にはwebstromに赤い字の注意表示があります.このような使い方はお勧めしません.できる
繰り返しの条件判断
反復条件計算はよく見られるが、一般的にはそれらを避けるための汎用的なモードもある.コードが次のように書かれているのを見ることができます.
これは可能ですが、最も効率的なコードではありません.上記の条件は複数回計算される可能性があります.次のように書くともっといいです.
重複オブジェクトの作成
重複する操作と比較して、重複するオブジェクトの作成は発見しにくく、通常は正規表現に表現されます.次のコードを見てみましょう.
上記のコードは、新しい(ただし同じ)正規表現オブジェクトを繰り返し作成します.この場合、この関数の外部でこのオブジェクトを作成すると、このような状況を回避できます.
上記の例では、正規表現オブジェクトは一度しか作成されていませんが、複数回使用されます.多くのCPU処理が省けます.
以下は自分のよくある出会いを集めて整理します
データ型の宣言を忘れる
次のコード
一見問題を説明していないが、戻った結果は
携帯電話デバイスイベントバインドの問題
携帯電話のデバイスイベントのバインドタイプが正しくありません.例えば、
必要なら使えます
未完
重複する収集要素
jQueryまたはZepto、オリジナルのエレメントセレクタを使用する場合は、エレメントの収集を繰り返します.
$(".items").addClass("hide");
$(".items").removeClass("hide");
このような問題は多く発生していますが、実際にはwebstromに赤い字の注意表示があります.このような使い方はお勧めしません.できる
var $items = $(".items");
$items.addClass("hide");
$items.removeClass("hide");
繰り返しの条件判断
反復条件計算はよく見られるが、一般的にはそれらを避けるための汎用的なモードもある.コードが次のように書かれているのを見ることができます.
var performMiracle = function() {
// A ...
if(features.someFeature) {
}
// ...
else {
}
};
これは可能ですが、最も効率的なコードではありません.上記の条件は複数回計算される可能性があります.次のように書くともっといいです.
var performMiracle = features.someFeature ? function() {
// Plan A stuff
} : function() {
// Plan B stuff
};
重複オブジェクトの作成
重複する操作と比較して、重複するオブジェクトの作成は発見しにくく、通常は正規表現に表現されます.次のコードを見てみましょう.
function cleanText(dirty) {
// SCRIPT tags
clean = dirty.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, "");
// Do some more cleaning, maybe whitespace, etc.
return clean;
}
上記のコードは、新しい(ただし同じ)正規表現オブジェクトを繰り返し作成します.この場合、この関数の外部でこのオブジェクトを作成すると、このような状況を回避できます.
var scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi;
function cleanText(dirty) {
// Get rid of SCRIPT tags
clean = dirty.replace(scriptRegex, "");
// Do some more cleaning, maybe whitespace, etc.
return clean;
}
上記の例では、正規表現オブジェクトは一度しか作成されていませんが、複数回使用されます.多くのCPU処理が省けます.
以下は自分のよくある出会いを集めて整理します
データ型の宣言を忘れる
次のコード
function mean() {
var sum;
for (var i = 0; i < this.data.length; i++){
sum += this.data[i];
}
return sum / (this.data.length);
}
一見問題を説明していないが、戻った結果は
NaN
だった.numberタイプの重ね合わせを行う場合は、宣言var sum = 0
を覚えています.大きな間違いがないのは無視しやすい小さな問題です.携帯電話デバイスイベントバインドの問題
携帯電話のデバイスイベントのバインドタイプが正しくありません.例えば、
click
でiosデバイス上で失効した場合、touchend
またはtouchstart
に変更する必要があります.必要なら使えます
$.bind('click touchend' ,function(event){...});
未完