5 cauze comune ale erorilor JavaScript (și cum să le evităm)

JavaScript (JS) este un limbaj de programare omniprezent, flexibil și foarte popular – deși este, de asemenea, predispus la erori și bug-uri care fac ca majoritatea dezvoltatorilor să se încrunte și să se încrunte..


JS este utilizat pe scară largă pentru a alimenta interactivitatea utilizatorului de partea clientului a majorității aplicațiilor web. Fără JavaScript, poate că lucrurile de pe web ar putea fi lipsite de viață și de stimulare. Cu toate acestea, fluxurile și fluxurile limbajului îi fac uneori pe dezvoltatori să aibă o relație dragoste-ură cu aceasta.

Defecțiunile JavaScript fac ca aplicațiile să producă rezultate neașteptate și să dăuneze experienței utilizatorului. Recent studiu de către Universitatea din Columbia Britanică (UBC) a căutat să afle cauzele principale și impactul erorilor și erorilor JavaScript. Rezultatele studiului au descoperit câteva tipare comune care afectează performanța programelor JS.

Iată un grafic care arată ce au aflat cercetătorii:

În această postare pe blog, vom ilustra unele dintre cauzele comune ale defecțiilor JavaScript evidențiate în studiu (plus altele pe care le întâlnim zilnic) și cum să facem ca aplicațiile dvs. să fie mai puțin predispuse la eșecuri..

DOM legate de

Modelul de obiecte de document (DOM) joacă un rol esențial în interactivitatea site-urilor web. Interfața DOM permite manipularea conținutului, stilului și structurii unei pagini web. Crearea interactivă a paginilor HTML HTML sau manipularea DOM este tocmai motivul pentru care a fost lansat limbajul de programare JavaScript.

Așadar, chiar și cu introducerea tehnologiilor JavaScript backend precum Node.js, lucrul cu DOM constituie încă o bucată mare din ceea ce face limba. Prin urmare, DOM este o cale importantă pentru introducerea de buguri și erori în aplicațiile JavaScript.

Nu este de mirare că studiul raportului de erori JavaScript a descoperit că problemele legate de DOM sunt responsabile pentru majoritatea defectelor, la 68%.

De exemplu, unii programatori JavaScript fac greșeala de a face referire la un element DOM înainte de a fi încărcat, ceea ce duce la erori de cod.

document.getElementById ("recipient") .innerHTML = "Erori și erori comune JS";

Dacă codul de mai sus este rulat pe browserul Chrome, va genera o eroare, care poate fi văzută pe consola pentru dezvoltatori:

Eroarea este aruncată deoarece codul JavaScript este de obicei executat în funcție de ordinea în care apare pe un document. Ca atare, browserul nu cunoaște elementul referit atunci când rulează codul.

Pentru a rezolva o astfel de problemă, puteți utiliza diferite abordări. Cea mai simplă metodă este de a plasa înainte de începutul tag-ului script. Puteți utiliza, de asemenea, o bibliotecă JavaScript ca jQuery pentru a vă asigura că DOM este încărcat mai întâi înainte de a putea fi accesat.

document.getElementById ("recipient") .innerHTML = "Erori și erori comune JS";

Sintaxa pe bază de

Erorile de sintaxă au loc atunci când interpretul JavaScript nu reușește să execute un cod incorect sintactic. Dacă crearea unei aplicații și interpretul observă jetoane care nu se potrivesc cu sintaxa standard a limbajului de programare JavaScript, va arunca o eroare. Conform studiului raportului de erori JavaScript, astfel de erori sunt responsabile pentru 12% din toate erorile din limbă.

Greșelile gramaticale, cum ar fi parantezele lipsă sau parantezele neegalate, sunt cauzele majore ale erorilor de sintaxă în JavaScript.

De exemplu, atunci când trebuie să utilizați instrucțiuni condiționale pentru a aborda mai multe condiții, este posibil să nu ratați furnizarea parantezelor după cum este necesar, ceea ce duce la defecte de sintaxă.

Să ne uităm la următorul exemplu.

if ((x > y) && (y < 77) {
// mai multe coduri aici
}

Da, ultima paranteză a enunțului condițional lipsește. Ați observat greșeala cu codul de mai sus?

Să o corectăm.

dacă ((x > y) && (y < 77)) {
// mai multe coduri aici
}

Pentru a evita astfel de erori de sintaxă, ar trebui să petreci timp învățând regulile gramaticale ale limbajului de programare JavaScript. Cu o practică extinsă de codare, puteți observa ușor greșelile gramaticale și puteți evita să le trimiteți cu aplicația dvs. dezvoltată.

Utilizarea necorespunzătoare a cuvintelor cheie nedefinite / nule

Unii dezvoltatori JavaScript nu știu să folosească nedefinit și nul cuvintele cheie corect. De fapt, studiul a raportat că utilizarea necorespunzătoare a cuvintelor cheie reprezintă 5% din totalul erorilor JavaScript.

nul cuvântul cheie este o valoare de atribuire, care este de obicei atribuită unei variabile pentru a indica o valoare inexistentă. surprinzător, nul este de asemenea un obiect JavaScript.

Iată un exemplu:

cod varJS = null;

console.log (codeJS);
// ieșirea este nulă

console.log (typeof codeJS);
// ieșirea este obiect

Pe de altă parte, nedefinit indică faptul că o variabilă sau orice altă proprietate, care a fost deja declarată, nu are o valoare atribuită. De asemenea, poate presupune că nimic nu a fost declarat. nedefinit este un tip de sine.

Iată un exemplu:

cod varJS;

console.log (codeJS);
// ieșirea nu este definită

console.log (typeof codeJS);
// ieșirea nu este definită

Interesant, dacă operatorul de egalitate și operatorul de identitate obișnuiesc să compare nul și nedefinit Cuvinte cheie, acestea din urmă nu le consideră egale.

console.log (null == nedefinită);
// ieșirea este adevărată

console.log (null === nedefinită);
// ieșirea este falsă

Prin urmare, știind utilizarea corectă a nul și nedefinit cuvintele cheie vă pot ajuta să evitați introducerea de buguri în programele dvs. JavaScript.

Metode nedefinite

O altă cauză comună a erorilor din JavaScript este apelarea la o metodă fără a furniza definiția sa anterioară. Cercetătorii UBC au aflat că această greșeală duce la 4% din toate erorile JavaScript.

Iată un exemplu:

var coder = {
Nume: "Petru",
varsta: 27,
vorbi() {
console.log (this.name);
}
};
coder.speakNow ();

Iată eroarea care se vede pe consola pentru dezvoltatori Chrome:

Eroarea de mai sus are loc deoarece funcția apelată, speakNow (), nu a fost definită în codul JavaScript.

Utilizarea necorespunzătoare a declarației de returnare

În JavaScript, întoarcere instrucțiunea este utilizată pentru a opri funcționarea unei funcții, astfel încât valoarea acesteia să poată fi transmisă. Dacă este utilizată în mod eronat, declarația de retur poate afecta performanța optimă a aplicațiilor. Conform studiului, utilizarea incorectă a declarației de returnare duce la 2% din totalul erorilor din aplicațiile JavaScript.

De exemplu, unii programatori JavaScript fac de obicei greșeala de a sparge incorect declarația de returnare.

În timp ce puteți sparge o declarație JavaScript în două linii și puteți obține în continuare rezultatul necesar, încălcarea declarației de returnare invită dezastru în aplicația dvs..

Iată un exemplu:

numărul funcției (n) {
var add = 5;
întoarcere;
n + adaos;
}
console.log (număr (10));

Când este executat codul de mai sus, o eroare nedefinită este văzută pe consola pentru dezvoltatori Chrome:

Prin urmare, ar trebui să renunți la rupere întoarcere declarații din codul dvs. JavaScript.

Concluzie

Limbajul de programare JavaScript din partea clientului oferă funcții extinse excelente pentru alimentarea funcționalităților aplicațiilor web moderne. Cu toate acestea, dacă nu înțelegeți aspectele care fac limbajul să funcționeze, performanțele aplicațiilor dvs. pot fi cripte.

În plus, Dezvoltatori JavaScript necesită instrumente versatile pentru depanarea performanței aplicațiilor lor și pentru detectarea rapidă a erorilor și erorilor.

Prin urmare, cu o suită completă de instrumente de testare, puteți identifica cu încredere anomaliile care afectează performanța site-ului dvs. web. Este ceea ce aveți nevoie pentru a îmbunătăți performanța site-ului dvs. și pentru a obține o experiență optimă a utilizatorului.

Programare JavaScript fericită fără erori!

Articol scris de 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