15 JavaScript のベスト プラクティスの概要_JavaScript のヒント-jsチュートリアル-php.cn
15 JavaScript のベスト プラクティスの概要_JavaScript のヒント WBOY オリジナル
2016-05-16 17:26:16 971ブラウズ
このドキュメントでは、一般に受け入れられている、またはあまり議論の余地のない 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;i
doSomeThingWith( names[i] ); }
コードをコピー コードは次のとおりです。これは短いです var names = ['George','Ringo','Paul','John']; for(var i=0,j=names.length;i
doSomeThingWith(names[i]); }
コードをコピー container.log(i); ; } コードをコピー
console.log(i); として使用します可能な限りコード 可読性が向上する場合は、短い形式のコードを使用するのが理にかなっています。以下にすべてを網羅したリストはありません:
コードをコピー コードは次のとおりです。 方向 = } コードをコピーします コードは次のとおりです:
//より良いコードvar direction = (x > 100) ? 1 : -1; >
コードをコピー
コードは次のとおりです:
//変数が定義されており、そうでない場合は、それを 1 つの値に割り当てます。 if(v){
コードをコピーします コードは次のとおりです: // より良いコード
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 では一重引用符を使用することをお勧めします。
コードをコピー
コードをコピー
常にデータを確認する メソッドによって入力されたすべてのデータを確認するには、一方ではセキュリティのため、もう一方では使いやすさのためでもあります。ユーザーはいつでもどこでも間違ったデータを入力します。それは彼らが愚かだからではなく、彼らが忙しく、あなたとは異なる考え方をしているからです。 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 は同じドメイン内で実行されるため、コード内でグローバル変数またはグローバル関数を宣言すると、スクリプト ファイルに同じ名前の変数と関数が読み込まれてしまいます。後続のコードは上書きされます。 コードをコピーします。
Christian Heilmann が提案した方法は次のとおりです: コードをコピーします
コードは次のとおりです。
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 ステートメントを使用すると非常に便利です。ただし、オブジェクト内のメソッドを走査する必要がない場合は、フィルターを追加できます。
コードをコピー
...次に何かをします...
} } 怠惰に「" と {} を省略しないでください。 技術的には、多くの中括弧とセミコロンは無視できます。
コードをコピーします。
コードをコピー
声明: この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。