15 JavaScript のベスト プラクティスの概要_JavaScript のヒント

このドキュメントでは、一般に受け入れられている、またはあまり議論の余地のない JavaScript のベスト プラクティスのほとんどをまとめています。一部の明らかな常識については説明しません (たとえば、ブラウザの認識判断の代わりに認識判断をサポートするためにオブジェクトを使用します。たとえば、ネストを深くしすぎないなど)。項目は重要度の高いものから低いものの順に大まかに並べられています。
外部 JavaScript ファイルを HTML の下部に配置します
私たちの目標は同じです。それは、コンテンツをユーザーにできるだけ早く表示することです。スクリプト ファイルをロードすると、HTML はスクリプトがロードされるまで解析を停止します。その結果、ユーザーは何も起こっていないように見える空白の画面を長時間見ることになる可能性があります。 JavaScript コードに何らかの機能 (ボタンのクリック アクションなど) を追加するだけの場合は、HTML の下部 ( の直前) にファイル参照を自由に配置すると、速度が大幅に向上します。他の目的で使用するスクリプトファイルの場合は、慎重に検討する必要があります。いずれにせよ、これは間違いなく検討する価値のある場所です。
ループの最適化
配列のループ

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

//この悪いコードはループに入るたびに配列の長さを計算します
var names = ['George','Ringo','Paul','John'] ;
for(var i=0;idoSomeThingWith(names[i])
}

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

//この場合、計算は 1 回だけ行われます

var names = ['ジョージ' ,'リンゴ','ポール','ジョン'];
var all = names.length;
for(var i=0;idoSomeThingWith( names[i] );
}

コードをコピー コードは次のとおりです。これは短いです var names = ['George','Ringo','Paul','John']; for(var i=0,j=names.length;idoSomeThingWith(names[i]);

}

コードをコピー

コードは //このコードの悪い点は、ループ本体に変数​​宣言が置かれており、ループするたびに変数が作成されることです。for(var i = 0; i < someArray.length; i ) { var コンテナ = document.getElementById('container');

container.log(i); ;

}






コードをコピー

コードは次のとおりです: //ループの外で変数を宣言します。変数は 1 回だけ作成されます。var container = document.getElementById('container'); for(var i = 0, len = someArray.length; i < ; len; i ) { container.innerHtml = 'i;

console.log(i);

として使用します可能な限りコード

可読性が向上する場合は、短い形式のコードを使用するのが理にかなっています。以下にすべてを網羅したリストはありません:

コードをコピー

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

//条件判定を 2 回だけ行うため、これは長い書き方になります。var direct if(x > ; 100){ 方向 = 1; } else {

方向 =

}



コードをコピーします


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

//より良いコード

var direction = (x > 100) ? 1 : -1; > コードをコピー

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

//変数が定義されており、そうでない場合は、それを 1 つの値に割り当てます。
if(v){

var x = v; } else { var x = 10;

コードをコピーします


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


// より良いコード

var x = v || 10 ;

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

//変数名を何度も繰り返します
var Cow = new Object();
cow.colour = 'brown';
cow.commonQuestion = '今は何ですか?';
cow.moo = function(){
console.log (' ムー');
cow.feet = 4;
cow.accordingToLarson = '世界を征服します'

コードをコピー コードは次のとおりです: //より良い書き方は次のようになります

var Cow = {

colour:'brown',
commonQuestion:'今は何ですか?',
moo:function(){
console.log('moo)
},
feet:4 、
ラーソンによると:「世界を征服する」
}

コードをコピーコードは次のとおりです: //配列名が何度も繰り返されます

var aweSomeBands = new Array();

aweSomeBands[0] = 'Bad Religion'; >aweSomeBands[1] = 'ドロップキック マーフィー';
aweSomeBands[2] = 'フロッギング モリー';
aweSomeBands[3] = 'レッド ホット チリ ペッパーズ'; ;

コードをコピーします

コードは次のとおりです: //より良いコードvar aweSomeBands = [ '悪い宗教'、

'ドロップキック・マーフィー'、

'鞭打ちのモリー'、
'レッド・ホット・チリ・ペッパーズ'、
'ポルノフォニーク'
];



一重引用符と二重引用符

混乱を避けるため、HTML では二重引用符を使用し、JavaScript では一重引用符を使用することをお勧めします。

コードをコピー

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

コードをコピー

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

コードをコピーします コードは次のとおりです: //言語属性は現在使用されていません

常にデータを確認する

メソッドによって入力されたすべてのデータを確認するには、一方ではセキュリティのため、もう一方では使いやすさのためでもあります。ユーザーはいつでもどこでも間違ったデータを入力します。それは彼らが愚かだからではなく、彼らが忙しく、あなたとは異なる考え方をしているからです。 typeof メソッドを使用して、関数が受け入れる入力が正当かどうかを確認します。

コードをコピー コードは次のとおりです: //メンバーのタイプが異なる場合配列の場合、コードはエラーをスローします。

function buildMemberList(members){

var all = members.length;
var ul = document.createElement('ul'); (var i=0; i

コードをコピー

コードは次のとおりです: //良い習慣 パラメータが配列かどうかを確認することです function buildMemberList(members){

//配列の typeof はオブジェクトなので、配列であるかどうかを判定したい場合配列の場合、配列にのみ使用できる関数があるかどうかをテストできます。スライス

if(typeof members === 'object' &&
typeof members.slice === 'function'){
var all = members.length;
var ul = document.createElement('ul' );
for(var i=0;i


もう 1 つのセキュリティ リスクは、データを直接使用することです。たとえば、関数はユーザー名入力ボックスからユーザー名を取得しますが、ユーザー名に一重引用符または二重引用符があるとコードがクラッシュする可能性があります。

グローバル変数を使用しないでください。

グローバル変数とグローバル関数は非常に不適切です。ページに含まれるすべての JavaScript は同じドメイン内で実行されるため、コード内でグローバル変数またはグローバル関数を宣言すると、スクリプト ファイルに同じ名前の変数と関数が読み込まれてしまいます。後続のコードは上書きされます。


コードをコピーします。

コードは次のとおりです。 /不正なグローバル変数とグローバル関数 var current = null; function init(){...} function change(){...} function verify(){...

Christian Heilmann が提案した方法は次のとおりです:




コードをコピーします

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

//変数と関数を「外部」で参照する必要がない場合は、名前のないメソッドを使用してそれらをすべてラップできます。 (function(){ var current = null; function init(){...} function change(){...}

function verify(){.. .}

})();






コードをコピー

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

//変数と関数を「外部」で参照する必要がある場合は、変数と関数を「名前空間」に置く必要があります
// ここでは var の代わりに関数を名前空間として使用します前者の関数の宣言の方が簡単で、プライベート データを保護できるためです。
myNameSpace = function(){
var current = null;
function init(){...}
function change () {...}
function verify(){...}
//名前空間の外で呼び出す必要があるすべての関数と属性は return
return{
init :init で記述する必要があります,
//変数を宣言するとき、関数とプロパティのエイリアスを指定することもできます
set:change
}
}();

、常にuse var
JavaScript の変数はグローバルまたはローカルの可能性があり、var を使用して宣言する方がより直感的です。

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

//var を使用しないことによって発生する混乱を招く問題in function
var i=0; // これは良いことです - グローバル変数を作成します
function test() {
for (i=0; ialert(" Hello World !");
}
}
test();
alert(i); // グローバル変数 i は 10 になりました!

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

//解決策は、関数内で変数を宣言し、 var
function test( ) {
for (var i=0; ialert("Hello World!");
}
}

文字列を数値に変換するにはプレフィックスを使用します JavaScript では、数値を追加したり文字列を連結したりするために " " 演算子が使用されます。フォームで複数の値の合計を求める必要がある場合、使用すると問題が発生する可能性があります。

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

//問題を引き起こすコード
<フォーム名="myform" アクション="[url]">
<入力タイプ="テキスト" 名前="val1" 値="1"> "text" name ="val2" value="2">

function total() {
var theform = document.forms["myform"]; total = theform.elements["val1"].value theform.elements["val2"].value;
alert(total); // これは "12" を警告しますが、必要なのは
です。 }

コードをコピー コードは次のとおりです: //文字列 ” の前に「」を追加します。これは JavaScript へのヒントです: これは文字列ではなく数値です

function total() {

var theform = document.forms["myform"];
var total = (theform.elements["val1"].value) (theform.elements["val2"].value); // これにより、3 つの
}


eval() メソッドの使用を避ける

JavaScript の eval() メソッドは、実行時に任意のコードをオブジェクトとして計算/実行するメソッドです。実際、セキュリティ上の理由により、ほとんどの場合、eval() は使用すべきではありません。同じジョブを完了するには、より「正しい」方法が常に存在します。基本的なルールは、eval は悪であり、ベテランであり、必ず使用する必要があるとわかっている場合を除き、いつでも使用しないでください。

for in ステートメント オブジェクト内のすべての項目を走査する場合、for in ステートメントを使用すると非常に便利です。ただし、オブジェクト内のメソッドを走査する必要がない場合は、フィルターを追加できます。


コードをコピー

コードは次のとおりです: //フィルターを使用した for in ステートメントfor(key in object) { if(object.hasOwnProperty(key) {

...次に何かをします...

}
}


怠惰に「" と {} を省略しないでください。
技術的には、多くの中括弧とセミコロンは無視できます。

コードをコピーします。

コードは次のとおりです: //間違っているように見えますが、ほとんどのブラウザはこのコードを正しく解析できます if(someVariableExists) x = false

コードをコピー

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

//このコードは一見すると、次の文が実行されているように見えます。
//実際には、if
if(someVariableExists) には x=false だけが含まれています。
x = false
anotherFunctionCall();

したがって、覚えておくべき原則は次のとおりです。 1. セミコロンを省略しないでください。 2. 同じ上にある場合を除き、中括弧を省略しないでください。ラインの真ん中。

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

//これで OK
if (2 2 === 4) return 'nicelyned';

オブジェクトのプロパティを取得するときにピリオドの代わりに角括弧を使用します
オブジェクトのプロパティを取得するには 2 つの方法がありますJavaScript の場合:

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

//ドット マーク
MyObject.property

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

//角かっこ
MyObject["property"]

ドット表記を使用してオブジェクトのプロパティを取得する場合、プロパティ名はハードコーディングされ、実行時に変更できません; 角括弧を使用すると、JavaScript は角括弧を取得し、内部の値を計算して属性名を取得します。つまり、角括弧を使用すると、属性名をハードコーディングしたり、変数または関数の戻り値にすることができます。

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

//これは機能しません
MyObject.value i

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

//こうすれば質問はありません
MyObject["value" i]

JavaScript が無効になると仮定します
そのような仮定が JavaScript の感情を傷つけることはわかっていますしかし、データが不明確な現状では、この仮定は安全側として行う必要があります。これは、プログレッシブ エンハンスメントの重要な部分です。
JavaScript ライブラリを使用する
YUI、jQuery、Dojo など、現在非常に人気のある JavaScript ライブラリが多数あります。欠点は、追加のファイルをダウンロードする必要があることですが、利点はそれ以上です。互換性が高く、コードがシンプルで理解しやすいです。優れたライブラリはたくさんありますが、互換性の問題が発生する可能性があるため、1 つのプロジェクトですべてを使用しないでください。使い慣れたものを選択してください。
小規模で使用する場合は、ネイティブ JavaScript の方が間違いなく高速であることを忘れないでください。