5 pogostih vzrokov napak JavaScript (in kako se jim izogniti)

JavaScript (JS) je vseprisotni, fleksibilen in široko priljubljen programski jezik – čeprav je nagnjen tudi k napakam in napakam, zaradi katerih se večina razvijalcev namrži in čudi.


JS se veliko uporablja za povečanje uporabniške interaktivnosti na strani odjemalca večine spletnih aplikacij. Brez JavaScripta bi bile morda stvari na spletu življenjske in spodbudne. Kljub temu jeziki in pretoki jezikov včasih povzročajo, da imajo razvijalci do njega ljubezenski sovražni odnos.

Napake JavaScript povzročajo, da aplikacije prinesejo nepričakovane rezultate in škodijo uporabniški izkušnji. Nedavno študij univerza British Columbia (UBC), da bi ugotovila vzroke in vpliv napak in napak v JavaScript. Rezultati študije so odkrili nekatere skupne vzorce, ki poslabšujejo delovanje programov JS.

Tukaj je slikovni grafikon, ki prikazuje, kaj so ugotovili raziskovalci:

V tej objavi na spletnem dnevniku bomo ponazorili nekatere najpogostejše vzroke napak v JavaScript, ki so jih izpostavili v študiji (in druge, s katerimi se srečujemo vsak dan) in kako vaše aplikacije manj nagniti k napakam.

DOM povezane

Objektni model dokumenta (DOM) igra ključno vlogo pri interaktivnosti spletnih strani. DOM vmesnik omogoča manipuliranje z vsebino, slogom in strukturo spletne strani. Izdelava interaktivnih spletnih strani navadnih HTML – ali manipulacija z DOM – je ravno razlog, zakaj je bil sproščen programski jezik JavaScript.

Tudi z uvedbo zalednih tehnologij JavaScript, kot je Node.js, delo z DOM še vedno predstavlja velik kos tega, kar jezik počne. Zato je DOM pomemben namen uvedbe napak in napak v aplikacijah JavaScript.

Ne preseneča, da je študija poročila o napakah JavaScript ugotovila, da so težave, povezane z DOM, odgovorne za večino napak, in sicer 68%.

Na primer, nekateri programerji JavaScript običajno napako sklicujejo na element DOM pred nalaganjem, kar privede do napak v kodi.

document.getElementById ("posoda") .innerHTML = "Pogoste napake JS in napake";

Če se zgornja koda zažene v brskalniku Chrome, bo sprožila napako, kar je vidno na konzoli za razvijalce:

Napaka je vržena, ker se koda JavaScript običajno izvaja v skladu z vrstnim redom, ki je prikazan v dokumentu. Brskalnik zato ne pozna referenčnega elementa, ko se zažene koda.

Če želite rešiti takšno težavo, lahko uporabite različne pristope. Najenostavnejša metoda je, da pred začetkom oznake skripta postavite. Uporabite lahko tudi knjižnico JavaScript, kot je jQuery, da se prepričate, da je DOM najprej naložen, preden lahko dostopate do njega.

document.getElementById ("posoda") .innerHTML = "Pogoste napake JS in napake";

Na osnovi sintakse

Napake sintakse se zgodijo, ko tolmač JavaScript ne izvede sintaktično napačne kode. Če ustvari aplikacijo in tolmač opazi žetone, ki se ne ujemajo s standardno skladnjo programskega jezika JavaScript, bo vrgel napako. Glede na študijo poročila o napakah JavaScript je za take napake odgovornih 12% vseh napak v jeziku.

Slovnične napake, kot so manjkajoči oklepaji ali neusklajeni oklepaji, so glavni vzroki napak v sintaksi v JavaScript.

Na primer, ko morate za pogoj za več pogojev uporabiti pogojne stavke, boste morda zamudili oklepaje, kot je potrebno, kar vodi v napake skladnje.

Poglejmo naslednji primer.

če ((x) > y) && (y < 77) {
// več kode tukaj
}

Da, zadnja oklepaja pogojne izjave manjka. Ste opazili napako pri zgornji kodi?

Popravimo ga.

če ((x) > y) && (y < 77)) {
// več kode tukaj
}

Da bi se izognili takšnim sintaksnim napakam, bi morali porabiti čas za učenje slovničnih pravil programskega jezika JavaScript. Z obsežno prakso kodiranja lahko slovnične napake zlahka opazite in se izognete pošiljanju s svojo razvito aplikacijo.

Nepravilna uporaba nedefiniranih / ničelnih ključnih besed

Nekateri razvijalci JavaScript ne vedo, kako naj uporabljajo nedoločeno in nič pravilno ključne besede. V resnici je študija poročala, da nepravilna uporaba ključnih besed predstavlja 5% vseh napak v JavaScript.

The nič ključna beseda je dodelitvena vrednost, ki je običajno dodeljena spremenljivki, da označi neobstoječo vrednost. Presenetljivo, nič je tudi JavaScript-objekt.

Tu je primer:

var codeJS = null;

console.log (codeJS);
// izhod je ničen

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

Po drugi strani, nedoločeno pomeni, da spremenljivki ali kateri koli drugi lastnosti, ki je že bila razglašena, manjka dodeljena vrednost. Lahko pomeni tudi, da ni bilo nič prijavljeno. nedoločeno je vrsta sama po sebi.

Tu je primer:

var codeJS;

console.log (codeJS);
// izhod ni določen

console.log (typeof codeJS);
// izhod ni določen

Zanimivo je, če sta za primerjavo operaterja za enakost in operater identitete navajena primerjati nič in nedoločeno ključne besede, slednje jih ne šteje za enake.

console.log (null == nedefinirano);
// izhod je resničen

console.log (null === nedefinirano);
// izhod je napačen

Zato poznavanje pravilne uporabe nič in nedoločeno ključne besede vam lahko pomagajo pri izogibanju vnašanju napak v programe JavaScript.

Nedefinirane metode

Drug pogost vzrok za napake v JavaScriptu je klic na metodo brez predhodne opredelitve. Raziskovalci UBC so ugotovili, da ta napaka vodi do 4% vseh napak v JavaScript.

Tu je primer:

var koder = {
ime: "Peter",
starost: 27 let,
govoriti() {
console.log (to ime);
}
};
coder.speakNow ();

Tu je napaka opažena na konzoli za razvijalce Chrome:

Zgornja napaka se zgodi, ker klicana funkcija, speakNow (), ni bila definirana v kodi JavaScript.

Nepravilna uporaba izjave o vračilu

V JavaScript-ju je vrnitev stavek se uporablja za zaustavitev izvajanja funkcije, tako da je mogoče izpisati njeno vrednost. Če se napačno uporablja, lahko izjava o vrnitvi poslabša optimalno delovanje aplikacij. Glede na študijo nepravilna uporaba izjave o vračanju vodi do 2% vseh napak v aplikacijah JavaScript.

Na primer, nekateri programerji JavaScript ponavadi napačno napačno napako vrnejo.

Medtem ko lahko stavek JavaScript prekinete v dveh vrsticah in še vedno dobite želeni izhod, pa prekinitev izjave o vračanju vabi v vašo aplikacijo,.

Tu je primer:

funkcijska številka (n) {
var add = 5;
vrnitev;
n + dodaj;
}
console.log (številka (10));

Ko se zgornja koda zažene, se na konzoli za razvijalce za Chrome opazi nedefinirana napaka:

Zato bi se morali upreti, da bi se zlomili vrnitev stavke v kodi JavaScript.

Zaključek

Programski jezik JavaScript na strani odjemalca ima odlične obsežne zmogljivosti za povečanje funkcionalnosti sodobnih spletnih aplikacij. Če pa ne razumete prepirov, zaradi katerih jezik deluje, se lahko uspešnost vaših aplikacij ogrozi.

Nadalje, Razvijalci JavaScript zahtevajo vsestranska orodja za odpravljanje težav pri delovanju svojih aplikacij in hitro odkrivanje napak in napak.

Zato lahko s širokim naborom orodij za testiranje samozavestno ugotovite nepravilnosti, ki poslabšajo delovanje vašega spletnega mesta. To je tisto, kar morate izboljšati uspešnost svojega spletnega mesta in doseči optimalno uporabniško izkušnjo.

Srečno programiranje JavaScript brez napak!

Članek napisal 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