コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript - 一般的なコード記述仕様をまとめたもの

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

黄舟
リリース： 2017-02-22 13:21:23
オリジナル
1059 人が閲覧しました

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树，这对性能与代码的整洁及易维护性带来不好的影响

不推荐

$(&#39;.myp&#39;).find(&#39;.span1&#39;).text(&#39;1&#39;);
$(&#39;.myp&#39;).find(&#39;.span2&#39;).text(&#39;2&#39;);
$(&#39;.myp&#39;).find(&#39;.span3&#39;).text(&#39;3&#39;);
$(&#39;.myp&#39;).find(&#39;.span4&#39;).text(&#39;4&#39;);
ログイン後にコピー

推荐

var myp=$(&#39;.myp&#39;);
myp.find(&#39;.span1&#39;).text(&#39;1&#39;);
myp.find(&#39;.span2&#39;).text(&#39;2&#39;);
myp.find(&#39;.span3&#39;).text(&#39;3&#39;);
myp.find(&#39;.span4&#39;).text(&#39;4&#39;);
ログイン後にコピー

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

推荐

$(&#39;.myp&#39;).find(&#39;.span1&#39;).text(&#39;1&#39;)
           .end().find(&#39;.span2&#39;).text(&#39;2&#39;);
           .end().find(&#39;.span3&#39;).text(&#39;3&#39;);
           .end().find(&#39;.span4&#39;).text(&#39;4&#39;);
ログイン後にコピー

注释规范

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

不推荐

//获取订单
function getOrderByID(id){
    var order;
    //...
    return order;
}
ログイン後にコピー

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

推荐

/**
 * 根据订单id获取订单详细数据
 * @param  {[number]} id [订单ID]
 * @return {[order]}    [订单详细信息]
 */
function getOrderByID(id){
    var order;
    //...
    return order;
}
ログイン後にコピー

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



関連ラベル：
JavaScript，常用代码，书写规范
ソース：php.cn
前の記事：Javascriptのガード関数パラメータ 次の記事：JavaScriptプロトタイプの詳しい説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2245
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2385
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1994
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1881
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1950
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート