Best Practices für JavaScript

Inhaltsverzeichnis

Inhaltsverzeichnis anzeigen

Vermeiden Sie globale Variablen, vermeiden Sie new, vermeiden Sie ==, vermeiden Sie eval()

Vermeiden Sie globale Variablen

Minimieren Sie die Verwendung globaler Variablen.

Dies umfasst alle Datentypen, Objekte und Funktionen.

Globale Variablen und Funktionen können von anderen Skripten überschrieben werden.

Verwenden Sie stattdessen lokale Variablen und lernen Sie deren Verwendung Schließungen.

Deklarieren Sie immer lokale Variablen

Alle in einer Funktion verwendeten Variablen sollten als lokale Variablen deklariert werden.

Lokale Variablen müssen mit der var deklariert werden, das Schlüsselwort let oder das Schlüsselwort const, andernfalls werden sie zu globalen Variablen.

Der strikte Modus erlaubt keine nicht deklarierten Variablen.

Erklärungen oben

Es ist eine gute Codierungspraxis, alle Deklarationen oben in jedem Skript zu platzieren oder Funktion.

Dieser Wille:

Geben Sie saubereren Code
Stellen Sie einen einzigen Ort zum Suchen nach lokalen Variablen bereit
Machen Sie es einfacher, unerwünschte (implizite) globale Variablen zu vermeiden
Reduzieren Sie die Möglichkeit unerwünschter Neuanmeldungen

// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
 
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;

Dies gilt auch für Schleifenvariablen:

for (let i = 0; i < 5; i++) 
 {

Variablen initialisieren

Es ist eine gute Codierungspraxis, Variablen zu initialisieren, wenn Sie sie deklarieren.

Dieser Wille:

Geben Sie saubereren Code
Stellen Sie einen einzigen Ort zum Initialisieren von Variablen bereit
Vermeiden Sie undefinierte Werte

// Declare and initiate at the beginning
let firstName = "";
let lastName = "";
let price = 0;
let discount = 0;
let fullPrice = 0,
const myArray = [];
const myObject = {};

Durch das Initialisieren von Variablen erhalten Sie eine Vorstellung von der beabsichtigten Verwendung (und dem beabsichtigten Datentyp).

Deklarieren Sie Objekte mit const

Durch die Deklaration von Objekten mit const wird eine versehentliche Änderung des Typs verhindert:

Beispiel

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Deklarieren Sie Arrays mit const

Durch die Deklaration von Arrays mit const wird eine versehentliche Änderung des Typs verhindert:

Beispiel

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

Verwenden Sie kein neues Objekt()

Verwenden Sie " anstelle von new String()
Verwenden Sie 0 anstelle von new Number()
Verwenden Sie false anstelle von new Boolean()
Verwenden Sie {} anstelle von new Object()
Verwenden Sie [] anstelle von new Array()
Verwenden Sie /()/ anstelle von new RegExp()
Verwenden Sie function(){} anstelle von new Function()

Beispiel

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Literal Constructors</h2>
<p id="demo"></p>

<script>
let x1 = "";
let x2 = 0;
let x3 = false;
const x4 = {};
const x5 = [];
const x6 = /()/;
const x7 = function(){};

document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

Vorsicht vor automatischen Typkonvertierungen

JavaScript ist lose typisiert.

Eine Variable kann alle Datentypen enthalten.

Eine Variable kann ihren Datentyp ändern:

Beispiel

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>A variable can chang its type. In this example x is first a string then a number:</p>

<p id="demo"></p>

<script>
let x = "Hello";
x = 5;
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>

Beachten Sie, dass Zahlen versehentlich in Zeichenfolgen oder NaN umgewandelt werden können (kein). Nummer).

Bei mathematischen Operationen kann JavaScript Zahlen in Zeichenfolgen umwandeln:

Beispiel

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Remove the comment (at the beginning of the lines) to test each case:</p>

<p id="demo"></p>

<script>
let x = 5;
//x = 5 + 7;    // x.valueOf() is 12, typeof x is a number
//x = 5 + "7";  // x.valueOf() is 57, typeof x is a string
//x = "5" + 7;  // x.valueOf() is 57, typeof x is a string
//x = 5 - 7;    // x.valueOf() is -2, typeof x is a number
//x = 5 - "7";  // x.valueOf() is -2, typeof x is a number
//x = "5" - 7;  // x.valueOf() is -2, typeof x is a number
//x = 5 - "x";  // x.valueOf() is NaN, typeof x is a number

document.getElementById("demo").innerHTML = x.valueOf() + " " + typeof x;
</script>

</body>
</html>

Das Subtrahieren einer Zeichenfolge von einer Zeichenfolge funktioniert nicht generiert einen Fehler, gibt aber NaN (Not a Number) zurück:

Beispiel

"Hello" - "Dolly"    // returns NaN

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>Subtracting a string from a string, does not generate an error but returns NaN (Not a Number):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello" - "Dolly";
</script>

</body>
</html>

Verwenden Sie === Vergleich

Der Vergleichsoperator == führt immer eine Konvertierung (in übereinstimmende Typen) durch Vergleich.

Der Operator === erzwingt den Vergleich von Werten und Typ:

Beispiel

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     
// false

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>Remove the comment (at the beginning of each line) to test each case:</p>

<p id="demo"></p>

<script>
let x;
//x = (0 == "");   // true
//x = (1 == "1");  // true
//x = (1 == true);   // true
//x = (0 === "");  // false
//x = (1 === "1");   // false
//x = (1 === true);  // false
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Verwenden Sie Parameterstandards

Wenn eine Funktion mit einem fehlenden Argument aufgerufen wird, wird der Wert des fehlenden Arguments angezeigt Argument ist auf gesetzt undefiniert.

Undefinierte Werte können Ihren Code beschädigen. Es ist eine gute Angewohnheit, Standardwerte zuzuweisen Werte zu Argumenten.

Beispiel

function myFunction(x, y) {
    if (y === undefined) {
      y = 0;
     }
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>Setting a default value to a function parameter.</p>
<p id="demo"></p>

<script>
function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }  
  return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>

</body>
</html>

ECMAScript 2015 erlaubt Standardparameter in der Funktionsdefinition:

function (a=1, b=1) { /*function code*/  }

Weitere Informationen zu Funktionsparametern und Argumenten finden Sie unter Funktionsparameter

Beenden Sie Ihre Switches mit den Standardeinstellungen

Beenden Sie Ihre switch-Anweisungen immer mit einem default. Auch wenn Sie denken, dass es so ist es ist nicht nötig.

Beispiel

switch (new Date().getDay()) {
   
case 0:
      day = "Sunday";
      break;
  case 1:
      day = "Monday";
      break;
  case 2:
    day = "Tuesday";
     break;
   
case 3:
    day = "Wednesday";
      break;
   
case 4:
    day = "Thursday";
     break;
  case 5:
      day = "Friday";
      break;
  case 6:
    day = "Saturday";
      break;
  default:
    day = 
 "Unknown";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
    break;
  default:
     day = "unknown";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

Vermeiden Sie Zahlen, Zeichenfolgen und Boolesche Werte als Objekte

Behandeln Sie Zahlen, Zeichenfolgen oder boolesche Werte immer als primitive Werte. Nicht so wie Objekte.

Die Deklaration dieser Typen als Objekte verlangsamt die Ausführungsgeschwindigkeit. und erzeugt unangenehme Nebenwirkungen:

Beispiel

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x === y);
</script>

</body>
</html>

Oder noch schlimmer:

Beispiel

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Objects</h2>
<p>Never create strings as objects.</p>
<p>JavaScript cannot compare objects.</p>

<p id="demo"></p>

<script>
let x = new String("John"); 
let y = new String("John");
document.getElementById("demo").innerHTML = (x == y);
</script>

</body>
</html>

Vermeiden Sie die Verwendung von eval()

Die Funktion eval() wird verwendet, um Text als Code auszuführen. In fast allen Fällen ist es sollte nicht notwendig sein, um es zu verwenden.

Da es die Ausführung beliebigen Codes ermöglicht, stellt es auch eine Sicherheit dar Problem.