JavaScript (JS) este un limbaj de programare omniprezent, flexibil și larg popular, deși este, de asemenea, predispus la erori și bug-uri care îi fac pe majoritatea dezvoltatorilor să se încrunte și să se sperie.
JS este utilizat pe scară largă pentru a stimula interactivitatea utilizatorului pe partea client a majorității aplicațiilor web. Fără JavaScript, poate că lucrurile de pe web ar putea fi lipsite de viață și nestimulante. Cu toate acestea, fluxurile și refluxurile limbajului îi fac uneori pe dezvoltatori să aibă o relație de dragoste-ura cu ea.
Defecțiunile JavaScript fac ca aplicațiile să producă rezultate neașteptate și să afecteze experiența utilizatorului. Un studiu al Universității din Columbia Britanică (UBC) a căutat să afle cauzele fundamentale și impactul erorilor și erorilor JavaScript. Rezultatele studiului au descoperit câteva modele comune care afectează performanța programelor JS.
Iată o diagramă circulară care arată ceea ce au descoperit cercetătorii:
În această postare pe blog, vom ilustra câteva dintre cauzele comune ale erorilor JavaScript evidențiate în studiu (plus altele pe care le întâlnim zilnic) și cum să faceți aplicațiile dvs. mai puțin predispuse la eșecuri.
Cuprins
legate de DOM
Document Object Model (DOM) joacă un rol vital în interactivitatea site-urilor web. Interfața DOM permite manipularea conținutului, stilului și structurii unei pagini web. Efectuarea interactivă a paginilor web HTML simplu sau manipularea DOM-ului este tocmai motivul pentru care a fost lansat limbajul de programare JavaScript.
Deci, chiar și odată cu introducerea tehnologiilor JavaScript de backend, cum ar fi Node.js, lucrul cu DOM încă formează o mare parte din ceea ce face limbajul. Prin urmare, DOM este o cale semnificativă pentru introducerea de erori și erori în aplicațiile JavaScript.
Nu este o surpriză că studiul de raportare a erorilor JavaScript a descoperit că problemele legate de DOM sunt responsabile pentru majoritatea defectelor, la 68%.
De exemplu, unii programatori JavaScript fac de obicei greșeala de a face referire la un element DOM înainte de a fi încărcat, ceea ce duce la erori de cod.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>
Dacă codul de mai sus este rulat în browserul Chrome, va genera o eroare, care poate fi văzută pe consola dezvoltatorului:
Eroarea este aruncată deoarece codul JavaScript este de obicei executat în conformitate cu ordinea în care apare pe un document. Ca atare, browserul nu cunoaște elementul
Pentru a rezolva o astfel de problemă, puteți utiliza diverse abordări. Cea mai simplă metodă este să plasați
înainte de începutul etichetei de script. De asemenea, puteți utiliza o bibliotecă JavaScript precum jQuery pentru a vă asigura că DOM-ul este încărcat mai întâi înainte de a putea fi accesat.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
</body>
</html>
Bazat pe sintaxă
Erorile de sintaxă au loc atunci când interpretul JavaScript nu execută un cod incorect din punct de vedere sintactic. Dacă se creează o aplicație și interpretul observă jetoane care nu se potrivesc cu sintaxa standard a limbajului de programare JavaScript, va genera o eroare. Potrivit studiului de raportare a erorilor JavaScript, astfel de erori sunt responsabile pentru 12% din toate erorile din limbaj.
Greșelile gramaticale, cum ar fi lipsa parantezelor sau parantezele nepotrivite, 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 furnizați parantezele după cum este necesar, ceea ce duce la defecte de sintaxă.
Să ne uităm la următorul exemplu.
if((x > y) && (y < 77) {
//more code here
}
Da, ultima paranteză a enunțului condiționat lipsește. Ai observat greșeala cu codul de mai sus?
Să o corectăm.
if ((x > y) && (y < 77)) {
//more code here
}
Pentru a evita astfel de erori de sintaxă, ar trebui să petreceți timp învățând regulile gramaticale ale limbajului de programare JavaScript. Cu o practică extinsă de codificare, puteți identifica cu ușurință greșelile gramaticale și puteți evita expedierea lor cu aplicația dezvoltată.
Utilizarea necorespunzătoare a cuvintelor cheie nedefinite/nule
Unii dezvoltatori JavaScript nu știu cum să folosească corect cuvintele cheie nedefinite și nule. De fapt, studiul a raportat că utilizarea necorespunzătoare a cuvintelor cheie reprezintă 5% din toate erorile JavaScript.
Cuvântul cheie nul este o valoare de atribuire, care este de obicei atribuită unei variabile pentru a indica o valoare inexistentă. În mod surprinzător, null este și un obiect JavaScript.
Iată un exemplu:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is object
Pe de altă parte, nedefinit indică faptul că unei variabile sau oricărei alte proprietăți, care a fost deja declarată, îi lipsește o valoare atribuită. De asemenea, poate presupune că nu a fost declarat nimic. nedefinit este un tip de sine.
Iată un exemplu:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
Interesant, dacă operatorul de egalitate și operatorul de identitate sunt obișnuiți să compare cuvintele cheie nule și nedefinite, acesta din urmă nu le consideră egale.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Prin urmare, cunoașterea utilizării corecte a cuvintelor cheie nule și nedefinite vă poate ajuta să evitați introducerea de erori în programele dvs. JavaScript.
Metode nedefinite
O altă cauză comună a erorilor în JavaScript este efectuarea unui apel la o metodă fără a furniza definiția anterioară a acesteia. Cercetătorii UBC au descoperit că această greșeală duce la 4% din toate erorile JavaScript.
Iată un exemplu:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Iată eroarea care se vede pe consola pentru dezvoltatori Chrome:
Eroarea de mai sus apare deoarece funcția apelată, speakNow(), nu a fost definită în codul JavaScript.
Utilizarea necorespunzătoare a declarației de returnare
În JavaScript, instrucțiunea return este folosită pentru a opri rularea unei funcții, astfel încât valoarea acesteia să poată fi afișată. Dacă este utilizat în mod eronat, declarația return poate afecta performanța optimă a aplicațiilor. Potrivit studiului, utilizarea incorectă a declarației return duce la 2% din toate erorile în aplicațiile JavaScript.
De exemplu, unii programatori JavaScript fac de obicei greșeala de a rupe incorect declarația return.
Deși puteți sparge o instrucțiune JavaScript în două rânduri și să obțineți totuși rezultatul necesar, întreruperea declarației return provoacă un dezastru în aplicația dvs.
Iată un exemplu:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Când se rulează codul de mai sus, se vede o eroare nedefinită pe consola pentru dezvoltatori Chrome:
Prin urmare, ar trebui să renunțați la ruperea declarațiilor return în codul JavaScript.
Concluzie
Limbajul de programare JavaScript la nivelul clientului vine cu capabilități extinse excelente pentru a alimenta funcționalitățile aplicațiilor web moderne. Cu toate acestea, dacă nu înțelegeți ciudațiile care fac limbajul să funcționeze, performanța aplicațiilor dvs. poate fi paralizată.
Î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ă cuprinzătoare de instrumente de testare, puteți identifica cu încredere anomaliile care afectează performanța site-ului dvs. Este ceea ce aveți nevoie pentru a îmbunătăți performanța site-ului dvs. și pentru a obține o experiență optimă pentru utilizator.
Programare JavaScript fericită fără erori!
Articol scris de Alfrick Opidi