A JavaScript (JS) egy mindenütt elterjedt, rugalmas és széles körben népszerű programozási nyelv – bár hajlamos a hibákra és hibákra, amelyek miatt a legtöbb fejlesztő összeráncolja a homlokát és megőrül.
A JS-t széles körben használják a felhasználói interaktivitás biztosítására a legtöbb webalkalmazás kliens oldalán. JavaScript nélkül talán élettelenek és nem ingerelnek a dolgok az interneten. Mindazonáltal a nyelv hullámzása időnként arra készteti a fejlesztőket, hogy szeretet-gyűlölet kapcsolatot ápoljanak vele.
A JavaScript hibák miatt az alkalmazások váratlan eredményeket produkálnak, és rontják a felhasználói élményt. A University of British Columbia (UBC) tanulmánya a JavaScript-hibák és hibák kiváltó okait és hatásait kívánta feltárni. A tanulmány eredményei feltártak néhány gyakori mintát, amelyek rontják a JS programok teljesítményét.
Íme egy kördiagram, amely megmutatja, mit találtak a kutatók:
Ebben a blogbejegyzésben bemutatjuk a tanulmányban kiemelt JavaScript-hibák néhány gyakori okát (valamint azokat, amelyekkel naponta találkozunk), és bemutatjuk, hogyan teheti alkalmazásait kevésbé hajlamossá a hibákra.
Tartalomjegyzék
DOM-mal kapcsolatos
A Document Object Model (DOM) létfontosságú szerepet játszik a webhelyek interaktivitásában. A DOM felület lehetővé teszi a weboldal tartalmának, stílusának és szerkezetének módosítását. Az egyszerű HTML weboldalak interaktívvá tétele – vagy a DOM manipulálása – éppen az oka annak, hogy a JavaScript programozási nyelv megjelent.
Tehát még a háttérben futó JavaScript-technológiák, például a Node.js bevezetése után is, a DOM-mal való munka továbbra is nagy részét képezi a nyelv működésének. Ezért a DOM jelentős lehetőség a hibák és hibák bevezetésére a JavaScript alkalmazásokban.
Nem meglepő, hogy a JavaScript hibajelentés-tanulmány kimutatta, hogy a legtöbb hibát a DOM-mal kapcsolatos problémák okozzák, 68%-ban.
Például egyes JavaScript-programozók gyakran elkövetik azt a hibát, hogy egy DOM-elemre hivatkoznak a betöltődés előtt, ami kódhibákhoz vezet.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>
Ha a fenti kód a Chrome böngészőben fut, akkor hibaüzenetet fog kiadni, ami a fejlesztői konzolon látható:
A hiba azért jelenik meg, mert a JavaScript kód általában a dokumentumon megjelenő sorrend szerint fut le. Mint ilyen, a böngésző nem ismeri a hivatkozott
Egy ilyen probléma megoldásához különféle módszereket alkalmazhat. A legegyszerűbb módszer az, ha a
elemet a szkriptcímke eleje elé helyezzük. Használhat JavaScript-könyvtárat is, például a jQuery-t, hogy megbizonyosodjon arról, hogy a DOM betöltődik-e, mielőtt hozzáférhetne.
<!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>
Szintaxis alapú
Szintaktikai hibák lépnek fel, ha a JavaScript értelmező nem hajt végre szintaktikailag helytelen kódot. Ha létrehoz egy alkalmazást, és az értelmező olyan tokeneket észlel, amelyek nem egyeznek a JavaScript programozási nyelv szabványos szintaxisával, akkor hibát fog kiadni. A JavaScript hibajelentés tanulmánya szerint ezek a hibák felelősek a nyelvben előforduló összes hiba 12%-áért.
A nyelvtani hibák, például a hiányzó zárójelek vagy a páratlan zárójelek a JavaScript szintaktikai hibáinak fő okai.
Ha például feltételes utasításokat kell használnia több feltétel kezelésére, előfordulhat, hogy elmulasztja a szükséges zárójelek megadását, ami szintaktikai hibákhoz vezethet.
Nézzük a következő példát.
if((x > y) && (y < 77) {
//more code here
}
Igen, a feltételes utasítás utolsó zárójele hiányzik. Észrevetted a hibát a fenti kóddal?
Javítsuk ki.
if ((x > y) && (y < 77)) {
//more code here
}
Az ilyen szintaktikai hibák elkerülése érdekében szánjon időt a JavaScript programozási nyelv nyelvtani szabályainak megtanulására. Kiterjedt kódolási gyakorlattal könnyen észreveheti a nyelvtani hibákat, és elkerülheti, hogy a kifejlesztett alkalmazással szállítsa azokat.
Nem definiált/null kulcsszavak helytelen használata
Egyes JavaScript-fejlesztők nem tudják, hogyan kell helyesen használni az undefined és a null kulcsszavakat. Valójában a tanulmány arról számolt be, hogy a kulcsszavak nem megfelelő használata az összes JavaScript-hiba 5%-áért felelős.
A null kulcsszó egy hozzárendelési érték, amelyet általában egy nem létező érték jelölésére rendelnek hozzá. Meglepő módon a null is JavaScript objektum.
Íme egy példa:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is object
Másrészt az undefined azt jelzi, hogy a már deklarált változóhoz vagy bármely más tulajdonsághoz nincs hozzárendelt érték. Ez arra is utalhat, hogy semmit sem jelentettek be. Az undefined önmagának egy típusa.
Íme egy példa:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
Érdekes módon, ha az egyenlőség operátor és az identitás operátor hozzászokott a null és a definiálatlan kulcsszavak összehasonlításához, az utóbbi nem tekinti őket egyenlőnek.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Ezért a null és undefined kulcsszavak helyes használatának ismerete segíthet elkerülni a hibákat a JavaScript programjaiban.
Nem definiált módszerek
A JavaScript hibáinak másik gyakori oka az, hogy egy metódus hívása anélkül, hogy megadná annak előzetes definícióját. Az UBC kutatói rájöttek, hogy ez a hiba az összes JavaScript-hiba 4%-ához vezet.
Íme egy példa:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
A hiba itt látható a Chrome fejlesztői konzolon:
A fenti hiba azért fordul elő, mert a hívott speakNow() függvény nincs definiálva a JavaScript kódban.
A return utasítás helytelen használata
A JavaScriptben a return utasítás egy függvény futásának leállítására szolgál, hogy az értéke kiadható legyen. Ha hibásan használja, a return utasítás ronthatja az alkalmazások optimális teljesítményét. A tanulmány szerint a return utasítás helytelen használata a JavaScript-alkalmazások összes hibájának 2%-át okozza.
Például egyes JavaScript-programozók általában elkövetik azt a hibát, hogy helytelenül törik meg a return utasítást.
Bár egy JavaScript utasítást két sorban megtörhet, és továbbra is megkaphatja a szükséges kimenetet, a return utasítás feltörése katasztrófát idéz elő az alkalmazásban.
Íme egy példa:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
A fenti kód futtatásakor egy meghatározatlan hiba jelenik meg a Chrome fejlesztői konzolon:
Ezért tartózkodnia kell a return utasítások feltörésétől a JavaScript-kódban.
Következtetés
Az ügyféloldali JavaScript programozási nyelv kiváló, kiterjedt képességekkel rendelkezik a modern webalkalmazások funkcióinak működtetéséhez. Ha azonban nem érti azokat a furcsaságokat, amelyek miatt a nyelv működik, az alkalmazásai teljesítménye megbénulhat.
Továbbá, JavaScript fejlesztők sokoldalú eszközöket igényelnek alkalmazásaik teljesítményének hibaelhárításához, valamint a hibák és hibák gyors észleléséhez.
Ezért a tesztelőeszközök átfogó készletével magabiztosan azonosíthatja azokat az anomáliákat, amelyek rontják webhelye teljesítményét. Ez az, amire szüksége van webhelye teljesítményének javításához és az optimális felhasználói élmény eléréséhez.
Jó hibamentes JavaScript programozást!
A cikket Alfrick Opidi írta