JavaScript (JS) ist eine allgegenwärtige, flexible und weit verbreitete Programmiersprache – obwohl sie auch anfällig für Fehler und Bugs ist, die die meisten Entwickler die Stirn runzeln und ausrasten lassen.
JS wird ausgiebig verwendet, um die Benutzerinteraktivität auf der Clientseite der meisten Webanwendungen zu fördern. Ohne JavaScript könnten die Dinge im Web vielleicht leblos und unstimulierend sein. Nichtsdestotrotz führen die Höhen und Tiefen der Sprache manchmal dazu, dass Entwickler eine Hassliebe zu ihr entwickeln.
JavaScript-Fehler führen dazu, dass Anwendungen unerwartete Ergebnisse liefern und die Benutzererfahrung beeinträchtigen. Eine Studie der University of British Columbia (UBC) hat versucht, die Ursachen und Auswirkungen von JavaScript-Fehlern und -Bugs herauszufinden. Die Ergebnisse der Studie deckten einige häufige Muster auf, die die Leistung von JS-Programmen beeinträchtigen.
Hier ist ein Tortendiagramm, das zeigt, was die Forscher herausgefunden haben:
In diesem Blogbeitrag veranschaulichen wir einige der häufigsten Ursachen für JavaScript-Fehler, die in der Studie hervorgehoben wurden (und andere, denen wir täglich begegnen) und wie Sie Ihre Anwendungen weniger fehleranfällig machen können.
Inhaltsverzeichnis
DOM-bezogen
Das Document Object Model (DOM) spielt eine entscheidende Rolle bei der Interaktivität von Websites. Die DOM-Schnittstelle ermöglicht es, Inhalt, Stil und Struktur einer Webseite zu manipulieren. Einfache HTML-Webseiten interaktiv zu machen – oder das DOM zu manipulieren – ist der eigentliche Grund, warum die Programmiersprache JavaScript veröffentlicht wurde.
Selbst mit der Einführung von Backend-JavaScript-Technologien wie Node.js macht die Arbeit mit dem DOM also immer noch einen großen Teil dessen aus, was die Sprache leistet. Daher ist das DOM ein wichtiger Weg, um Bugs und Fehler in JavaScript-Anwendungen einzuführen.
Es ist keine Überraschung, dass die JavaScript-Bug-Report-Studie herausfand, dass DOM-bezogene Probleme mit 68 % für die meisten Fehler verantwortlich sind.
Beispielsweise machen einige JavaScript-Programmierer häufig den Fehler, auf ein DOM-Element zu verweisen, bevor es geladen wird, was zu Codefehlern führt.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>
Wenn der obige Code im Chrome-Browser ausgeführt wird, wird ein Fehler ausgegeben, der in der Entwicklerkonsole angezeigt wird:
Der Fehler wird ausgegeben, weil JavaScript-Code normalerweise in der Reihenfolge ausgeführt wird, in der er in einem Dokument erscheint. Daher ist dem Browser das referenzierte
Um ein solches Problem zu lösen, können Sie verschiedene Ansätze verwenden. Die einfachste Methode besteht darin,
vor den Anfang des script-Tags zu setzen. Sie können auch eine JavaScript-Bibliothek wie jQuery verwenden, um sicherzustellen, dass das DOM zuerst geladen wird, bevor darauf zugegriffen werden kann.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
</body>
</html>
Syntaxbasiert
Syntaxfehler treten auf, wenn der JavaScript-Interpreter einen syntaktisch falschen Code nicht ausführt. Wenn beim Erstellen einer Anwendung der Interpreter Token feststellt, die nicht mit der Standardsyntax der JavaScript-Programmiersprache übereinstimmen, wird ein Fehler ausgegeben. Laut der JavaScript-Bug-Report-Studie sind solche Fehler für 12 % aller Fehler in der Sprache verantwortlich.
Grammatikfehler wie fehlende Klammern oder nicht übereinstimmende Klammern sind die Hauptursachen für Syntaxfehler in JavaScript.
Wenn Sie beispielsweise bedingte Anweisungen verwenden müssen, um mehrere Bedingungen zu adressieren, können Sie möglicherweise die erforderlichen Klammern nicht angeben, was zu Syntaxfehlern führt.
Schauen wir uns das folgende Beispiel an.
if((x > y) && (y < 77) {
//more code here
}
Ja, die letzte Klammer der Bedingungsanweisung fehlt. Haben Sie den Fehler mit dem obigen Code bemerkt?
Korrigieren wir es.
if ((x > y) && (y < 77)) {
//more code here
}
Um solche Syntaxfehler zu vermeiden, sollten Sie sich Zeit nehmen, die grammatikalischen Regeln der Programmiersprache JavaScript zu lernen. Mit umfangreicher Programmierpraxis können Sie die grammatikalischen Fehler leicht erkennen und vermeiden, dass sie mit Ihrer entwickelten Anwendung ausgeliefert werden.
Unsachgemäße Verwendung von undefinierten/Null-Schlüsselwörtern
Einige JavaScript-Entwickler wissen nicht, wie sie die Schlüsselwörter undefined und null richtig verwenden. Tatsächlich berichtet die Studie, dass die unsachgemäße Verwendung der Schlüsselwörter 5 % aller JavaScript-Fehler ausmacht.
Das Schlüsselwort null ist ein Zuweisungswert, der normalerweise einer Variablen zugewiesen wird, um einen nicht vorhandenen Wert anzugeben. Überraschenderweise ist null auch ein JavaScript-Objekt.
Hier ist ein Beispiel:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is object
Andererseits zeigt undefiniert an, dass einer Variablen oder einer anderen Eigenschaft, die bereits deklariert wurde, kein zugewiesener Wert zugewiesen wurde. Es kann auch bedeuten, dass nichts deklariert wurde. undefined ist ein Typ von sich selbst.
Hier ist ein Beispiel:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
Wenn der Gleichheitsoperator und der Identitätsoperator verwendet werden, um die Schlüsselwörter null und undefined zu vergleichen, betrachtet letzterer sie interessanterweise nicht als gleich.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Daher kann Ihnen die Kenntnis der korrekten Verwendung der Schlüsselwörter null und undefined dabei helfen, Fehler in Ihren JavaScript-Programmen zu vermeiden.
Undefinierte Methoden
Eine weitere häufige Ursache für Fehler in JavaScript ist das Aufrufen einer Methode ohne vorherige Definition. Die UBC-Forscher fanden heraus, dass dieser Fehler zu 4 % aller JavaScript-Fehler führt.
Hier ist ein Beispiel:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Hier ist der Fehler, der in der Chrome-Entwicklerkonsole angezeigt wird:
Der obige Fehler tritt auf, weil die aufgerufene Funktion speakNow() nicht im JavaScript-Code definiert wurde.
Unsachgemäße Verwendung der return-Anweisung
In JavaScript wird die return-Anweisung verwendet, um die Ausführung einer Funktion zu stoppen, damit ihr Wert ausgegeben werden kann. Bei falscher Verwendung kann die return-Anweisung die optimale Performance von Anwendungen beeinträchtigen. Laut der Studie führt die falsche Verwendung der return-Anweisung zu 2 % aller Fehler in JavaScript-Anwendungen.
Beispielsweise machen einige JavaScript-Programmierer normalerweise den Fehler, die return-Anweisung falsch zu unterbrechen.
Sie können zwar eine JavaScript-Anweisung in zwei Zeilen aufteilen und dennoch die erforderliche Ausgabe erhalten, aber das Aufbrechen der return-Anweisung führt zu einer Katastrophe in Ihre Anwendung.
Hier ist ein Beispiel:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Wenn der obige Code ausgeführt wird, wird in der Chrome-Entwicklerkonsole ein undefinierter Fehler angezeigt:
Daher sollten Sie davon absehen, return-Anweisungen in Ihrem JavaScript-Code zu unterbrechen.
Fazit
Die clientseitige JavaScript-Programmiersprache verfügt über hervorragende, umfangreiche Funktionen, um die Funktionalitäten moderner Webanwendungen zu unterstützen. Wenn Sie jedoch die Macken nicht verstehen, die die Sprache zum Funktionieren bringen, kann die Leistung Ihrer Anwendungen lahmgelegt werden.
Außerdem, JavaScript-Entwickler benötigen vielseitige Tools, um die Leistung ihrer Anwendungen zu beheben und Bugs und Fehler schnell zu erkennen.
Daher können Sie mit einer umfassenden Suite von Testtools zuverlässig die Anomalien identifizieren, die die Leistung Ihrer Website beeinträchtigen. Es ist das, was Sie brauchen, um die Leistung Ihrer Website zu verbessern und eine optimale Benutzererfahrung zu erzielen.
Viel Spaß bei der fehlerfreien JavaScript-Programmierung!
Artikel geschrieben von Alfrick Opidi