jsに関する仕様

この記事で共有される内容は、js の仕様に関する問題に関するものであり、必要な友人はそれを参照できます

埋め込みルール

• 整列インデントと改行。

  ...

• 属性

• 変数

• 条件式と等号

• ブロック

• コメント

• コンマ

• セミコロン

• 型変換

• 命名規則

• アクセサー

• コンストラクター

• イベント

• モジュール

• 埋め込みルール

• JavaScriptプログラムを配置する必要があります可能な限り .js ファイル内に、呼び出す必要があるページ上に
の形式で含まれます。 Javascript コードがページに固有のものではない場合は、ページ内に Javascript コードを直接記述しないようにする必要があります。

• インデントと改行を揃える

• インデント

この記事では、同じシステム内で同じインデント標準を使用する必要があります。各コンパイラでは、Tab キーによって置き換えられるスペースのサイズの定義が異なります。開発環境をセットアップするときは、エディターの Tab ショートカット キーを 4 つのスペースにリセットすることをお勧めします。ほとんどのコンパイラはこの機能を提供します。それ以外の場合は、スペースを 4 つ押してインデントすることをお勧めします。
• 改行

• 次の場所で改行する必要があります:

各独立したステートメントの終了後

<script src="filename.js">if、else、catch、finally、while およびその他のキーワード;

演算子で折り返す場合、演算子は新しい行の先頭になければなりません。

• 
  

  1行の長さが制限を超えた場合に発生する改行については、行の長さの分割方法を参照してください。
長すぎる文字列の切り詰め

• 
  

  コードの各行は 80 文字未満である必要があります。コードが長い場合は、改行を演算子と句読点の後、できればセミコロン「;」またはカンマ「,」の後に置くようにしてください。コードの次の行は、前の行に対してスペース 4 つインデントされます。これにより、コピー＆ペーストによるコード抜けなどのエラーを効果的に防止し、可読性を向上させることができます。

  
  

  三項演算子が長すぎます

• 三項演算子は 3 つの部分で構成されているため、行の折り返しは各部分の長さに基づいて、3 つの異なる状況を形成する必要があります:

  <script>    // 无需换行
      var result = condition ? resultA : resultB;    // 条件超长的情况
      var result = thisIsAVeryVeryLongCondition     ? resultA : resultB;    //  结果分支超长的情况
      var result = condition
          ? thisIsAVeryVeryLongCondition
          :resultB;    var result = condition
          ? resultA
          : thisIsAVeryVeryLongCondition;</script>

次の状況は発生してはなりません:

• <script>    // 最后一个结果很长，但不建议合并条件和第一个分支
      // 不要这么干
      var result = condition ? resultA
          : thisIsAVeryVeryLongCondition;</script>

論理条件の組み合わせが長すぎます
論理条件の組み合わせがより複雑で80文字では需要を満たせない場合は、各条件を別の行に配置し、論理演算子を次の位置に配置する必要があります。または、ロジックの一部を論理的な組み合わせに分割します。最後に、右中括弧) と左中括弧 { を別の行に配置して、if 内のステートメント ブロックを視覚的に簡単に識別できるようにします。例:

• <script>    // 注意逻辑运算符前的缩进
      if (user.isAuthenticated()
          && user.isInRole(&#39;admin&#39;)
          && user.hasAuthority(&#39;add-admin&#39;)
          || user.hasAuthority(&#39;delete-admin&#39;)
      ) {        // code
      }
  </script>

  
  

  長すぎる JSON と配列
1. 多くのオブジェクト属性があり、各属性が 1 行に占めるスペースが多すぎる場合は、次のようなセマンティクスまたはロジックによってグループに整理できます。

   <script>    // 引文-数字的映射
       var mapping = {
           one: 1, two: 2, three: 3, four: 4, five: 5,
           six: 6, seven: 7, eight:8, nine: 9, ten: 10,
           eleven: 11
       }
   </script>

   By 5 グループのグループが各行を合理的な範囲で制御し、論理的に分割します。 項目数が多い配列の場合も同様の方法で対応可能です

return文

1. return 式の実行を戻り値として使用する場合は、改行を避けるために式とreturnを同じ行に記述してくださいブロックされている文字 ステートメントの終わりとして誤って解釈され、エラーが返されます。 return キーワードの後に​​ return 式がない場合は、unknown が返されます。コンストラクターのデフォルトの戻り値は次のとおりです。
   命名

命名方法は通常、次のカテゴリに分類されます:

1. 名称の説明

- 1).camel 命名法、thisIsAnApple の形式

- 2).pascal 命名法、ThisIsAnApple

の形式で - 3).this_is_an_apple ·
1. の形式で命名法に下線を引きます。 - 4) アンダースコアの命名法は this-is-an-apple

   の形式です。 コンテンツの種類に応じて、次の命名法を厳密に使用する必要があります:

変数名: Camel 命名法を使用する必要があります

1. パラメータ名: Camel 命名法を使用する必要があります

関数名: Camel 命名法を使用する必要がありますメソッド/プロパティ: Camel 命名法を使用する必要があります

1. プライベート (保護された) メンバー: アンダースコア _ で始まる必要があります

定数名: IS_DEBUG_ENABLED など、すべて大文字のアンダースコア命名法を使用する必要があります

クラス名: Pascal命名法を使用する必要があります

列挙名: Pascal 命名法を使用する必要があります



列挙型の属性: すべて大文字のアンダースコア命名法を使用する必要があります

命名空间：必须使用camel命名法

语义：命名同时还需要关注语义，如：

• 变量名应当使用名词；

• boolean类型的应当使用is、has等起头，表示其类型；·

• 函数名应当用动宾短语；

• 类名应当用名词。

声明

变量的声明

尽管 JavaScript 语言并不要求在变量使用前先对变量进行声明。但我们还是应该养成这个好习惯。这样可以比较容易的检测出那些未经声明的变量，避免其变为隐藏的全局变量，造成隐患。

在函数的开始应先用 var 关键字声明函数中要使用的局部变量，注释变量的功能及代表的含义，且应以字母顺序排序。每个变量单独占一行，以便添加注释。这是因为 JavaScript 中只有函数的 {} 表明作用域，用 var 关键字声明的局部变量只在函数内有效，而未经 var 声明的变量则被视为全局变量。示例：

<script>    var valueA = "a";    var valueB = "b";    function f1() {
        var valueA = "c";
        alert("valueA=" + valueA); // output: valueA=c
        valueB = "d";
        alert("valueB=" + valueB); // output: valueB=d
    }
    f1();
    alert("valueA=" + valueA); // output: valueA=a
    alert("valueB=" + valueB); // output: valueB=d</script>

用 var 声明过的变量 valueA 和没有声明的变量 valueB 是有区别的。特别需要注意的是，在函数内部用 var 声明的变量为局部变量，这样可以有效地避免因局部变量和全局变量同名而产生的错误。

类型

• 原始值: 相当于传值
  

• string

• number

• boolean

• null

• undefined

<script>    var foo = 1,
        bar = foo;
    bar = 9;
console.log(foo, bar); // => 1, 9</script>

• 复杂类型: 相当于传引用
  

• object

• array

• function

<script>    var foo = [1, 2],
        bar = foo;
    bar[0] = 9;
    console.log(foo[0], bar[0]); // => 9, 9</script>

对象

• 使用字面值创建对象

<script>// badvar item = new Object();// goodvar item = {};</script>

• 不要使用保留字 reserved words 作为键

<script>// badvar superman = {  class: &#39;superhero&#39;,  default: { clark: &#39;kent&#39; },
  private: true};// goodvar superman = {
  klass: &#39;superhero&#39;,
  defaults: { clark: &#39;kent&#39; },
  hidden: true};</script>

数组

• 使用字面值创建数组

<script>// badvar items = new Array();// goodvar items = [];</script>

• 如果你不知道数组的长度，使用push

<script>var someStack = [];// badsomeStack[someStack.length] = &#39;abracadabra&#39;;// goodsomeStack.push(&#39;abracadabra&#39;);</script>

• 当你需要拷贝数组时使用slice. jsPerf

<script>var len = items.length,
    itemsCopy = [],
    i;// badfor (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}// gooditemsCopy = items.slice();</script>

• 使用slice将类数组的对象转成数组

<script>function trigger() {
  var args = Array.prototype.slice.call(arguments);
  ...
}
</script>

字符串

• 对字符串使用单引号 ”

<script>// badvar name = "Bob Parr";// goodvar name = &#39;Bob Parr&#39;;// badvar fullName = "Bob " + this.lastName;// goodvar fullName = &#39;Bob &#39; + this.lastName;</script>

• 超过80个字符的字符串应该使用字符串连接换行

• 注: 如果过度使用，长字符串连接可能会对性能有影响

<script>// badvar errorMessage = &#39;This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.&#39;;// badvar errorMessage = &#39;This is a super long error that \
was thrown because of Batman. \
When you stop to think about \
how Batman had anything to do \
with this, you would get nowhere \
fast.&#39;;// goodvar errorMessage = &#39;This is a super long error that &#39; +  &#39;was thrown because of Batman.&#39; +  &#39;When you stop to think about &#39; +  &#39;how Batman had anything to do &#39; +  &#39;with this, you would get nowhere &#39; +  &#39;fast.&#39;;</script>

• 编程时使用join而不是字符串连接来构建字符串，特别是IE

<script>var items,
    messages,
    length, i;

messages = [{
    state: &#39;success&#39;,
    message: &#39;This one worked.&#39;},{
    state: &#39;success&#39;,
    message: &#39;This one worked as well.&#39;},{
    state: &#39;error&#39;,
    message: &#39;This one did not work.&#39;}];

length = messages.length;// badfunction inbox(messages) {
  items = &#39;<ul>&#39;;  for (i = 0; i < length; i++) {
    items += &#39;<li>&#39; + messages[i].message + &#39;</li>&#39;;
  }  return items + &#39;</ul>&#39;;
}// goodfunction inbox(messages) {
  items = [];  for (i = 0; i < length; i++) {
    items[i] = messages[i].message;
  }  return &#39;<ul><li>&#39; + items.join(&#39;</li><li>&#39;) + &#39;</li></ul>&#39;;
}
</script>

函数

• 函数表达式:

<script>// 匿名函数表达式var anonymous = function() {
  return true;
};// 有名函数表达式var named = function named() {
  return true;
};// 立即调用函数表达式(function() {
  console.log(&#39;Welcome to the Internet. Please follow me.&#39;);
})();</script>

• 绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同。

• 注: ECMA-262定义把块定义为一组语句，函数声明不是一个语句.

<script>// badif (currentUser) {  function test() {
    console.log(&#39;Nope.&#39;);
  }
}// goodif (currentUser) {  var test = function test() {
    console.log(&#39;Yup.&#39;);
  };
}

</script>

• 绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象.

<script>// badfunction nope(name, options, arguments) {
  // ...stuff...}// goodfunction yup(name, options, args) {
  // ...stuff...}
</script>

属性

• 当使用变量访问属性时使用中括号.

<script>var luke = {
  jedi: true,
  age: 28};function getProp(prop) {
  return luke[prop];
}var isJedi = getProp(&#39;jedi&#39;);</script>

变量

• 总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间。

<script>// badsuperPower = new SuperPower();// goodvar superPower = new SuperPower();</script>

• 使用一个 var 以及新行声明多个变量，缩进4个空格。

<script>// badvar items = getItems();var goSportsTeam = true;var dragonball = &#39;z&#39;;// goodvar items = getItems(),
    goSportsTeam = true,
    dragonball = &#39;z&#39;;</script>

• 最后再声明未赋值的变量，当你想引用之前已赋值变量的时候很有用。

<script>// badvar i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;// badvar i, items = getItems(),
    dragonball,
    goSportsTeam = true,
    len;// goodvar items = getItems(),
    goSportsTeam = true,
    dragonball,
    length,
    i;</script>

• 在作用域顶部声明变量，避免变量声明和赋值引起的相关问题。

<script>// badfunction() {
  test();
  console.log(&#39;doing stuff..&#39;);  //..other stuff..

  var name = getName();  if (name === &#39;test&#39;) {    return false;
  }  return name;
}// goodfunction() {
  var name = getName();

  test();
  console.log(&#39;doing stuff..&#39;);  //..other stuff..

  if (name === &#39;test&#39;) {    return false;
  }  return name;
}// badfunction() {
  var name = getName();  if (!arguments.length) {    return false;
  }  return true;
}// goodfunction() {
  if (!arguments.length) {    return false;
  }  var name = getName();  return true;
}
</script>

条件表达式和等号

• 适当使用 === 和 !== 以及 == 和 !=

• 条件表达式的强制类型转换遵循以下规则：
  

• 对象 被计算为 true

• Undefined 被计算为 false

• Null 被计算为 false

• 布尔值 被计算为 布尔的值

• 数字 如果是 +0, -0, or NaN 被计算为 false , 否则为 true

• 字符串 如果是空字符串 ” 则被计算为 false, 否则为 true
  

  
  

• javascript 
  <script> 
  if ([0]) { 
  // true 
  // An array is an object, objects evaluate to true 
  } 
  </script>

• 使用快捷方式

<script>// badif (name !== &#39;&#39;) {  // ...stuff...}// goodif (name) {  // ...stuff...}// badif (collection.length > 0) {  // ...stuff...}// goodif (collection.length) {  // ...stuff...}
</script>

块

• 给所有多行的块使用大括号

<script>// badif (test)  return false;// goodif (test) return false;// goodif (test) {  return false;
}// badfunction() { return false; }// goodfunction() {
  return false;
}
</script>

注释

注释要尽量简单，清晰明了。着重注释的意思，对不太直观的部分进行注解

JavaScript 的注释有两种”//” 和”/* …. */”
- 建议”//”用作代码行注释
- “/* …. */”形式用作对整个代码段的注销，或较正式的声明中，如函数参数、功能、文件功能等的描述中
- >另：复制粘贴应注意注释是否与代码对应。

• 使用 /* … / 进行多行注释，包括描述，指定类型以及参数值和返回值

<script>// bad// make() returns a new element// based on the passed in tag name//// @param <String> tag// @return <Element> elementfunction make(tag) {

  // ...stuff...

  return element;
}// good/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param <String> tag
 * @return <Element> element
 */function make(tag) {

  // ...stuff...

  return element;
}
</script>

• 使用 // 进行单行注释，在评论对象的上面进行单行注释，注释前放一个空行.

<script>// badvar active = true;  // is current tab// good// is current tabvar active = true;// badfunction getType() {
  console.log(&#39;fetching type...&#39;);  // set the default type to &#39;no type&#39;
  var type = this._type || &#39;no type&#39;;  return type;
}// goodfunction getType() {
  console.log(&#39;fetching type...&#39;);  // set the default type to &#39;no type&#39;
  var type = this._type || &#39;no type&#39;;  return type;
}
</script>

• 如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上 FIXME 或 TODO 帮助其他人迅速理解

<script>function Calculator() {

  // FIXME: shouldn&#39;t use a global here
  total = 0;  return this;
}function Calculator() {

  // TODO: total should be configurable by an options param
  this.total = 0;  return this;
}
</script>

空白

• 将tab设为4个空格

  // badfunction() {∙∙var name;
  }// badfunction() {∙var name;
  }// goodfunction() {∙∙∙∙var name;
  }

• 大括号前放一个空格

  // badfunction test(){console.log('test');
  }// goodfunction test() {console.log('test');
  }// baddog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog'});// gooddog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog'});

• 在做长方法链时使用缩进.

  // bad$('#items').find('.selected').highlight().end().find('.open').updateCount();// good$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();// badvar leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)
    .attr('width',  (radius + margin) * 2).append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);// goodvar leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .class('led', true)
    .attr('width',  (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

逗号

• 不要将逗号放前面

  // badvar once
  , upon
  , aTime;// goodvar once,
    upon,
    aTime;// badvar hero = {
    firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', superPower: 'strength'};// goodvar hero = {
  firstName: 'Bob',
  lastName: 'Parr',
  heroName: 'Mr. Incredible',
  superPower: 'strength'};

• 不要加多余的逗号，这可能会在IE下引起错误，同时如果多一个逗号某些ES3的实现会计算多数组的长度。

  // badvar hero = {
  firstName: 'Kevin',
  lastName: 'Flynn',
  };var heroes = ['Batman','Superman',
  ];// goodvar hero = {
  firstName: 'Kevin',
  lastName: 'Flynn'};var heroes = ['Batman','Superman'];

分号

• 语句结束一定要加分号

  // bad(function() {var name = 'Skywalker'return name
  })()// good(function() {var name = 'Skywalker';return name;
  })();// good;(function() {var name = 'Skywalker';return name;
  })();

类型转换

• 在语句的开始执行类型转换.

• 字符串:

  //  => this.reviewScore = 9;// badvar totalScore = this.reviewScore + '';// goodvar totalScore = '' + this.reviewScore;// badvar totalScore = '' + this.reviewScore + ' total score';// goodvar totalScore = this.reviewScore + ' total score';

• 对数字使用 parseInt 并且总是带上类型转换的基数.

  var inputValue = '4';// badvar val = new Number(inputValue);// badvar val = +inputValue;// badvar val = inputValue >> 0;// badvar val = parseInt(inputValue);// goodvar val = Number(inputValue);// goodvar val = parseInt(inputValue, 10);// good/**
  * parseInt was the reason my code was slow.
  * Bitshifting the String to coerce it to a
  * Number made it a lot faster.
  */var val = inputValue >> 0;

• 布尔值:

  var age = 0;// badvar hasAge = new Boolean(age);// goodvar hasAge = Boolean(age);// goodvar hasAge = !!age;

命名约定

• 避免单个字符名，让你的变量名有描述意义。

  // badfunction q() {// ...stuff...}// goodfunction query() {// ..stuff..}

• 当命名对象、函数和实例时使用驼峰命名规则

  // badvar OBJEcttsssss = {};var this_is_my_object = {};var this-is-my-object = {};function c() {};var u = new user({
  name: 'Bob Parr'});// goodvar thisIsMyObject = {};function thisIsMyFunction() {};var user = new User({
  name: 'Bob Parr'});

• 当命名构造函数或类时使用驼峰式大写

  // badfunction user(options) {this.name = options.name;
  }var bad = new user({
  name: 'nope'});// goodfunction User(options) {this.name = options.name;
  }var good = new User({
  name: 'yup'});

• 命名私有属性时前面加个下划线 _

  // badthis.__firstName__ = 'Panda';this.firstName_ = 'Panda';// goodthis._firstName = 'Panda';

• 当保存对 this 的引用时使用 _this.

  // badfunction() {var self = this;return function() {
    console.log(self);
  };
  }// badfunction() {var that = this;return function() {
    console.log(that);
  };
  }// goodfunction() {var _this = this;return function() {
    console.log(_this);
  };
  }

存取器

• 属性的存取器函数不是必需的

• 如果你确实有存取器函数的话使用getVal() 和 setVal(‘hello’)

  // baddragon.age();// gooddragon.getAge();// baddragon.age(25);// gooddragon.setAge(25);

• 如果属性是布尔值，使用isVal() 或 hasVal()

  // badif (!dragon.age()) {return false;
  }// goodif (!dragon.hasAge()) {return false;
  }

• 可以创建get()和set()函数，但是要保持一致

  function Jedi(options) {options || (options = {});var lightsaber = options.lightsaber || 'blue';this.set('lightsaber', lightsaber);
  }
  
  Jedi.prototype.set = function(key, val) {this[key] = val;
  };
  
  Jedi.prototype.get = function(key) {return this[key];
  };

构造器

• 给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题。

  function Jedi() {console.log('new jedi');
  }// badJedi.prototype = {
  fight: function fight() {
    console.log('fighting');
  },
  
  block: function block() {
    console.log('blocking');
  }
  };// goodJedi.prototype.fight = function fight() {console.log('fighting');
  };
  
  Jedi.prototype.block = function block() {console.log('blocking');
  };

• 方法可以返回 this 帮助方法可链。

  // badJedi.prototype.jump = function() {this.jumping = true;return true;
  };
  
  Jedi.prototype.setHeight = function(height) {this.height = height;
  };var luke = new Jedi();
  luke.jump(); // => trueluke.setHeight(20) // => undefined// goodJedi.prototype.jump = function() {this.jumping = true;return this;
  };
  
  Jedi.prototype.setHeight = function(height) {this.height = height;return this;
  };var luke = new Jedi();
  
  luke.jump()
  .setHeight(20);

• 可以写一个自定义的toString()方法，但是确保它工作正常并且不会有副作用。

  function Jedi(options) {options || (options = {});this.name = options.name || 'no name';
  }
  
  Jedi.prototype.getName = function getName() {return this.name;
  };
  
  Jedi.prototype.toString = function toString() {return 'Jedi - ' + this.getName();
  };

事件

• 当给事件附加数据时，传入一个哈希而不是原始值，这可以让后面的贡献者加入更多数据到事件数据里而不用找出并更新那个事件的事件处理器

  // bad$(this).trigger('listingUpdated', listing.id);
  
  ...
  
  $(this).on('listingUpdated', function(e, listingId) {// do something with listingId});

  更好:

  // good$(this).trigger('listingUpdated', { listingId : listing.id });
  
  ...
  
  $(this).on('listingUpdated', function(e, data) {// do something with data.listingId});

模块

• 模块应该以 ! 开始，这保证了如果一个有问题的模块忘记包含最后的分号在合并后不会出现错误

• 这个文件应该以驼峰命名，并在同名文件夹下，同时导出的时候名字一致

• 加入一个名为noConflict()的方法来设置导出的模块为之前的版本并返回它

• 总是在模块顶部声明 'use strict';

  // fancyInput/fancyInput.js!function(global) {'use strict';var previousFancyInput = global.FancyInput;function FancyInput(options) {
    this.options = options || {};
  }
  
  FancyInput.noConflict = function noConflict() {
    global.FancyInput = previousFancyInput;  return FancyInput;
  };
  
  global.FancyInput = FancyInput;
  }(this);

jQuery

• 缓存jQuery查询

  // badfunction setSidebar() {$('.sidebar').hide();// ...stuff...$('.sidebar').css({  'background-color': 'pink'});
  }// goodfunction setSidebar() {var $sidebar = $('.sidebar');
  $sidebar.hide();// ...stuff...$sidebar.css({  'background-color': 'pink'});
  }

• 对DOM查询使用级联的 $('.sidebar ul') 或 $('.sidebar ul')，jsPerf

• 对有作用域的jQuery对象查询使用 find

  // bad$('.sidebar', 'ul').hide();// bad$('.sidebar').find('ul').hide();

• // good$('.sidebar ul').hide();// good$('.sidebar > ul').hide();// good (slower)$sidebar.find('ul');// good (faster)$($sidebar[0]).find('ul');

以上がjsに関する仕様の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。