Javascriptコードも美しい実装方法_JavaScriptスキル

1. コードを簡略化する
短い記述方法を使用すると、入力する文字数が減るだけでなく、ファイル サイズも小さくなります。単純な方法で記述されたコードのほとんどは、実行効率がわずかに向上します。
1.1 共通のオブジェクト定義を簡略化します: var obj = new Object() の代わりに var obj = {}; を使用します
1.2 if の単純化 ステートメントの三項演算子は、
var core = 60, Grade
if (score grade = "failed" など、代入と値の演算のみを含む if ステートメントを効果的に単純化できます。 ;
} else {
grade = "合格";
は次のように簡略化できます。
var スコア = "不合格" : "Pass";
三項演算子はネストもサポートしていますが、ネストのレベルが多すぎるとプログラムの可読性に影響を与えるため、この点についてさらに考慮する必要があります。
1.3 JSON を使用する JSON は軽量のデータ形式であり、その軽量性はまずその非常に単純な構造定義に反映されます。
var obj = {};
obj.p1 = 'a';
obj.p3 = 'c';
var obj = {
p1 : 'a',
p2 : 'b',
p3 : 'c'

}; 2. 効率的なコードを使用します。 🎜>
インターネット上には効率の最適化に関する記事がたくさん出回っており、より専門的な Javascript の書籍でもよく取り上げられているため、ここではめったに言及されないものの一部のみを紹介します。
2.1 ループ本体を簡素化する ループの効率はループ本体によって大きく決まりますが、それに比べて、for と while を使用する違いは小さすぎます。次のコードを考えてみましょう。その機能は、要素の特定のバッチにイベントを追加することです:



コードをコピー

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

function addEvent(elems,eventName,handler) { for (var i = 0, len = elems.length; i if (window. attachEvent) { elems[i].attachEvent("on" イベント名, ハンドラー); } else if (window.addEventListener) {

elems[i].addEventListener(イベント名, ハンドラー, false);

}
}
}


ループが実行されるたびに、window オブジェクトのattachEvent または addEventListener が存在するかどうかが判断されます。実際には、これだけで十分です。判定は1回のみ、さらに「on」eventNameの文字列連結も繰り返し実行されます。最適化は次のとおりです。




コードをコピー

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

function addEvent( elems, イベント名, ハンドラー) { var i = -1, len = elems.length; if (window.attachEvent) { eventName = “on” イベント名; len) { elems[i].attachEvent(eventName, handler);

}

} else if (window.addEventListener) {
while ( i elems[ i].addEventListener(eventName , handler, false);
}
}
}


2.2 Javascript の操作を実行するときは、カスタム関数の代わりにネイティブ関数を使用してみてください。組み込み型変数を使用する場合は、まずこの操作のネイティブ メソッドがあるかどうかを確認する必要があります。
配列のコピーを作成するには、配列の要素を繰り返して、それらを 1 つずつ別の配列に割り当てることが唯一の方法のようです。実際、ネイティブの Array.prototype.slice はコピーの目的を達成できます。このメソッドは、元の配列に影響を与えることなく、配列から選択された要素を返します。パラメーターが空のままの場合、すべての要素が返されます。
Array.prototype.slice は、配列ではない特定の型でも操作できますが、



コピー コード

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

arguments: arguments: function test() { alert(Array.prototype.slice.call(arguments)); >} test(1, 2, 3); // 出力 “1,2,3”

Firefox では、HtmlCollection 上でも動作します。残念ながらIEでは動作しません。

もう 1 つの例は配列のソートです。通常の状況では、別のソート アルゴリズムを記述する必要はなく、ネイティブの Array.prototype.sort で十分です。 sort メソッドにはパラメーターが 1 つだけあります。これは、比較される 2 つの要素のどちらが前にあり、どちらが後ろにあるかを決定する関数です。デフォルトでは、文字順にソートされます。たとえば、11 は 2 より前にランクされます。数値サイズで並べ替えるには、次のように記述できます:




コードをコピー

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


var arr = [11, 2, 0, 12, 33];

arr.sort( function(a, b) { return a - b; } );

オブジェクトの属性で並べ替えることもできます:

コードをコピー


コードは次のとおりです。以下:

var arr = [
{ id : 11 },
{ id : 0 },
{ id : 22 }
]; >function(a, b) {
return a.id - b.id;
}
);


2.3 配列の重複排除 配列タイプは重複排除メソッドを提供しません。配列から重複した要素を削除したい場合は、自分で方法を考える必要があります:

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

function unique(arr) {

var result = [], isRepeated;
for (var i = 0, len = arr.length; i isRepeated = false;
for (var j = 0, len = result.length; j if (arr[i] == result[j]) {
isRepeated = true ;
break;
}
}
if (!isRepeated) {
result.push(arr[i]);
return result;
}


一般的な考え方は、転送プロセス中に、要素が重複しているかどうかをチェックし、重複している場合はそれをチェックすることです。 、直接破棄してください。ネストされたループからわかるように、この方法は非常に非効率です。ハッシュテーブル構造を使用して既存の要素を記録できるため、内部ループを回避できます。偶然ですが、JavaScript でのハッシュテーブルの実装は非常に簡単です。改善は次のとおりです。

コードをコピーします。

コードは次のとおりです。 function unique(arr) { var result = [], hash = {};

for (var i = 0, elem; (elem = arr[i]) ) != null; i ) {

if (!hash[elem]) {
result.push(elem) = true; >return result;
}



3. コードをより読みやすく、保守しやすくする

コードを明確にし、読みやすいと、コードをより速く、より正確に変更するのに役立ちます。
3.1 HTML 文字列の接続 フロントエンド開発を行っている友人は、HTML を接続するときに、忌まわしいシングルクォーテーションやダブルクォーテーションのせいでめまいがして困ったことがあると思います。例:
element.innerHTML = '' text '';
これは文字列書式設定関数です:

コードをコピー


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

String.format = function(str) { var args = argument, re = new RegExp("%([1-" args.length " ]) ", "g"); return String(str).replace( re, function($1, $2) { return args[$2];

}

) ;
};


呼び出しメソッドは非常に簡単です:




コードをコピーします

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

element.innerHTML = String.format('%3', url, msg, text); は、%n をn番目のパラメータ。この方法でより明確になります。 3.2 プログラムの Config 構成オブジェクトを作成する Java または C# プログラムを作成するときは、通常、プログラムの構成情報を XML から読み取ります。 Javascript では、構成情報に XML を使用するのはコスト効率が悪い一方で、追加の XML ファイルを要求するか、XML 文字列を XML オブジェクトに変換する必要があります。より複雑で長くなります。軽量の JSON が最良の選択です。 プログラム内の定数は、Ajax リクエストの URL、特定の操作のプロンプトなどの Config 構成オブジェクトに配置する必要があります。例:

コードをコピー


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

var Config = { ajaxUrl : "test.jsp", successTips : "リクエストが完了しました" };

多数の構成がある場合は、構成タイプに応じてさらに 1 つのレイヤーをネストできます。例:

コードをコピーします

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

var Config = { url : { src1 : “test1 .jsp”, src2 : “test2.jsp”, . .

},

tips: {
src1Suc: "リクエスト 1 が完了しました",
src2Suc: "リクエスト 2 が完了しました",
.
}
};

構成は、簡単に表示および変更できるように、プログラムの先頭に配置する必要があります。