この記事では、JavaScriptコードを書くときに従うべき14のルールについて説明します。次のように、参照のために共有してください。
1.常に「var」を使用します
JavaScriptでは、変数はグローバルまたは関数全体のいずれかです。 「var」キーワードを使用することは、変数を簡潔に明確に保つための鍵となります。グローバルまたは関数レベルの変数を宣言する場合、「var」キーワードの前に常に先行する必要があります。次の例では、そうしないという潜在的な問題を強調します。
varを使用しないことによって引き起こされる問題
var i = 0; //これは良い - グローバル変数関数test（）{for（i = 0; i <10; i ++）{alert（ "hello world！"）;}} test（）; alert（i）; //グローバル変数Iは10です！変数関数の変数Iは、VARを使用して関数レベルの変数にしないため、この例ではグローバル変数を参照します。常にVARを使用してグローバル変数を宣言することは多くの実践ですが、VARを使用して関数全体の変数を定義することが重要です。次の2つの方法は機能的に同じです。
正しい関数
function test（）{var i = 0; for（i = 0; i <10; i ++）{alert（ "hello world！"）;}}正しい関数
function test（）{for（var i = 0; i <10; i ++）{alert（ "hello world！"）;}}}2。ブラウザ検出ではなく機能検出
一部のコードは、ユーザーが使用しているクライアントに基づいて、ブラウザバージョンを発見し、その上でさまざまな動作を実行するために書かれています。これは、一般的に、非常に悪い習慣です。より良いアプローチは、機能検出を使用し、最初にこの機能があるかどうかを最初に検出（ブラウザの）、古いブラウザがサポートしない高度な機能を使用して使用してから使用することです。これにより、ブラウザバージョンがパフォーマンスを知っていても、ブラウザバージョンを個別に検出します。 http://www.jibbering.com/faq/faq_notes/not_browser_detect.htmlでこの問題を詳細に説明する記事を見つけることができます。
例：
if（document.getElementById）{var element = document.getElementById（ 'myid'）;} else {alert（ 'ブラウザにはこのスクリプトを実行するために必要な機能がありません！'）;}3.四角いブラケット表記を使用します
アクセスの場合、実行によって決定されるか、「」でアクセスできないオブジェクトプロパティが含まれます。サイン、四角いブラケット表記が使用されます。あなたが経験豊富なJavaScriptプログラマーでない場合、常に四角いブラケットを使用することはそれを行う良い方法です
オブジェクトのプロパティは、2つの固定メソッドでアクセスされます。 "。"名詞と「[]」正方形のブラケット表記：
「。」表記法：
myobject.property
「[]」四角いブラケット表記：
myobject ["Property"]
「。」を使用します署名、属性名はハードコードであり、実行中に変更することはできません。 「[]」の正方形のブラケットを使用して、属性名は属性名の計算から得られる文字列です。文字列は、ハードコード、変数、または文字列値を呼び出す関数である必要があります。実行中に属性名が生成される場合、角括弧が必要です。 「value1」、「value2」、「value3」などのプロパティがあり、変数i = 2を使用してアクセスしたい場合
これは実行できます：
myobject ["value"+i]
これはできません：
myobject.value+i
また、一部のサーバー側の環境（PHP、ストラットなど）では、フォームが[]数値で接続されており、フォームがサーバー側の配列として扱わなければならないことを示します。このようにして、「。」を使用してください。 []は、[]がJavaScriptアレイを参照するための構文であるため、[]サインを含むフィールドを参照するサインは実行されません。したがって、[]表記が必要です。
これは実行できます：
formref.elements ["name []"]
これはできません：
formref.elements.name []
「[]」の正方形のブラケット表記を推奨することは、必要なときに常に使用されることを意味します（明らかに）。それを厳密に使用する必要がない場合、それは私的な好みと習慣です。良い経験的原則は、「。」を使用することです。表記標準オブジェクトプロパティにアクセスし、「[]」正方形のブラケット表記を使用して、ページで定義されたオブジェクトプロパティにアクセスします。このようにして、["getelementbyid"]（）は完全に実行可能な「] [] [] "正方形のブラケット表記法ですが、document.getelementbyid（）は、getelementbyidがdom仕様で定義されている標準のドキュメントオブジェクトプロパティであるため、構文的に好まれます。これらの2つの表記を組み合わせて作成する標準オブジェクト属性であり、どの属性名がコンテキストによって定義されているかにより、コードでそれが明確になります。
document.forms ["myformname"]。要素["myinput"]。値
ここで、フォームはドキュメントの標準プロパティであり、フォーム名myformNameはページで定義されています。同時に、要素と値の属性はどちらも仕様によって定義された標準属性です。 myInputはページで定義されています。このページは、人々が非常に理解しやすく（コードの内容）、推奨されるイディオムですが、厳格な原則ではありません。
4.「評価」を避ける
JavaScriptでは、eval（）関数は、実行中に任意のコードを実行する方法です。ほとんどすべての場合、評価は使用しないでください。ページに表示される場合、それはあなたがしていることにもっと良い方法があることを意味します。たとえば、評価は通常、四角いブラケット表記を使用することを知らないプログラマーによって使用されます。
原則として、「evalは邪悪です（評価は悪魔です）。経験豊富な開発者であり、状況が例外であることを知っていない限り、それを使用しないでください。
5。フォーム要素とフォームの要素への参照を正しくします
すべてのHTMLフォームには、名前属性が必要です。 XHTMLドキュメントの場合、名前属性は必須ではありませんが、フォームタグには対応するID属性を持つ必要があり、document.getElementByID（）で参照する必要があります。 document.forms [0]などのインデックス作成方法を参照フォームに使用することは、ほとんどすべての場合に悪い習慣です。一部のブラウザは、フォームを使用可能なフォーム属性として使用して、ドキュメントで名前が付けられた要素を扱います。これは信頼性がなく、使用すべきではありません。
次の例は、正方形のブラケットを使用してフォーム入力の誤った参照と正しいオブジェクト参照方法を防ぐ方法を示しています。
正しい参照フォーム入力：
document.forms ["formname"]。要素["inputname"]]
悪いアプローチ：
document.formname.inputname
関数内の2つのフォーム要素を参照する場合は、最初にフォームオブジェクトを参照して変数に保存することをお勧めします。これにより、フォーム参照を解決するための重複クエリが回避されます。
var formelements = document.forms ["mainform"]。要素; formelements ["input1"]。value = "a"; formelements ["input2"]。value = "b";
Onchangeまたはその他の同様のイベント処理方法を使用する場合、適切なアプローチは、入力要素自体を常にエントリを介して関数に参照することです。すべての入力要素には、それを含むフォームへの参照があります。
<入力型= "テキスト" name = "address" onchange = "validate（this）">
function validate（input_obj）{//この要素を含む参照formvar theform = input_obj.form; //これで、ハードコードを使用せずにフォーム自体を参照できますif（theform.elements ["city"]。value== ""）{alert（ "error"）;}}フォーム要素を参照してフォームのプロパティにアクセスすることにより、特定の名前を持つこのページの任意のフォームを参照するためのハードコードが含まれていない関数を記述できます。機能が再利用可能になるため、これは非常に良い習慣です。
「with」を避ける
JavaScriptの宣言を使用すると、スコープのフロントエンドにオブジェクトが挿入されるため、属性/変数への参照は最初にオブジェクトに基づいて解決されます。これは、重複する参照を避けるためのショートカットとしてよく使用されます。
での使用の例：
with（document.forms ["mainform"]。要素）{input1.value = "junk"; input2.value = "junk";}しかし、問題は、プログラマーには、input1またはinput2が実際にフォーム要素アレイのプロパティとして解決されていることを確認する方法がないことです。最初にこれらの名前の値を使用して属性を検出し、見つけることができない場合、この範囲（下向き）を検出し続けます。最後に、input1とinput2をグローバルオブジェクトとして扱おうとすると、これはエラーで終わります。
回避策は、参照を削減し、それを使用してこれらの参照を解決するオブジェクトを作成することです。
参照を使用します：
var Elements = document.forms ["mainform"]。要素; elements.input1.value = "junk"; element.input2.value = "junk";
7.「javascript：pseudo-protocol」の代わりにアンカーで「オンクリック」を使用します
<a>タグでJavaScriptコードをトリガーする場合は、JavaScript：pseudo-protocolの代わりにOnClickを選択します。 onClickを使用して実行されるJavaScriptコードは、tureまたはfalse（または式よりも評価よりも式よりも式（この文を翻訳する方法）を返す必要があります。タグ自体を返すために、この方法を理解します。 falseの場合、HREFは無視されます。それが「falseを返す」理由です。多くの場合、OnClickで処理されたコードの最後に含まれます。
正解：
次のようにコードをコピーします
この例では、クリック時に「dosomething（）」関数（ページの隅で定義）が呼び出されます。 HREFは、JavaScript対応のブラウザから決してアクセスされません。ドキュメントjavascript_required.htmlは、ユーザーが必要としないJavaScriptに思い出させることができるブラウザにロードされます。通常、ユーザーがJavaScriptサポートを可能な限り有効にすることを確認する場合、リンクにはhref = "＃"のみが含まれます。そして、このアプローチは奨励されていません。通常、良いアプローチがあります。JavaScriptを使用せずにローカルエリアに戻るページを提供できます。
時には、多くの人が状況に応じてリンクを訪れたいと思っています。たとえば、ユーザーがフォームページのいずれかを残し、最初に確認して、何も変更されていないことを確認したい場合。この場合、OnClickは、リンクに従うべきかどうかをクエリに戻す関数にアクセスします。
条件付きリンクアクセス：
<a href = "/" onclick = "return validate（）;"> home </a>
function validate（）{return prompt（ "このページを終了したいですか？"）;}この例では、検証（）関数はtureまたはfalseのみを返す必要があります。ユーザーがtureにある場合、ユーザーはホームページの発行を許可されます。リンクにアクセスされない場合。この例では、確認（その動作）がtureまたはfalseにアクセスするように促します。これは、ユーザーが「実際の」または「キャンセル」をクリックすることによって完全に決定されます。
「そうでないはずです」の例をいくつか紹介します。ページに次のコードが表示されている場合、これは間違っており、変更する必要があります。
何をすべきではないか：
<a href = "javascript：dosomething（）"> link </a> <a href = "// www.vevb.com/#" onclick = "dosomething（）"> link </a> <a href = "// www.vevb.com/#" onclick = "javascript：dosom -ops： href = "// www.vevb.com/#" onclick = "javascript：dosomething（）; return false;"> link </a>
8。unary '+'演算子を使用して、タイプを番号に変換します
JavaScriptでは、「+」記号演算子は、数学的プラス記号とコネクタの両方として機能します。これにより、フォームフォームのフィールド値が一緒に追加された場合に問題を引き起こす可能性があります。たとえば、JavaScriptは弱い言語であるため、フォームフィールドの値は配列として処理され、それらをまとめると、「+」は数学的プラス記号ではなくコネクタとして扱われます。
問題の例：
<form name = "myform" action = "[url]"> <input type = "text" name = "val1" value = "1"> <input type = "text" name = "val2" value = "2"> </form>
function total（）{var theform = document.forms ["myform"]; var total = theform.elements ["val1"]。value + theform.elements ["val2"]。value; alert（total）; //これは「12」をポップアップしますが、あなたが望むのは3です！}この問題を解決するには、JavaScriptがこれらの値を数字として処理するためにプロンプトが必要です。 「+」記号を使用して、配列を数値に変換できます。 「+」記号で変数または式を提示すると、数字として処理されるようになり、これにより数学「+」が正常に適用されるようになります。
修正コード：
function total（）{var theform = document.forms ["myform"]; var total =（+theform.elements ["val1"]。value）+（+theform.elements ["val2"]。value）; alert（total）; //これは3}に警告します9. document.allを避けてください
document.allはMicrosoftのIEによって導入され、標準のJavaScript Dom機能ではありません。ほとんどの新しいブラウザは、それに依存する悪いコードをサポートするためにそれをサポートしていますが、（そして）それをサポートしていない多くのブラウザがあります。
他の方法が適用されない理由はありません。古いIEブラウザー（<5.0）にはサポートが必要です。他のブラウザが一般的にサポートされるため、document.allを使用する必要はありません。
document.allのみが最後の選択です：
if（document.getElementById）{var obj = document.getElementById（ "myid"）;} else if（document.all）{var obj = document.all（ "myid"）;}document.allを使用するためのいくつかの原則：
他の方法を試してください
それが最後の選択であるとき
バージョン5.0以下のIEブラウザをサポートする必要がある場合
「if（document.all）{}」を常に使用して、サポートされているかどうかを確認してください。
10。スクリプトコードブロックでHTMLコメントを使用しないでください
Javascript（1995）の昔の時代には、Netscape 1.0などの一部のブラウザは<script>タグをサポートまたは認識しませんでした。したがって、JavaScriptが最初にリリースされたとき、実際のコードがテキストとして古いブラウザーに表示されないようにするテクノロジーがありました。コードでHTMLコメントを使用してこれらのコードを非表示にする「ハック」があります。
HTMLコメントを良くしない：
<スクリプト言語= "javascript"> <！ - //ここにコード//-> </script>
今日、一般的に使用されるブラウザは<script>タグを無視していません。したがって、JavaScriptソースコードを非表示にする必要はありません。実際、それは以下の理由で役に立たないと見なすこともできます。
XHTMLドキュメントでは、ソースコードがすべてのブラウザーから非表示になり、役に立たない（コンテンツ）にレンダリングされます。
HTMLコメントは許可されていません。これにより、減少操作が無効になります。
11.グローバルネームスペースを無差別に使用しないでください
一般に、すべての変数と関数がめったに必要ではありません。グローバルな使用により、JavaScriptソースファイルドキュメントの競合が発生し、コードが中止される可能性があります。したがって、グローバルネームスペース内で機能的なカプセル化を採用することができます。このタスクを完了するには複数の方法がありますが、これは比較的複雑です。最も簡単な方法は、グローバルオブジェクトを作成し、このオブジェクトにプロパティとメソッドを割り当てることです。
名前空間を作成します：
var mylib = {}; //グローバルオブジェクトconterermylib.value = 1; mylib.increment = function（）{mylib.value ++;} mylib.show = function（）{alert（mylib.value）;} mylib.value = 6; mylib.increment（）; mylib.show（）; //アラート7名前空間は閉鎖を使用して作成することもでき、プライベートメンバー変数はJavaScriptで偽装することもできます。
12。同期「ajax」呼び出しを避けます
「ajax」要求を使用する場合、非同期モードを選択するか、同期モードを使用します。ブラウザの動作が引き続き実行されると、非同期モードはリクエストをバックグラウンドに配置し、同期モードは継続する前にリクエストが完了するまで待機します。
同期モードで作成されたリクエストは避ける必要があります。これらのリクエストは、リクエストが返されるまでブラウザをユーザーに無効にします。サーバーがビジーで、リクエストを完了するのに時間がかかると、ユーザーのブラウザ（またはOS）は、リクエストがタイムアウトするまで他のことを行うことができません。
あなたの状況が同期モードを必要とすると感じた場合、最大の可能性は、デザインを再考するために時間が必要であることです。まれに、もしあれば、同期モードでAjax要求が実際に必要です。
13。JSONの使用
データ構造をプレーンテキストに保存する必要がある場合、またはAJAXを介してデータ構造を送信/取得する必要がある場合は、XMLの代わりにできるだけJSONを使用してください。 JSON（JavaScriptオブジェクト表記）は、より簡潔で効率的なデータストレージ形式であり、いかなる言語にも依存していません（言語中立です）。
14。正しい<script>タグを使用します
<script>での言語プロパティの使用は好まれません。適切な方法は、次のJavaScriptコードブロックを作成することです。
<script type = "text/javascript"> // Code here </script>
PS：上記のコードはフォーマットされておらず、フォーマットされたコードは通常、読み取りと理解が容易になります。将来の開発で使用するためのいくつかのオンラインフォーマットおよび圧縮ツールを次に示します。
オンラインJavaScriptコードの美化とフォーマットツール：
http://tools.vevb.com/code/js
JavaScriptコードの美化/圧縮/フォーマット/暗号化ツール：
http://tools.vevb.com/code/jscompress
JSMINオンラインJS圧縮ツール：
http://tools.vevb.com/code/jsmincompress
JSONコードオンラインフォーマット/美化/圧縮/編集/変換ツール：
http://tools.vevb.com/code/jsoncodeformat
JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。