5 Bežné príčiny chýb JavaScriptu (a ako sa im vyhnúť)

JavaScript (JS) je všadeprítomný, flexibilný a široko populárny programovací jazyk – je však náchylný k chybám a chybám, ktoré spôsobujú, že väčšina vývojárov sa mračí a zblázňuje..


JS sa vo veľkej miere používa na zvýšenie interaktivity používateľov na strane klienta vo väčšine webových aplikácií. Bez JavaScriptu môžu byť veci na webe bez života a nestimulujúce. Avšak prílivy a prúdy jazyka niekedy spôsobujú, že vývojári majú s ním láskavo-nenávistný vzťah.

Chyby JavaScriptu spôsobujú, že aplikácie prinášajú neočakávané výsledky a poškodzujú dojem používateľa. Posledný študovať University of British Columbia (UBC) sa snažila zistiť základné príčiny a dopad chýb a chýb JavaScript. Výsledky štúdie odhalili niektoré bežné vzorce, ktoré zhoršujú výkonnosť programov JS.

Tu je koláčový graf, ktorý ukazuje, čo vedci zistili:

V tomto príspevku na blogu si ukážeme niektoré z bežných príčin porúch JavaScriptu zvýraznených v štúdii (plus ďalšie, s ktorými sa stretávame každý deň) a ako znižovať náchylnosť vašich aplikácií k chybám..

DOM-súvisiacich

DOM Object Object Model (DOM) hrá zásadnú úlohu v interaktivite webových stránok. Rozhranie DOM umožňuje manipuláciu s obsahom, štýlom a štruktúrou webovej stránky. Interaktivita obyčajných webových stránok vo formáte HTML alebo manipulácia s doménou DOM je jediným dôvodom, prečo bol uvoľnený programovací jazyk JavaScript.

Takže aj so zavedením technológií backend JavaScript, ako je Node.js, práca s DOM stále predstavuje veľký kus toho, čo jazyk robí. Preto je DOM významnou cestou na zavádzanie chýb a chýb v aplikáciách JavaScript.

Nie je prekvapením, že štúdia o chybe JavaScriptu zistila, že za problémy, ktoré súvisia s DOM, sú zodpovedné za 68% problémov.

Napríklad niektorí programátori JavaScript zvyčajne robia chybu, keď odkazujú na prvok DOM pred jeho načítaním, čo vedie k chybám kódu.

document.getElementById ("kontajner") .innerHTML = "Bežné chyby a chyby JS";

Ak je vyššie uvedený kód spustený v prehliadači Chrome, vyvolá chybu, ktorú možno vidieť na konzole pre vývojárov:

Chyba sa vyvolá, pretože kód JavaScript sa zvyčajne spustí podľa poradia, ktoré sa nachádza v dokumente. Preto prehliadač pri spustení kódu nevie o referenčnom prvku.

Na vyriešenie tohto problému môžete využiť rôzne prístupy. Najjednoduchšou metódou je umiestniť pred začiatok značky skriptu. Môžete tiež použiť knižnicu JavaScriptu, ako je jQuery, aby ste sa uistili, že DOM je načítaný ako prvý skôr, ako bude prístupný.

document.getElementById ("kontajner") .innerHTML = "Bežné chyby a chyby JS";

Syntax-based

K chybám syntaxe dochádza, keď interpret jazyka JavaScript nedokáže vykonať syntakticky nesprávny kód. Ak vytvoríte aplikáciu a interpret zistí tokeny, ktoré sa nezhodujú so štandardnou syntaxou programovacieho jazyka JavaScript, vyvolá chybu. Podľa štúdie o hlásení chýb JavaScriptu sú takéto chyby zodpovedné za 12% všetkých chýb v jazyku.

Gramatické chyby, ako napríklad chýbajúce zátvorky alebo neprepojené zátvorky, sú hlavnými príčinami syntaktických chýb v skripte JavaScript..

Napríklad, keď musíte použiť podmienené príkazy na riešenie viacerých podmienok, môžete vynechať zadanie zátvoriek podľa potreby, čo vedie k chybám syntaxe..

Pozrime sa na nasledujúci príklad.

if (x ( > y) && (y < 77) {
// viac kódu tu
}

Áno, posledná zátvorka podmieneného príkazu chýba. Všimli ste si chybu s vyššie uvedeným kódom??

Opravme to.

ak (x > y) && (y < 77)) {
// viac kódu tu
}

Aby ste sa vyhli takým chybám syntaxe, mali by ste tráviť čas učením gramatických pravidiel programovacieho jazyka JavaScript. Vďaka rozsiahlym praktikám kódovania si môžete gramatické chyby ľahko všimnúť a vyhnúť sa ich dodaniu s vyvinutou aplikáciou.

Nesprávne použitie nedefinovaných / nulových kľúčových slov

Niektorí vývojári jazyka JavaScript nevedia, ako používať nedefinovaný a nulový správne kľúčové slová. Štúdia v skutočnosti uviedla, že nesprávne použitie kľúčových slov predstavuje 5% všetkých chýb JavaScriptu.

nulový Kľúčové slovo je hodnota priradenia, ktorá je zvyčajne priradená premennej na označenie neexistujúcej hodnoty. prekvapivo, nulový je tiež objektom JavaScript.

Tu je príklad:

var codeJS = null;

console.log (codeJS);
// výstup je null

console.log (typeof codeJS);
// výstup je objekt

Na druhej strane, nedefinovaný označuje, že premennej alebo akejkoľvek inej vlastnosti, ktorá už bola deklarovaná, chýba priradená hodnota. Môže tiež naznačovať, že nič nebolo vyhlásené. nedefinovaný je sám osebe.

Tu je príklad:

var codeJS;

console.log (codeJS);
// výstup nie je definovaný

console.log (typeof codeJS);
// výstup nie je definovaný

Zaujímavé je, že ak sa operátor na porovnávanie a operátor totožnosti použijú na porovnanie nulový a nedefinovaný kľúčové slová, druhé ich nepovažuje za rovnocenné.

console.log (null == nedefinované);
// výstup je pravdivý

console.log (null === nedefinované);
// výstup je nepravdivý

Znalosť správneho používania systému nulový a nedefinovaný Kľúčové slová vám môžu pomôcť vyhnúť sa zavádzaniu chýb v programoch JavaScript.

Nedefinované metódy

Ďalšou častou príčinou chýb v JavaScripte je volanie na metódu bez poskytnutia jej predchádzajúcej definície. Vedci UBC zistili, že táto chyba vedie k 4% všetkých chýb jazyka JavaScript.

Tu je príklad:

var coder = {
názov: "Peter",
vek: 27 rokov,
hovoriť () {
console.log (this.name);
}
};
coder.speakNow ();

Táto chyba sa zobrazuje na vývojovej konzole prehliadača Chrome:

Vyššie uvedená chyba sa vyskytuje, pretože volaná funkcia, talkNow (), nebola v kóde JavaScript definovaná.

Nesprávne použitie príkazu na vrátenie

V JavaScripte spiatočný príkaz sa používa na zastavenie chodu funkcie tak, aby mohla byť na výstupe jej hodnota. Pri nesprávnom použití môže návratové vyhlásenie zhoršiť optimálny výkon aplikácií. Podľa štúdie vedie nesprávne použitie návratového príkazu k 2% všetkých chýb v aplikáciách JavaScript.

Napríklad niektorí programátori JavaScriptu zvyčajne robia chybu v tom, že nesprávne vrátia príkaz na vrátenie.

Aj keď môžete rozložiť príkaz JavaScript na dva riadky a stále získať požadovaný výstup, rozbitie príkazu na návrat predstavuje katastrofu pre vašu aplikáciu..

Tu je príklad:

číslo funkcie (n) {
var add = 5;
return;
n + pridať;
}
console.log (počet (10));

Po spustení vyššie uvedeného kódu sa na vývojovej konzole prehliadača Chrome zobrazí nedefinovaná chyba:

Preto by ste sa mali vyhnúť porušovaniu spiatočný príkazy vo vašom kóde JavaScript.

záver

Programovací jazyk JavaScriptu na strane klienta má vynikajúce rozsiahle možnosti na podporu funkcií moderných webových aplikácií. Ak však nerozumiete vtipom, ktoré spôsobujú, že jazyk funguje, výkon vašich aplikácií môže byť ochromený.

okrem toho, Vývojári JavaScriptu vyžadujú všestranné nástroje na riešenie problémov s výkonom svojich aplikácií a na rýchle zisťovanie chýb a chýb.

Preto pomocou komplexnej sady testovacích nástrojov môžete s istotou určiť nezrovnalosti, ktoré zhoršujú výkon vašich webových stránok. To je to, čo potrebujete, aby ste zlepšili výkon svojich stránok a dosiahli optimálny dojem používateľa.

Šťastné bezchybné programovanie JavaScriptu!

Článok napísal 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