JavaScript - 一般的なコード記述仕様をまとめたもの

JavaScript コード標準

コーディング標準 私たちは、「できるからといって、それをすべきだという意味ではない」という古代の原則に従う必要があります。

グローバルな名前空間汚染

常にコードを即時関数式でラップして、独立したモジュールを形成します。

非推奨

var x = 10,
    y = 100;
console.log(window.x + ' ' + window.y);

推奨

;(function(window){
    'use strict';
    var x = 10,
        y = 100;
    console.log(window.x + ' ' + window.y);
}(window));

関数をただちに実行する

関数をすぐに実行するでは、グローバル変数が有用な場合は変数を通過する必要があるため、関数本体はの関数をすぐに実行するは、呼び出されるときにローカル変数の形式で呼び出すことができ、プログラムのパフォーマンスをある程度向上させることができます。

そして、関数をただちに実行するの仮パラメータに、グローバル位置のunknownの値を変更すると、ES3で読み書きできるようにするため、unknownを追加する必要があります。期限を過ぎても結果が得られない場合があります。

マージ中に他のコードの非標準コードによる自分のコードへの影響を避けるために、関数をすぐに実行するの先頭と末尾にセミコロンを追加することもお勧めします

非推奨

(function(){
    'use strict';
    var x = 10,
        y = 100,
        c,
        elem=$('body');
    console.log(window.x + ' ' + window.y);
    $(document).on('click',function(){

    });
    if(typeof c==='undefined'){
        //你的代码
    }
}());

推奨

;(function($,window,document,undefined){
    'use strict';
    var x = 10,
        y = 100,
        c,
        elem=$('body');
    console.log(window.x + ' ' + window.y);
    $(document).on('click',function(){

    });
    if(typeof c==='undefined'){
        //你的代码
    }
}(jQuery,window,document));

厳密モード

ECMAScript 5 厳密モードは、スクリプト全体または個々のメソッド内でアクティブ化できます。さまざまな JavaScript コンテキストに対応して、より厳格なエラー チェックが実行されます。また、厳密モードでは、JavaScript コードがより堅牢になり、より高速に実行されます。

厳密モードは、将来導入される可能性のある予約キーワードの使用を防ぎます。

スクリプトで、できればスタンドアロンの即時関数で、厳密モードを有効にする必要があります。スクリプトの最初の行でこれを使用しないでください。これにより、すべてのスクリプトで厳密モードが有効になるため、一部のサードパーティ ライブラリで問題が発生する可能性があります。

非推奨

'use strict';
(function(){

}());

推奨

(function(){
    'use strict';
}());

変数宣言

すべての変数宣言では、var が指定されていない場合、厳密モードでエラーが報告され、変数は同じスコープにあります。 var を使用して宣言し、複数の変数を「,」で区切るようにしてください。

非推奨

function myFun(){
    x=5;
    y=10;
}

完全には推奨されません

function myFun(){
    var x=5;
    var y=10;
}

推奨

function myFun(){
    var x=5,
        y=10;
}

型判定と比較判定を使用してください

判定プロセスでのエラーやトラブルを避けるために、常に === 正確な比較演算子を使用してくださいJavaScriptの強制型変換によるものです。

=== 演算子を使用する場合、比較が有効となるには、両側が同じ型である必要があります。

非推奨

(function(w){
  'use strict';

  w.console.log('0' == 0); // true
  w.console.log('' == false); // true
  w.console.log('1' == true); // true
  w.console.log(null == undefined); // true

  var x = {
    valueOf: function() {
      return 'X';
    }
  };

  w.console.log(x == 'X');//true

}(window.console.log));

推奨

(function(w){
  'use strict';

  w.console.log('0' === 0); // false
  w.console.log('' === false); // false
  w.console.log('1' === true); // false
  w.console.log(null === undefined); // false

  var x = {
    valueOf: function() {
      return 'X';
    }
  };

  w.console.log(x === 'X');//false

}(window));

変数を割り当てるときの論理演算

論理演算子 || と && は、ブール値を返すために使用することもできます。オペランドが非ブール オブジェクトの場合、各式は左から右に評価されます。この操作に基づいて、最終的には常に式が返されます。これを使用すると、変数に値を割り当てるときにコードを簡素化できます。

非推奨

if(!x) {
  if(!y) {
    x = 1;
  } else {
    x = y;
  }
}

推奨

x = x || y || 1;

セミコロン

暗黙的なコードのネストは微妙な問題を引き起こす可能性があるため、常にセミコロンを使用してください。もちろん、これらの問題を根本的に解決する必要があります[1]。次の例は、セミコロンが欠落している場合の危険性を示しています。

// 1.
MyClass.prototype.myMethod = function() {
  return 42;
}  //这里没有分号

(function() {

})();

 //2.
var x = {
  'i': 1,
  'j': 2
}  // 这里没有分号
//我知道这样的代码你可能永远不会写，但是还是举一个例子
[ffVersion, ieVersion][isIE]();

 // 3.
var THINGS_TO_EAT = [apples, oysters, sprayOnCheese]  // 这里没有分号

-1 == resultOfOperation() || die();

Error result

1. JavaScript エラー - 最初に 42 を返す関数が 2 番目の関数パラメータによって呼び出され、その後、数値 42 も「Call」となり、エラーが発生します。エラー。

2. 80% の確率で、「未定義にはそのようなプロパティはありません」というエラー メッセージが表示されます。これは、実際の環境での呼び出しは次のようなものであるためです: xffVersion、ieVersion().

3. die が常に呼び出されます。配列を 1 減算した結果は NaN であるため、(resultOfOperation が NaN を返すかどうかに関係なく) それは何にも等しくありません。したがって、最終的な結果は、die() の実行後に取得された値が THINGS_TO_EAT に割り当てられることになります。

ステートメント ブロック内での関数宣言

ECMAScript 5 の厳密モードでは、これは行われません。合法的に許可されています。関数宣言はスコープの最上位にある必要があります。ただし、ステートメント ブロック内では、関数宣言を関数式に変換して変数に割り当てることができます。

推奨されません

if (x) {
  function foo() {}
}

推奨

if (x) {
  var foo = function() {};
}

eval 関数を使用しないでください

eval() はコンテキストを混乱させるだけでなく、危険でもあります。これはコードを記述するためのものなので、eval 関数は使用しないようにしてください。

配列リテラルとオブジェクトリテラル

1. 配列リテラルとオブジェクトリテラルを使用して、配列コンストラクターとオブジェクトコンストラクターを置き換えます。配列コンストラクターを使用すると、引数を間違えやすくなります。

非推奨

//数组长度3
var a1 = new Array(x1, x2, x3);
//数组长度2
var a2 = new Array(x1, x2);

//如果x1是一个自然数，那么它的长度将为x1
//如果x1不是一个自然数，那么它的长度将为1
var a3 = new Array(x1);

var a4 = new Array();

このため、code パラメータを 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,
  'strange key': 3
};

三元条件判断（if 的快捷方法）

用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

不推荐

if(x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

推荐

return x === 10 ? 'valid' : 'invalid';

for循环

使用for循环过程中，数组的长度，使用一个变量来接收，这样有利于代码执行效率得到提高，而不是每走一次循环，都得重新计算数组长度

不推荐

for(var i=0;i<arr.length,i++){

}

推荐

for(var i=0,len=arr.length;i<len,i++){

}

重复的dom操作

重复的dom操作，使用一个变量来进行接收很有必要，而不是频繁的去操作dom树，这对性能与代码的整洁及易维护性带来不好的影响

不推荐

$('.myp').find('.span1').text('1');
$('.myp').find('.span2').text('2');
$('.myp').find('.span3').text('3');
$('.myp').find('.span4').text('4');

推荐

var myp=$('.myp');
myp.find('.span1').text('1');
myp.find('.span2').text('2');
myp.find('.span3').text('3');
myp.find('.span4').text('4');

在jquery .end()可使用的情况下应该优先使用.end()

推荐

$('.myp').find('.span1').text('1')
           .end().find('.span2').text('2');
           .end().find('.span3').text('3');
           .end().find('.span4').text('4');

注释规范

在描写注释时，推荐格式化且统一的注释风格，在写注释时尽量描述写代码时的思路，而不是代码做了什么。

不推荐

//获取订单
function getOrderByID(id){
    var order;
    //...
    return order;
}

方法的注释应该统一用块级注释

推荐

/**
 * 根据订单id获取订单详细数据
 * @param  {[number]} id [订单ID]
 * @return {[order]}    [订单详细信息]
 */
function getOrderByID(id){
    var order;
    //...
    return order;
}

以上就是JavaScript-总结常用代码书写规范的内容，更多相关内容请关注PHP中文网（www.php.cn）！