5 JavaScripti vigade levinumat põhjust (ja kuidas neid vältida)

JavaScript (JS) on üldlevinud, paindlik ja laialt levinud programmeerimiskeel – kuigi see on altid ka vigadele ja tõrgetele, mis panevad enamiku arendajate pahaks ja veidraks.


JS-i kasutatakse laialdaselt enamiku veebirakenduste kliendi poolel kasutaja interaktiivsuse suurendamiseks. Ilma JavaScriptita võivad veebis olevad asjad olla elutud ja stimuleerimata. Sellegipoolest muudavad keele e-elemendid ja vood arendajad vahel armastuse-vihkamise suhteks.

JavaScripti tõrked põhjustavad rakendustele ootamatuid tulemusi ja kahjustavad kasutajakogemust. Hiljutine Uuring Briti Columbia ülikool (UBC) püüdis välja selgitada JavaScripti vigade ja vigade algpõhjused ja mõju. Uuringu tulemused paljastasid mõned ühised mustrid, mis halvendavad JS-i programmide toimimist.

Siin on tabel, mis näitab, mida teadlased leidsid:

Selles blogipostituses illustreerime mõnda JavaScripti tõrgete levinumaid põhjuseid, mida uuringus esile tõsteti (pluss teisi, mida me iga päev kohtame) ja kuidas muuta teie rakendused ebaõnnestumisteks väiksemaks.

DOMiga seotud

Dokumendiobjekti mudel (DOM) mängib olulist rolli veebisaitide interaktiivsuses. DOM-i liides võimaldab manipuleerida veebilehe sisu, stiili ja ülesehitusega. HTML-i veebilehtede interaktiivseks muutmine või DOM-iga manipuleerimine on just põhjus, miks JavaScripti programmeerimiskeel vabastati.

Niisiis, isegi tagapõhiste JavaScripti tehnoloogiate kasutuselevõtuga nagu Node.js, moodustab DOM-iga töötamine ikkagi suure osa sellest, mida keel teeb. Seetõttu on DOM märkimisväärne viis vigade ja vigade tutvustamiseks JavaScripti rakendustes.

Pole üllatav, et JavaScripti tõrketeate uuringus selgus, et enamiku puuduste põhjustajaks on DOM-iga seotud probleemid (68%).

Näiteks teevad mõned JavaScripti programmeerijad vea, viidates DOM-elemendile enne selle laadimist, mis põhjustab koodivigu.

document.getElementById ("konteiner") .innerHTML = "Levinumad JS vead ja vead";

Kui ülaltoodud koodi käitatakse Chrome’i brauseris, kuvatakse sellega tõrge, mida võib näha arendajakonsoolil:

Viga visati, kuna JavaScripti koodi täidetakse tavaliselt vastavalt järjekorrale, mis see dokumendis kuvatakse. Sellisena pole brauser koodi käitamisel viidatud elemendist teadlik.

Sellise probleemi lahendamiseks võite kasutada erinevaid lähenemisviise. Lihtsaim viis on paigutada skripti sildi algusesse. Võite kasutada ka JavaScripti teeki (nt jQuery), et veenduda, kas DOM on enne selle juurde pääsemist laaditud.

document.getElementById ("konteiner") .innerHTML = "Levinumad JS vead ja vead";

Süntaksipõhine

Süntaksivead tekivad siis, kui JavaScripti tõlk ei suuda süntaktiliselt valet koodi käivitada. Kui rakenduse loomisel ja tõlk jälgib märke, mis ei ühti JavaScripti programmeerimiskeele tavapärase süntaksiga, viskab see vea. Javascripti veateate uuringu kohaselt põhjustavad sellised vead 12% kõigist keele vigadest.

Grammatilised vead, näiteks puuduvad sulud või sulgudes olevad sulud, on JavaScripti süntaksivigade peamised põhjused.

Näiteks kui peate mitme tingimuse lahendamiseks kasutama tingimuslikke avaldusi, võite vahele jätta sulgude vajaduse korral pakkumise, mis võib põhjustada süntaksivigu.

Vaatame järgmist näidet.

if ((x > y) && (y < 77) {
// rohkem koodi siin
}

Jah, tingimusliku väite viimane sulg puudub. Kas märkasite viga ülaltoodud koodiga?

Parandame seda.

if ((x > y) && (y < 77)) {
// rohkem koodi siin
}

Selliste süntaksivigade vältimiseks peaksite kulutama aega JavaScripti programmeerimiskeele grammatikareeglite õppimisele. Ulatusliku kodeerimispraktika abil saate grammatilisi vigu hõlpsalt märgata ja vältida nende saatmist oma väljatöötatud rakendusega.

Määratlemata / nullmärksõnade vale kasutamine

Mõned JavaScripti arendajad ei tea, kuidas seda kasutada määratlemata ja null märksõnad õigesti. Tegelikult teatas uuring, et märksõnade ebaõige kasutamine moodustab 5% kõigist JavaScripti vigadest.

null märksõna on määramisväärtus, mis tavaliselt määratakse muutujale olematu väärtuse tähistamiseks. Üllatavalt, null on ka JavaScripti objekt.

Siin on näide:

var koodJS = null;

console.log (koodJS);
// väljund on null

console.log (typeof codeJS);
// väljund on objekt

Teiselt poolt, määratlemata näitab, et muutujal või muul juba deklareeritud omadusel puudub määratud väärtus. See võib tähendada ka seda, et midagi pole deklareeritud. määratlemata on iseenesest tüüp.

Siin on näide:

var koodJS;

console.log (koodJS);
// väljund on määratlemata

console.log (typeof codeJS);
// väljund on määratlemata

Huvitav, kui võrdõiguslikkuse operaator ja identiteedi operaator on harjunud võrdlema null ja määratlemata märksõnu, viimane ei pea neid võrdseteks.

console.log (null == määratlemata);
// väljund on tõene

console.log (null === määratlemata);
// väljund on vale

Seetõttu teame rakenduse õiget kasutamist null ja määratlemata märksõnad võivad aidata teil vältida JavaScripti programmides vigade esilekutsumist.

Määratlemata meetodid

Teine levinud JavaScripti vigade põhjus on meetodile helistamine, ilma selle eeldavat määratlust esitamata. UBC teadlased leidsid, et see viga põhjustab 4% kõigist JavaScripti vigadest.

Siin on näide:

var coder = {
nimi: "Peeter",
vanus: 27,
räägi () {
console.log (see.nimi);
}
};
coder.speakNow ();

Siin on viga, mida nähakse Chrome’i arendajakonsoolil:

Ülaltoodud tõrge ilmneb seetõttu, et kutsutud funktsiooni speakNow () pole JavaScripti koodis määratletud.

Tagastamisavalduse vale kasutamine

JavaScriptis tagasi avaldust kasutatakse funktsiooni käitamise peatamiseks, nii et selle väärtuse saab väljastada. Vale kasutamise korral võib tagastamisavaldus kahjustada rakenduste optimaalset toimimist. Uuringu kohaselt põhjustab tagastamisavalduse vale kasutamine 2% kõigist JavaScripti rakenduste vigadest.

Näiteks teevad mõned JavaScripti programmeerijad vea, et nad purustavad tagastamisavalduse valesti.

Ehkki saate JavaScripti avalduse kahes reas jaotada ja saada ikkagi vajalikku väljundit, kutsub tagastamisavalduse murdmine teie rakendusesse katastroofi.

Siin on näide:

funktsiooni number (n) {
var lisada = 5;
tagasi;
n + lisada;
}
console.log (number (10));

Ülaltoodud koodi käivitamisel kuvatakse Chrome’i arendajakonsoolil määratlemata tõrge:

Seetõttu peaksite hoiduma purunemisest tagasi avaldused teie JavaScripti koodis.

Järeldus

Kliendipoolsel JavaScripti programmeerimiskeelel on suurepärased ulatuslikud võimalused kaasaegsete veebirakenduste funktsioonide toiteks. Kui te aga ei mõista keelt toimivaid veidrusi, võib teie rakenduste jõudlus olla halb.

Lisaks, JavaScripti arendajad vajavad mitmekülgseid tööriistu nende rakenduste jõudluse tõrkeotsinguks ja vigade ja vigade kiireks tuvastamiseks.

Seetõttu saate ulatusliku testimisriistade komplekti abil kindlalt tuvastada kõrvalekalded, mis kahjustavad teie veebisaidi toimimist. See on see, mida peate oma saidi toimivuse parandamiseks ja optimaalse kasutajakogemuse saavutamiseks.

Rõõmsat veatu JavaScripti programmeerimist!

Artikkel on kirjutatud Alfrick Opidi poolt

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