JavaScript-Zusammenfassung gängiger Code-Schreibspezifikationen

Javascript-Code-Spezifikationen

Codierungsspezifikationen Wir sollten dem alten Prinzip folgen: „Nur weil Sie es können, heißt das nicht, dass Sie es tun sollten.“

Globale Namensraumverschmutzung

Verpacken Sie den Code immer in einen unmittelbaren Funktionsausdruck, um ein unabhängiges Modul zu bilden.

Nicht empfohlen

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

Empfohlen

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

Funktion sofort

in< ausführen 🎜>Wenn in der Funktion zur sofortigen Ausführung die globale Variable nützlich ist, sollte sie über die Variable übergeben werden, damit der Funktionskörper der Funktion zur sofortigen Ausführung aufgerufen werden kann in Form einer lokalen Variablen, bis zu einem gewissen Grad Verbessern Sie die Programmleistung.

Und undefiniert sollte zu den formalen Parametern der

Funktion zur sofortigen Ausführung hinzugefügt werden. Dies liegt daran, dass undefiniert in ES3 gelesen und geschrieben werden kann In der globalen Position erhält Ihr Code möglicherweise keine überfälligen Ergebnisse.

Es wird außerdem empfohlen, am Anfang und Ende des

die Funktion sofort auszuführeneinzufügen, um zu vermeiden, dass unser eigener Code durch Unregelmäßigkeiten im Code anderer Personen beim Zusammenführen beeinträchtigt wird

Nicht empfohlen

(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'){
        //你的代码
    }
}());

Empfohlen

;(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));

Strikter Modus

Der strikte Modus von ECMAScript 5 kann durchgehend verwendet werden das Skript oder wird innerhalb einer einzelnen Methode aktiviert. Es führt eine strengere Fehlerprüfung für verschiedene Javascript-Kontexte durch. Der strikte Modus stellt außerdem sicher, dass JavaScript-Code robuster ist und schneller ausgeführt wird.

Der strenge Modus verhindert die Verwendung reservierter Schlüsselwörter, die wahrscheinlich in Zukunft eingeführt werden.

Sie sollten den strikten Modus in Ihren Skripten aktivieren, vorzugsweise in einer eigenständigen Sofortfunktion. Vermeiden Sie die Verwendung in der ersten Zeile Ihres Skripts, da sonst in allen Ihren Skripten der strikte Modus aktiviert wird. Dies kann bei einigen Bibliotheken von Drittanbietern zu Problemen führen.

Nicht empfohlen

'use strict';
(function(){

}());

Empfohlen

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

Variablendeklaration

für alle Für Bei der Variablendeklaration sollten wir alle var angeben. Wenn var nicht angegeben ist, wird im strikten Modus ein Fehler gemeldet. Variablen im gleichen Bereich sollten so weit wie möglich mit einer Variablen deklariert werden, und mehrere Variablen werden durch "," getrennt.

Nicht empfohlen

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

Nicht vollständig empfohlen

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

Empfohlen

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

Vergleichsbeurteilung mit Typbeurteilung verwenden

Verwenden Sie immer den präzisen Vergleichsoperator ===, um die Probleme zu vermeiden, die durch die erzwungene Typkonvertierung von JavaScript während des Beurteilungsprozesses verursacht werden.

Wenn Sie den ===-Operator verwenden, müssen beide Seiten des Vergleichs vom gleichen Typ sein, um gültig zu sein.

Nicht empfohlen

(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));

Empfohlen

(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));

Logische Operationen beim Zuweisen von Werten zu Variablen

Logische Operatoren || und && können auch verwendet werden, um boolesche Werte zurückzugeben. Wenn der Operand ein nicht boolesches Objekt ist, wird jeder Ausdruck von links nach rechts ausgewertet. Basierend auf dieser Operation wird schließlich immer ein Ausdruck zurückgegeben. Dies kann verwendet werden, um Ihren Code beim Zuweisen von Werten zu Variablen zu vereinfachen.

Nicht empfohlen

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

Empfohlen

x = x || y || 1;

Semikolon

Verwenden Sie immer Semikolons. weil implizite Codeverschachtelung subtile Probleme verursachen kann. Natürlich müssen wir diese Probleme grundsätzlich beseitigen [1]. Hier sind ein paar Beispiele, die die Gefahren fehlender Semikolons zeigen:

// 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();

Fehlerergebnis

1. JavaScript-Fehler – derjenige, der zuerst 42 zurückgibt Die Funktion wird durch die in der zweiten Funktion übergebenen Parameter aufgerufen, und dann wird auch die Zahl 42 „aufgerufen“, was zu einem Fehler führt.

2. In 80 % der Fälle erhalten Sie die Fehlermeldung „keine solche Eigenschaft in undefiniert“, da der Aufruf in der realen Umgebung so aussieht: xffVersion, ieVersion().

3. die heißt immer. Da das Ergebnis der Subtraktion eines Arrays um 1 NaN ist, ist es mit nichts gleich (unabhängig davon, ob resultOfOperation NaN zurückgibt). Das Endergebnis ist also, dass der nach der Ausführung von die() erhaltene Wert THINGS_TO_EAT zugewiesen wird.

Funktionsdeklaration innerhalb des Anweisungsblocks

Deklarieren Sie keine Funktionen innerhalb der Anweisungsblock, der im strikten Modus von ECMAScript 5 illegal ist. Funktionsdeklarationen sollten sich auf der obersten Ebene des Bereichs befinden. Innerhalb des Anweisungsblocks kann die Funktionsdeklaration jedoch in einen Funktionsausdruck umgewandelt und einer Variablen zugewiesen werden.

Nicht empfohlen

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

Empfohlen

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

Verwenden Sie nicht die Bewertungsfunktion

eval() ist nicht nur verwirrend, sondern auch gefährlich. Es gibt immer eine bessere, klarere und sicherere Möglichkeit, Ihren Code zu schreiben. Versuchen Sie daher, die Funktion eval nicht zu verwenden.

Array- und Objektliterale

1. Verwenden Sie Array- und Objektliterale, um Array- und Objektkonstruktoren zu ersetzen. Der Array-Konstruktor macht es leicht, bei seinen Argumenten Fehler zu machen.

Nicht empfohlen

//数组长度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();

Wenn der Codeparameter von zwei auf eins geändert wird, ist es daher wahrscheinlich, dass sich die Länge des Arrays unerwartet ändert. Um seltsame Situationen wie diese zu vermeiden, verwenden Sie immer lesbare Array-Literale.

Empfohlen

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）！