JavaScript (JS) je všudypřítomný, flexibilní a široce oblíbený programovací jazyk – i když je také náchylný k chybám a chybám, kvůli kterým se většina vývojářů mračí a šílí.
JS se široce používá k podpoře uživatelské interaktivity na straně klienta většiny webových aplikací. Bez JavaScriptu by možná věci na webu mohly být nezáživné a nestimulující. Nicméně odlivy a přílivy jazyka někdy nutí vývojáře k tomu, aby k němu měli vztah lásky a nenávisti.
Chyby JavaScriptu způsobují, že aplikace produkují neočekávané výsledky a poškozují uživatelskou zkušenost. Studie University of British Columbia (UBC) se snažila zjistit základní příčiny a dopad chyb a chyb v JavaScriptu. Výsledky studie odhalily některé běžné vzorce, které zhoršují výkon programů JS.
Zde je koláčový graf ukazující, co vědci zjistili:
V tomto příspěvku na blogu si ukážeme některé běžné příčiny chyb JavaScriptu zdůrazněné ve studii (a další, s nimiž se setkáváme denně) a jak zajistit, aby vaše aplikace byly méně náchylné k selhání.
Table of Contents
související s DOM
Objektový model dokumentu (DOM) hraje zásadní roli v interaktivitě webových stránek. Rozhraní DOM umožňuje manipulaci s obsahem, stylem a strukturou webové stránky. Vytvoření interaktivních webových stránek v prostém HTML – nebo manipulace s DOM – je hlavním důvodem, proč byl vydán programovací jazyk JavaScript.
Takže i po zavedení backendových JavaScript technologií, jako je Node.js, práce s DOM stále tvoří velkou část toho, co jazyk dělá. Proto je DOM významnou cestou pro zavádění chyb a chyb v aplikacích JavaScript.
Není překvapením, že studie hlášení chyb v JavaScriptu zjistila, že za většinu nedostatků jsou zodpovědné problémy související s DOM, a to 68 %.
Někteří programátoři JavaScriptu například běžně dělají tu chybu, že odkazují na prvek DOM před jeho načtením, což vede k chybám v kódu.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>
Pokud je výše uvedený kód spuštěn v prohlížeči Chrome, vyvolá chybu, kterou lze vidět ve vývojářské konzoli:
Chyba je vyvolána, protože kód JavaScript se obvykle spouští v pořadí, v jakém se objevuje v dokumentu. Proto prohlížeč při spuštění kódu nezná odkazovaný prvek
K vyřešení takového problému můžete použít různé přístupy. Nejjednodušší metodou je umístit
před začátek značky skriptu. Můžete také použít knihovnu JavaScriptu, jako je jQuery, abyste se ujistili, že se DOM nejprve načte, než k němu bude možné přistupovat.
<!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>
Na základě syntaxe
K chybám syntaxe dochází, když interpret JavaScriptu nedokáže spustit syntakticky nesprávný kód. Pokud při vytváření aplikace a interpret zaznamená tokeny, které se neshodují se standardní syntaxí programovacího jazyka JavaScript, vyvolá chybu. Podle studie JavaScript bug report jsou takové chyby zodpovědné za 12 % všech chyb v jazyce.
Gramatické chyby, jako jsou chybějící závorky nebo neodpovídající závorky, jsou hlavními příčinami syntaktických chyb v JavaScriptu.
Když například musíte použít podmíněné příkazy k řešení více podmínek, může se stát, že zapomenete poskytnout požadované závorky, což vede k syntaktickým chybám.
Podívejme se na následující příklad.
if((x > y) && (y < 77) {
//more code here
}
Ano, chybí poslední závorka podmíněného příkazu. Všimli jste si chyby ve výše uvedeném kódu?
Pojďme to opravit.
if ((x > y) && (y < 77)) {
//more code here
}
Abyste se vyhnuli takovým syntaktickým chybám, měli byste věnovat čas učení gramatických pravidel programovacího jazyka JavaScript. Díky rozsáhlé praxi kódování můžete snadno rozpoznat gramatické chyby a vyhnout se jejich zasílání s vaší vyvinutou aplikací.
Nesprávné použití nedefinovaných/nulových klíčových slov
Někteří vývojáři JavaScriptu nevědí, jak správně používat nedefinovaná a nulová klíčová slova. Ve skutečnosti studie uvedla, že nesprávné použití klíčových slov tvoří 5 % všech chyb JavaScriptu.
Klíčové slovo null je hodnota přiřazení, která je obvykle přiřazena k proměnné pro označení neexistující hodnoty. Překvapivě je null také objekt JavaScriptu.
Zde je příklad:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is object
Na druhou stranu, nedefinováno znamená, že proměnná nebo jakákoli jiná vlastnost, která již byla deklarována, postrádá přiřazenou hodnotu. Může to také znamenat, že nebylo nic deklarováno. undefined je typem sebe sama.
Zde je příklad:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
Je zajímavé, že pokud jsou operátor rovnosti a operátor identity zvyklí porovnávat nulová a nedefinovaná klíčová slova, druhý je nepovažuje za rovnocenné.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Znalost správného použití klíčových slov null a undefined vám proto může pomoci vyhnout se zavádění chyb do vašich programů JavaScript.
Nedefinované metody
Další běžnou příčinou chyb v JavaScriptu je volání metody bez poskytnutí její předchozí definice. Výzkumníci UBC zjistili, že tato chyba vede ke 4 % všech chyb JavaScriptu.
Zde je příklad:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Zde je chyba, která se zobrazuje na vývojářské konzoli Chrome:
K výše uvedené chybě dochází, protože volaná funkce speakNow() nebyla definována v kódu JavaScript.
Nesprávné použití příkazu return
V JavaScriptu se příkaz return používá k zastavení běhu funkce, aby bylo možné vypsat její hodnotu. Při nesprávném použití může příkaz return narušit optimální výkon aplikací. Podle studie vede nesprávné použití příkazu return ke 2 % všech chyb v aplikacích JavaScript.
Někteří programátoři JavaScriptu například obvykle dělají tu chybu, že nesprávně poruší příkaz return.
Zatímco příkaz JavaScript můžete rozdělit na dva řádky a přesto získat požadovaný výstup, porušení příkazu return přivolá do vaší aplikace katastrofu.
Zde je příklad:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Po spuštění výše uvedeného kódu se ve vývojářské konzoli Chrome zobrazí nedefinovaná chyba:
Proto byste měli upustit od porušování příkazů return v kódu JavaScript.
Závěr
Programovací jazyk JavaScript na straně klienta přichází s vynikajícími rozsáhlými možnostmi pro podporu funkcí moderních webových aplikací. Pokud však nerozumíte zvláštnostem, díky kterým jazyk funguje, může být výkon vašich aplikací ochromován.
dále Vývojáři JavaScriptu vyžadují všestranné nástroje pro odstraňování problémů s výkonem jejich aplikací a rychlé odhalování chyb a chyb.
Díky komplexní sadě testovacích nástrojů tedy můžete s jistotou identifikovat anomálie, které zhoršují výkon vašeho webu. Je to to, co potřebujete ke zlepšení výkonu svého webu a dosažení optimální uživatelské zkušenosti.
Šťastné programování JavaScriptu bez chyb!
Článek napsal Alfrick Opidi