A JavaScript hibák 5 leggyakoribb oka (és hogyan lehet őket elkerülni)

A JavaScript (JS) mindenütt jelen lévő, rugalmas és széles körben népszerű programozási nyelv – bár hajlamos a hibákra és a hibákra is, amelyek miatt a legtöbb fejlesztő összehúzza a szemöldökét és őrült.


A JS-t széles körben használják a felhasználói interaktivitás fokozására a legtöbb webalkalmazás kliens oldalán. A JavaScript nélkül esetleg az internetes dolgok élettelenek és ösztönzőtlenek lehetnek. Mindazonáltal a nyelv ebb-je és áramlása néha arra készteti a fejlesztőket, hogy szerelmi-gyűlölet-kapcsolattal álljanak össze vele.

A JavaScript hibák miatt az alkalmazások váratlan eredményeket hoznak, és károsíthatják a felhasználói élményt. Nemrégiben tanulmány a British Columbia Egyetem (UBC) arra törekedett, hogy megtudja a JavaScript hibák és hibák alapvető okait és hatását. A tanulmány eredményei felfedtek néhány általános mintát, amelyek rontják a JS programok teljesítményét.

Itt található egy kördiagram, amely megmutatja, mit találtak a kutatók:

Ebben a blogbejegyzésben bemutatjuk a JavaScript hibáinak a tanulmányban kiemelt leggyakoribb okait (plusz mások, amelyekkel naponta találkozunk), valamint azt, hogy miként lehetne alkalmazásait kevésbé hajlamosítani a kudarcokra..

DOM kapcsolatos

A Document Object Model (DOM) alapvető szerepet játszik a weboldalak interaktivitásában. A DOM felület lehetővé teszi a weboldal tartalmának, stílusának és szerkezetének manipulálását. A sima HTML weboldalak interaktívvá tétele vagy a DOM manipulálása az oka annak, hogy a JavaScript programozási nyelvét kiadták.

Tehát, még a backend JavaScript technológiák bevezetésekor, mint például a Node.js, a DOM-nal való együttműködés továbbra is nagy részét képezi annak, amit a nyelv tesz. Ezért a DOM jelentős előnyt jelent a hibák és hibák bevezetésében a JavaScript alkalmazásokban.

Nem meglepő, hogy a JavaScript hibajelentés tanulmánya rájött, hogy a DOM-hoz kapcsolódó kérdések a legtöbb hibát okozzák, 68% -kal..

Például egyes JavaScript programozók általában hibát követnek el, amikor a DOM elemre hivatkoznak annak betöltése előtt, ami kódhibákat eredményez.

document.getElementById ("tartály") .innerHTML = "Általános JS hibák és hibák";

Ha a fenti kódot a Chrome böngészőn futtatja, akkor hibát okoz, amely a fejlesztői konzolon látható:

A hibát eldobják, mert a JavaScript kódot általában a dokumentumon megjelenő sorrend szerint hajtják végre. Mint ilyen, a böngésző nem ismeri a hivatkozott elemet, amikor a kód fut.

Egy ilyen probléma megoldásához különféle megközelítéseket használhat. A legegyszerűbb módszer, ha a szkriptcímke eleje elé helyezi a helyét. Használhat egy JavaScript könyvtárat, például a jQuery-t, hogy megbizonyosodjon arról, hogy a DOM először betöltődik-e, mielőtt hozzáférhetne.

document.getElementById ("tartály") .innerHTML = "Általános JS hibák és hibák";

Syntax-alapú

A szintaxis hibák akkor fordulnak elő, amikor a JavaScript értelmező nem hajtja végre szintaktikailag hibás kódot. Ha egy alkalmazás létrehozásakor a tolmács olyan tokeneket észlel, amelyek nem egyeznek meg a JavaScript programozási nyelv szintaxisával, akkor hiba lép fel. A JavaScript hibajelentési tanulmány szerint az ilyen hibák a nyelv összes hibájának 12% -áért felelősek.

A grammatikai hibák, például a hiányzó zárójelek vagy a páratlan zárójelek a JavaScript szintaxis hibáinak fő okai.

Például, ha több feltétel kezelésére feltételes utasításokat kell használnia, akkor hiányozhat a zárójel megadása, ami szintaxis hibákat eredményezhet.

Nézzük meg a következő példát.

if ((x > y) && (y < 77) {
// további kód itt
}

Igen, a feltételes állítás utolsó zárójele hiányzik. Észrevette a fenti kód hibáját?

Javítsuk ki.

if ((x > y) && (y < 77)) {
// további kód itt
}

Az ilyen szintaxis hibák elkerülése érdekében időt kell fordítania a JavaScript programozási nyelv nyelvtani szabályainak megtanulására. Az átfogó kódolási gyakorlat segítségével könnyedén észlelheti a nyelvtani hibákat, és elkerülheti a továbbfejlesztett alkalmazáshoz való továbbítását.

A nem definiált / null kulcsszavak nem megfelelő használata

Egyes JavaScript fejlesztők nem tudják, hogyan kell használni a meghatározatlan és nulla kulcsszavak helyesen. Valójában a tanulmány arról számolt be, hogy a kulcsszavak nem megfelelő használata az összes JavaScript-hiba 5% -át teszi ki.

Az nulla a kulcsszó egy hozzárendelési érték, amelyet általában egy változóhoz rendelnek, hogy egy nem létező értéket jelöljenek. Meglepően, nulla egy JavaScript objektum is.

Íme egy példa:

var codeJS = null;

console.log (codeJS);
// a output null

console.log (typeof codeJS);
// a output objektum

Másrészről, meghatározatlan azt jelzi, hogy egy változónak vagy bármely más tulajdonságnak, amelyet már deklaráltunk, nincs hozzárendelt értéke. Ez azt is jelenti, hogy semmit nem jelentettek be. meghatározatlan önmagában egyfajta.

Íme egy példa:

var codeJS;

console.log (codeJS);
// a kimenet nincs meghatározva

console.log (typeof codeJS);
// a kimenet nincs meghatározva

Érdekes, hogy ha az egyenlőség operátora és az identitás kezelője hozzászokik a nulla és meghatározatlan kulcsszavakkal, az utóbbi nem tekinti őket egyenlőnek.

console.log (null == meghatározatlan);
// a output igaz

console.log (null === meghatározatlan);
// kimenet hamis

Ezért a nulla és meghatározatlan a kulcsszavak segíthetnek abban, hogy elkerüljék a hibák bevezetését a JavaScript programjaiban.

Meghatározatlan módszerek

A Java hibáinak egyik leggyakoribb oka a módszer meghívása, annak előzetes meghatározása nélkül. Az UBC kutatói rájöttek, hogy ez a hiba az összes JavaScript hiba 4% -ához vezet.

Íme egy példa:

var coder = {
név: "Péter",
életkor: 27 év,
beszélni () {
console.log (this.name);
}
};
coder.speakNow ();

Itt van a hiba a Chrome fejlesztői konzolján:

A fenti hiba azért fordul elő, mert a nnNNN () nevű függvényt a JavaScripti kód nem határozta meg.

A visszatérési nyilatkozat nem megfelelő használata

A JavaScript-ben a Visszatérés Az utasítás egy függvény futtatásának leállítására szolgál, annak értékének kiszámításához. Hibás felhasználás esetén a visszatérési nyilatkozat ronthatja az alkalmazások optimális teljesítményét. A tanulmány szerint a visszatérési nyilatkozat helytelen használata a JavaScript-alkalmazások összes hibájának 2% -ához vezet.

Például néhány JavaScript programozó általában hibát követ el, ha tévesen törli a visszatérési nyilatkozatot.

Miközben két sort törhet egy JavaScript-nyilatkozatból, és továbbra is megkapja a szükséges kimenetet, a visszatérési nyilatkozat megtörése katasztrófát idéz elő az alkalmazásban.

Íme egy példa:

funkciószám (n) {
var add = 5;
Visszatérés;
n + add;
}
console.log (szám (10));

A fenti kód futtatásakor egy meghatározatlan hiba látható a Chrome fejlesztői konzolon:

Ezért tartózkodnia kell a töréstől Visszatérés kijelentések a JavaScript kódban.

Következtetés

Az ügyféloldali JavaScript programozási nyelv kiválóan széles lehetőségeket kínál a modern webes alkalmazások funkcióinak táplálására. Ha azonban nem érti a nyelvet működő quirkokat, akkor az alkalmazások teljesítménye romlik.

Továbbá, JavaScript fejlesztők sokoldalú eszközökre van szükség az alkalmazások teljesítményének hibaelhárításához, valamint a hibák és a hibák gyors felismeréséhez.

Ezért a tesztelési eszközök átfogó csomagjával biztonságosan azonosíthatja azokat a rendellenességeket, amelyek rontják webhelye teljesítményét. Ez az, amire szükség van webhelyének teljesítményének javításához és az optimális felhasználói élmény eléréséhez.

Boldog, hibamentes JavaScript programozás!

Cikk írta Alfrick Opidi

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map