1。グローバルネームスペース汚染
常に即時の関数式でコードをラップして、独立したモジュールを形成します。
お勧めしません
var x = 10、y = 100; console.log(window.x + '' + window.y);
推薦する
;(function(window){'strict'; var x = 10、y = 100; console.log(window.x + '' + window.y);}(window));2。機能をすぐに実行します
即時の実行関数では、グローバル変数を使用すると、関数を実行する関数本体は、呼び出されたときにローカル変数の形式ですぐに呼び出され、プログラムのパフォーマンスがある程度向上します。
ES3でundefined読み取られて書かれているため、最後の位置で、機能の正式なパラメーターにundefinedをすぐに追加する必要があります。 undefinedの値がグローバルポジションで変更された場合、コードが延期された結果が得られない場合があります。
さらに、マージ中に他の人の不規則なコードのために独自のコードに影響を与えることを避けるために、関数の最初と終わりにセミコロンをすぐに追加することをお勧めします。
お勧めしません
(function(){'sprict'; var x = 10、y = 100、c、elem = $( 'body'); console.log(window.x + '' + window.y); $(document)。推薦する
;(function($、windo、document、undefined){'s strict'; var x = 10、y = 100、c、elem = $( 'body'); console.log(window.x + '' + window.y); $(document).on( 'click'、function(){}); if(typeof c == 'undefined')3。厳密なモード
ECMAScript 5 Strictモードは、スクリプト全体または単一の方法内でアクティブにできます。異なるJavaScriptコンテキストに対応し、より厳しいエラーチェックを実行します。また、Strictモードにより、JavaScriptコードがより堅牢で、より速く実行されることが保証されます。
厳密なモードは、将来導入される可能性が高い予約されたキーワードの使用を防ぎます。
スクリプトで厳格なモードを有効にする必要があります。できれば、スタンドアロンの即時実行関数に適用できます。スクリプトの最初の行で使用しないでください。これにより、すべてのスクリプトが厳密なモードを開始します。これにより、サードパーティライブラリに問題が発生する可能性があります。
お勧めしません
'strict';(function(){}());推薦する
(function(){'Strict';}());IV。変数宣言
すべての変数宣言については、 varを指定する必要があります。 varが指定されていない場合、エラーは厳密なモードで報告され、同じスコープ内の変数は可能な限り1つのvarで宣言され、複数の変数を「、」によって分離する必要があります。
お勧めしません
function myfun(){x = 5; y = 10;}完全にお勧めしません
function myfun(){var x = 5; var y = 10;}推薦する
function myfun(){var x = 5、y = 10;}5。タイプ判断を使用した比較判断
===正確な比較演算子を使用して、判断プロセス中にJavaScriptのキャストによって引き起こされるトラブルを回避します。
===オペレーターを使用する場合、比較の2つの関係者は有効にするために同じタイプでなければなりません。
お勧めしません
(function(w){'sprict'; w.console.log( '0' == 0); // true w.console.log( '' == false); // true w.console.log( '1' == true); // true w.console.log(null == undefined); w.console.log(x == 'x'); // true}(window.console.log));推薦する
(function(w){'strict'; w.console.log( '0' === 0); // false w.console.log( '' === false); // false w.console.log( '1' == true); // false w.console.log(null == null == undefine); }; w.console.log(x === 'x');6。変数割り当ての場合の論理操作
論理演算子||また、&&を使用してブール値を返すこともできます。操作オブジェクトが非ブールのオブジェクトである場合、各式は左から右に判断されます。この操作に基づいて、最終的に返される式が常にあります。これを使用して、変数を割り当てるときにコードを簡素化できます。
お勧めしません
if(!x){if(!y){x = 1; } else {x = y; }}推薦する
x = x || y || 1;
7。セミコロン
暗黙のコードネストが検出不能な問題を引き起こす可能性があるため、常にセミコロンを使用してください。もちろん、これらの問題を根本的に排除する必要があります[1]。
次の例は、セミコロンを欠いていることの害を示しています。
// 1.myclass.prototype.mymethod = function(){return 42;} //ここにsemicolonはありません(function(){})(); //2.var x = {'i':1、 'j':2} //ここにはセミコロンはありません//そのようなコードを書くことは決してないことを知っていますが、[ffersion、ieversion] [isie](); // 3.Var Things_to_eat = [Apples、Oysters、Sprayoncheese] //ここでセミコロンはありません-1 == resultofoperation()|| die();エラー結果
1。JavaScriptエラー-42を返す関数は、2番目の関数のパラメーターによって最初に呼び出され、次に数字42も「呼び出され」、エラーが発生します。
2。80回、実際の環境での呼び出しが次のようになるため、「未定義のそのようなプロパティはありません」というエラーメッセージが表示されます。xffversion、ieversion()。
3.dieは常に呼ばれます。配列内のマイナス1の結果はNANであるため、結果がNANを返すかどうかに関係なく、何も等しくありません。したがって、最終結果は、die()が実行された後に取得された値がshinst_to_eatに割り当てられることです。
8。ステートメントブロックの関数宣言
ステートメントブロック内で関数を宣言しないでください。これは、ECMAScriptの厳格なモードで違法です。機能宣言は、範囲の最上位レベルにある必要があります。ただし、ステートメントブロック内では、関数宣言を関数式に変換し、変数に割り当てることができます。
お勧めしません
if(x){function foo(){}}推薦する
if(x){var foo = function(){};}9。評価機能を使用しないでください
eval() 、コンテキストを混乱させるだけでなく、危険でもあります。これよりも優れた、より明確で安全なコードを書くための別のソリューションが常にあるので、 eval機能を使用しないようにしてください。
10。配列とオブジェクトのリテラル
1.配列とオブジェクトコンストラクターの代わりに、配列とオブジェクトのリテラルを使用します。配列コンストラクターは、パラメーターに簡単に間違いを犯すことができます。
お勧めしません
//アレイ長3VAR A1 = new Array(x1、x2、x3); //配列長2var a2 = new array(x1、x2); // x1が自然数の場合、x1が自然数の場合、その長さは1var a3 = new Array(x1); var a4 = new Array(x1);
このため、コードが2から1に合格した場合、アレイが予期しない長さの変更を経験する可能性が高くなります。このような奇妙な状況を避けるために、常に読み取り可能な配列リテラルを使用してください。
推薦する
var a = [x1、x2、x3]; var a2 = [x1、x2]; var a3 = [x1]; var a4 = [];
2。オブジェクトコンストラクターには同様の問題はありませんが、読みやすさと均一性のために、オブジェクトリテラルを使用する必要があります。
お勧めしません
var o = new object(); var o2 = new object(); o2.a = 0; o2.b = 1; o2.c = 2; o2 ['strange key'] = 3;
推薦する
var o = {}; var o2 = {a:0、b:1、c:2、 '奇妙なキー':3};11。トリプル変数の条件判断(IFの高速な方法)
3成分演算子を使用して、ステートメントを割り当てるか返します。比較的単純な状況で使用し、複雑な状況で使用しないようにします。誰も10行の三元演算子を使用して心を小刻みに入れたいとは思わない。
お勧めしません
if(x === 10){return 'valid';} else {return '無効';}推薦する
x === 10を返しますか? 「有効」:「無効」;
12。ループ用
ループに使用する過程で、配列の長さは変数によって受信されます。これは、コード実行効率を改善するのに役立ちます。代わりに、ループがなくなるたびに配列の長さを再計算する必要があります。
お勧めしません
for(var i = 0; i <arr.length、i ++){}推薦する
for(var i = 0、len = arr.length; i <len、i ++){}13。繰り返されるDOM操作
DOM操作を繰り返して、パフォーマンス、整頓されたコード、簡単なメンテナンスに悪い影響を与えるDOMツリーを頻繁に操作するのではなく、受信して変数を使用する必要があります。
お勧めしません
$( '。mydiv')。find( '。span1')。text( '1'); $( '。mydiv')。
推薦する
var mydiv = $( '。mydiv'); mydiv.find( '。span1')。text( '1'); mydiv.find( '。span2')。
jquery .end()利用可能な場合、use .end()優先する必要があります。
推薦する
$('。mydiv ')。find('。span1 ')。text(' 1 ')。End()。find('。span2 ')。text(' 2 '); .end()。find( '。span3')。text( '3'); .end()。find( '。span4')。text( '4');
14。コメント仕様
コメントを説明するときは、フォーマットされた統一されたコメントスタイルが推奨されます。コードが行うのではなく、コメントを書くときにアイデアを説明してみてください。
お勧めしません
//注文関数を取得getorderbyid(id){var order; // ...注文を返します;}メソッド注釈は、ブロックレベルの注釈と均一に使用する必要があります
推薦する
/** *注文IDに基づいて詳細なデータを取得 * @param {[number]} id [order id] * @return {[order] details] */function getOrderById(id){var Order; // ...注文を返します;}要約します
JavaScriptの共通コード作成仕様の概要は基本的に終了しました。この記事は依然として非常に包括的であり、誰もがJavaScriptを使用または学習するための特定の参照値を持っています。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。