JavaScript (JS) er et allestedsnærværende, fleksibelt og meget populært programmeringssprog – selvom det også er tilbøjeligt til fejl og bugs, der får de fleste udviklere til at rynke panden og flippe.
JS bruges flittigt til at drive brugerinteraktivitet på klientsiden af de fleste webapplikationer. Uden JavaScript kunne ting på nettet måske være livløse og ustimulerende. Ikke desto mindre får sprogets ebbe og flod nogle gange udviklere til at have et had-kærlighedsforhold til det.
JavaScript-fejl får applikationer til at producere uventede resultater og skade brugeroplevelsen. En undersøgelse fra University of British Columbia (UBC) forsøgte at finde ud af årsagerne til og virkningen af JavaScript-fejl og fejl. Resultaterne af undersøgelsen afslørede nogle almindelige mønstre, der forringer ydeevnen af JS-programmer.
Her er et cirkeldiagram, der viser, hvad forskerne fandt ud af:
I dette blogindlæg vil vi illustrere nogle af de almindelige årsager til JavaScript-fejl, der er fremhævet i undersøgelsen (plus andre, vi støder på dagligt), og hvordan du gør dine applikationer mindre tilbøjelige til at fejle.
Indholdsfortegnelse
DOM-relateret
Document Object Model (DOM) spiller en afgørende rolle i interaktiviteten af websteder. DOM-grænsefladen gør det muligt at manipulere indholdet, stilen og strukturen på en webside. At gøre almindelige HTML-websider interaktive – eller manipulere DOM – er selve grunden til, at JavaScript-programmeringssproget blev frigivet.
Så selv med introduktionen af backend JavaScript-teknologier som Node.js, udgør arbejdet med DOM stadig en stor del af, hvad sproget gør. Derfor er DOM en vigtig mulighed for at introducere fejl og fejl i JavaScript-applikationer.
Det er ikke en overraskelse, at JavaScript-fejlrapporten fandt ud af, at DOM-relaterede problemer er ansvarlige for de fleste af fejlene, med 68 %.
For eksempel begår nogle JavaScript-programmører almindeligvis den fejl at henvise til et DOM-element, før det indlæses, hvilket fører til kodefejl.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>
Hvis koden ovenfor køres på Chrome-browseren, vil den give en fejl, som kan ses på udviklerkonsollen:
Fejlen opstår, fordi JavaScript-kode normalt udføres i den rækkefølge, den vises på et dokument. Som sådan er browseren ikke opmærksom på det refererede
For at løse et sådant problem kan du bruge forskellige tilgange. Den enkleste metode er at placere
før begyndelsen af script-tagget. Du kan også bruge et JavaScript-bibliotek som jQuery for at sikre, at DOM’et indlæses først, før det kan tilgås.
<!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>
Syntaks-baseret
Syntaksfejl opstår, når JavaScript-fortolkeren undlader at udføre en syntaktisk forkert kode. Hvis du opretter en applikation, og tolken observerer tokens, der ikke stemmer overens med standardsyntaksen for JavaScript-programmeringssproget, vil det give en fejl. Ifølge JavaScript-fejlrapportundersøgelsen er sådanne fejl ansvarlige for 12 % af alle fejl i sproget.
Grammatiske fejl, såsom manglende parenteser eller uovertrufne parenteser, er de vigtigste årsager til syntaksfejl i JavaScript.
For eksempel, når du skal bruge betingede sætninger til at løse flere forhold, kan du gå glip af at angive parenteserne efter behov, hvilket fører til syntaksfejl.
Lad os se på følgende eksempel.
if((x > y) && (y < 77) {
//more code here
}
Ja, den sidste parentes af betinget udsagn mangler. Har du bemærket fejlen med koden ovenfor?
Lad os rette det.
if ((x > y) && (y < 77)) {
//more code here
}
For at undgå sådanne syntaksfejl bør du bruge tid på at lære de grammatiske regler for programmeringssproget JavaScript. Med omfattende kodningspraksis kan du nemt opdage de grammatiske fejl og undgå at sende dem med din udviklede applikation.
Ukorrekt brug af udefinerede/nul søgeord
Nogle JavaScript-udviklere ved ikke, hvordan man bruger de udefinerede og null-nøgleord korrekt. Faktisk rapporterede undersøgelsen, at ukorrekt brug af søgeordene tegner sig for 5% af alle JavaScript-fejl.
Null nøgleordet er en tildelingsværdi, som normalt tildeles en variabel for at angive en ikke-eksisterende værdi. Overraskende nok er null også et JavaScript-objekt.
Her er et eksempel:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is object
På den anden side indikerer udefineret, at en variabel eller enhver anden egenskab, som allerede er blevet erklæret, mangler en tildelt værdi. Det kan også betyde, at intet er blevet deklareret. udefineret er en type af sig selv.
Her er et eksempel:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
Interessant nok, hvis lighedsoperatoren og identitetsoperatoren er vant til at sammenligne nul- og udefinerede nøgleord, betragter sidstnævnte dem ikke som ens.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
At kende den korrekte brug af null og udefinerede nøgleord kan derfor hjælpe dig med at undgå at introducere fejl i dine JavaScript-programmer.
Udefinerede metoder
En anden almindelig årsag til fejl i JavaScript er at foretage et opkald til en metode uden at angive dens forudgående definition. UBC-forskerne fandt ud af, at denne fejl fører til 4% af alle JavaScript-fejl.
Her er et eksempel:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Her er fejlen, der ses på Chrome-udviklerkonsollen:
Ovenstående fejl opstår, fordi den kaldte funktion, speakNow(), ikke er blevet defineret i JavaScript-koden.
Ukorrekt brug af returopgørelsen
I JavaScript bruges return-sætningen til at stoppe driften af en funktion, så dens værdi kan udlæses. Hvis den bruges fejlagtigt, kan returneringserklæringen forringe den optimale ydeevne af applikationer. Ifølge undersøgelsen fører forkert brug af returneringserklæringen til 2 % af alle fejl i JavaScript-applikationer.
For eksempel begår nogle JavaScript-programmører normalt den fejl at bryde returneringserklæringen forkert.
Selvom du kan bryde en JavaScript-erklæring på to linjer og stadig få det nødvendige output, vil det at bryde returneringserklæringen invitere en katastrofe ind i din ansøgning.
Her er et eksempel:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Når ovenstående kode køres, ses en udefineret fejl på Chrome-udviklerkonsollen:
Derfor bør du afstå fra at bryde returudsagn i din JavaScript-kode.
Konklusion
JavaScript-programmeringssproget på klientsiden kommer med fremragende omfattende muligheder for at drive funktionaliteterne i moderne webapplikationer. Men hvis du ikke forstår de særheder, der får sproget til at fungere, kan ydeevnen af dine applikationer blive forkrøblet.
Desuden, JavaScript udviklere kræver alsidige værktøjer til fejlfinding af ydeevnen af deres applikationer og til at opdage fejl og fejl hurtigt.
Derfor kan du med en omfattende pakke af testværktøjer trygt identificere de uregelmæssigheder, der forringer dit websteds ydeevne. Det er det, du skal bruge for at forbedre dit websteds ydeevne og opnå en optimal brugeroplevelse.
God fejlfri JavaScript-programmering!
Artikel skrevet af Alfrick Opidi