5 najčešćih uzroka pogrešaka JavaScripta (i kako ih izbjeći)

JavaScript (JS) je sveprisutan, fleksibilan i široko popularan programski jezik – iako je također sklon greškama i pogreškama zbog kojih se većina programera mršti i nakaza.


JS se uveliko koristi za napajanje interaktivnosti korisnika na strani klijenta u većini web aplikacija. Bez JavaScript-a, možda bi stvari na webu mogle biti beživotne i nestimulirajuće. Bez obzira na to, jezične razlike i protoci ponekad čine programere da imaju vezu s ljubavlju i mržnjom.

Kvarovi JavaScripta uzrokuju da aplikacije proizvode neočekivane rezultate i štete korisničkom iskustvu. Nedavno studija Sveučilište British Columbia (UBC) pokušalo je otkriti uzroke i utjecaj JavaScript pogrešaka i grešaka. Rezultati studije otkrili su neke uobičajene obrasce koji narušavaju rad programa JS.

Evo grafikona sa kartonom koji pokazuje što su otkrili istraživači:

U ovom postu na blogu prikazat ćemo neke od najčešćih uzroka grešaka u JavaScript-u istaknutih u studiji (plus druge s kojima se svakodnevno susrećemo) i kako vaše aplikacije učiniti manje sklonima kvarovima..

DOM se odnose na

Model predmeta dokumenta (DOM) igra vitalnu ulogu u interaktivnosti web stranica. DOM sučelje omogućuje manipuliranje sadržajem, stilom i strukturom web stranice. Postavljanje običnih HTML web stranica interaktivnim – ili manipuliranje DOM-om – razlog je zašto je objavljen programski jezik JavaScript.

Dakle, čak i uz uvođenje sigurnosnih JavaScript tehnologija poput Node.js, rad s DOM-om još uvijek čini velik dio onoga što jezik čini. Stoga je DOM značajan put za uvođenje grešaka i pogrešaka u JavaScript aplikacije.

Nije iznenađenje što je studija izvještaja o programskim pogreškama JavaScripta utvrdila da su problemi vezani uz DOM odgovorni za većinu propusta, i to 68%.

Na primjer, neki JavaScript programeri obično čine pogrešku u navođenju DOM elementa prije učitavanja, što dovodi do pogreške u kodu.

document.getElementById ("kontejner") .innerHTML = "Česti pogreške i pogreške JS-a";

Ako se gornji kôd pokrene u pregledniku Chrome, bit će prikazana pogreška koja se može vidjeti na konzoli za razvojne programere:

Pogreška se baca jer se JavaScript kod obično izvršava prema redoslijedu koji se pojavljuje u dokumentu. Kao takav, preglednik nije svjestan referenciranog elementa kada se kôd pokreće.

Da biste riješili takav problem, možete koristiti razne pristupe. Najjednostavnija metoda je postavljanje oznake skripta prije početka. Možete koristiti i JavaScript biblioteku poput jQuery da biste bili sigurni da se DOM prvo učitava prije nego što joj se može pristupiti..

document.getElementById ("kontejner") .innerHTML = "Česti pogreške i pogreške JS-a";

Sintaksa bazi

Greške u sintaksi događaju se kad JavaScript interpreter ne izvrši sintaktički netočan kôd. Ako kreira aplikaciju i interpreter opazi tokene koji se ne podudaraju sa standardnom sintaksom programskog jezika JavaScript, to će dovesti do pogreške. Prema studiji izvještaja o programskim pogreškama, za takve pogreške odgovorno je 12% svih pogrešaka na jeziku.

Gramatičke pogreške, kao što su nedostajuće zagrade ili neusklađeni zagrade, glavni su uzroci sintaksičkih pogrešaka u JavaScript.

Na primjer, kada za korištenje više uvjeta morate upotrebljavati uvjetne izjave, možda ćete propustiti pružanje zagrade u skladu s potrebama, što dovodi do nedostataka sintakse.

Pogledajmo sljedeći primjer.

ako ((X > y) && (y < 77) {
// više kod ovdje
}

Da, nedostaje posljednji zagrade uvjetne izjave. Jeste li primijetili grešku s gornjim kodom?

Ispravimo to.

ako ((x > y) && (y < 77)) {
// više kod ovdje
}

Da biste izbjegli takve sintakse, trebali biste potrošiti vrijeme na učenje gramatičkih pravila programskog jezika JavaScript. Uz široku praksu kodiranja, lako možete uočiti gramatičke pogreške i izbjeći ih isporučiti s razvijenom aplikacijom.

Nepravilna upotreba nedefiniranih / null ključnih riječi

Neki JavaScript programeri ne znaju kako ih koristiti nedefiniran i nula ispravno ključne riječi. Ustvari, studija je izvijestila da nepravilno korištenje ključnih riječi predstavlja 5% svih JavaScript pogrešaka.

nula ključna riječ je vrijednost dodjeljivanja, koja se obično dodjeljuje varijabli da označi nepostojeću vrijednost. Iznenađujuče, nula je i JavaScript objekt.

Evo primjera:

var codeJS = null;

console.log (codeJS);
// izlaz je nula

console.log (typeof codeJS);
// izlaz je objekt

S druge strane, nedefiniran označava da varijabli ili bilo kojem drugom svojstvu koje je već deklarirano nedostaje dodijeljena vrijednost. To također može značiti da ništa nije deklarirano. nedefiniran je vrsta sebe.

Evo primjera:

var codeJS;

console.log (codeJS);
// izlaz je nedefiniran

console.log (typeof codeJS);
// izlaz je nedefiniran

Zanimljivo je da su operater jednakosti i operator identiteta navikli uspoređivati nula i nedefiniran ključne riječi, potonje ih ne smatra jednakim.

console.log (null == neodređen);
// izlaz je istinit

console.log (null === neodređen);
// izlaz je lažan

Stoga, znajući ispravnu uporabu nula i nedefiniran ključne riječi mogu vam pomoći u izbjegavanju unošenja pogrešaka u vaše JavaScript programe.

Nedefinirane metode

Drugi je uobičajeni uzrok grešaka u JavaScript pozivu na metodu bez davanja prethodne definicije. UBC istraživači su otkrili da ta pogreška dovodi do 4% svih JavaScript pogrešaka.

Evo primjera:

var coder = {
Ime: "nestajati",
dob: 27,
govori () {
console.log (this.name);
}
};
coder.speakNow ();

Evo pogreške koja se vidi na konzoli za razvojne programere Chrome:

Gornja greška događa se zato što pozvana funkcija, speakNow (), nije definirana u JavaScript kodu.

Nepravilna upotreba izjave o povratu

U JavaScript-u povratak Izjava se koristi za zaustavljanje pokretanja funkcije tako da se može iznijeti njena vrijednost. Ako se koristi pogrešno, povratna izjava može narušiti optimalne performanse aplikacija. Prema studiji, pogrešna upotreba izjave o povratu dovodi do 2% svih pogrešaka u JavaScript aplikacijama.

Na primjer, neki JavaScript programeri obično pogriješe što pogrešno razbiju izjavu povrata.

Iako možete razbiti JavaScript izjavu u dva retka i dalje dobiti potreban izlaz, razbijanje izjave povratka poziva na katastrofu u vašoj aplikaciji.

Evo primjera:

broj funkcije (n) {
var dodati = 5;
povratak;
n + dodati;
}
console.log (broj (10));

Kad se pokrene gornji kôd, na konzoli za razvojne programere Chromea vidi se nedefinirana pogreška:

Stoga biste trebali odustati od lomljenja povratak izjave u vašem JavaScript kodu.

Zaključak

Programski jezik JavaScript na strani klijenta dolazi s izvrsnim opsežnim mogućnostima za napajanje funkcionalnosti modernih web aplikacija. Međutim, ako ne razumijete čudesa zbog kojih jezik funkcionira, rad vaših aplikacija može biti osakaćen.

osim toga, JavaScript programeri zahtijevaju svestrane alate za rješavanje problema performansi njihovih aplikacija i brzo otkrivanje grešaka i pogrešaka.

Stoga, pomoću sveobuhvatnog paketa alata za testiranje, možete pouzdano prepoznati anomalije koje narušavaju rad vaše web stranice. Ono je što vam je potrebno za poboljšanje performansi web lokacije i postizanje optimalnog korisničkog iskustva.

Sretno programiranje JavaScripta bez pogreške!

Članak napisao 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