JavaScript (JS) er et allestedsnærværende, fleksibelt og allment populært programmeringsspråk – selv om det også er utsatt for feil og feil som får de fleste utviklere til å rynke på nesen.
JS brukes mye for å drive brukerinteraktivitet på klientsiden av de fleste nettapplikasjoner. Uten JavaScript kan kanskje ting på nettet være livløse og lite stimulerende. Ikke desto mindre får språkets ebb og flyt noen ganger utviklere til å ha et kjærlighet-hat-forhold til det.
JavaScript-feil fører til at applikasjoner produserer uventede resultater og skader brukeropplevelsen. En studie fra University of British Columbia (UBC) forsøkte å finne ut årsakene til og virkningen av JavaScript-feil og feil. Resultatene av studien avdekket noen vanlige mønstre som svekker ytelsen til JS-programmer.
Her er et kakediagram som viser hva forskerne fant ut:
I dette blogginnlegget vil vi illustrere noen av de vanlige årsakene til JavaScript-feil som er fremhevet i studien (pluss andre vi møter daglig) og hvordan du kan gjøre applikasjonene dine mindre utsatt for feil.
Innholdsfortegnelse
DOM-relatert
Document Object Model (DOM) spiller en viktig rolle i interaktiviteten til nettsteder. DOM-grensesnittet gjør det mulig å manipulere innholdet, stilen og strukturen til en nettside. Å gjøre vanlige HTML-websider interaktive – eller manipulere DOM – er selve grunnen til at programmeringsspråket JavaScript ble utgitt.
Så selv med introduksjonen av backend JavaScript-teknologier som Node.js, utgjør arbeid med DOM fortsatt en stor del av hva språket gjør. Derfor er DOM en betydelig vei for å introdusere feil og feil i JavaScript-applikasjoner.
Det er ikke en overraskelse at JavaScript-feilrapportstudien fant ut at DOM-relaterte problemer er ansvarlige for de fleste feilene, med 68 %.
Noen JavaScript-programmerere gjør for eksempel ofte feilen med å referere til et DOM-element før det lastes, noe som fører til kodefeil.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>
Hvis koden ovenfor kjøres i Chrome-nettleseren, vil den gi en feilmelding, som kan sees på utviklerkonsollen:
Feilen oppstår fordi JavaScript-kode vanligvis kjøres i henhold til rekkefølgen den vises på et dokument. Som sådan er nettleseren uvitende om det refererte
For å løse et slikt problem kan du bruke ulike tilnærminger. Den enkleste metoden er å plassere
før begynnelsen av script-taggen. Du kan også bruke et JavaScript-bibliotek som jQuery for å sikre at DOM-en er lastet inn først før den kan nå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>
Syntaksbasert
Syntaksfeil oppstår når JavaScript-tolken ikke klarer å kjøre en syntaktisk feil kode. Hvis du oppretter en applikasjon og tolken observerer tokens som ikke samsvarer med standardsyntaksen til JavaScript-programmeringsspråket, vil det gi en feil. I følge JavaScript-feilrapportstudien er slike feil ansvarlige for 12 % av alle feil i språket.
Grammatiske feil, som manglende parenteser eller uovertrufne parenteser, er hovedårsakene til syntaksfeil i JavaScript.
For eksempel, når du må bruke betingede setninger for å adressere flere forhold, kan du gå glipp av å oppgi parentesene etter behov, noe som fører til syntaksfeil.
La oss se på følgende eksempel.
if((x > y) && (y < 77) {
//more code here
}
Ja, den siste parentesen til betinget utsagn mangler. La du merke til feilen med koden ovenfor?
La oss rette det.
if ((x > y) && (y < 77)) {
//more code here
}
For å unngå slike syntaksfeil bør du bruke tid på å lære deg de grammatiske reglene for programmeringsspråket JavaScript. Med omfattende kodingspraksis kan du enkelt oppdage de grammatiske feilene og unngå å sende dem med din utviklede applikasjon.
Feil bruk av udefinerte/null-søkeord
Noen JavaScript-utviklere vet ikke hvordan de skal bruke de udefinerte og null-nøkkelordene riktig. Faktisk rapporterte studien at feil bruk av søkeordene utgjør 5 % av alle JavaScript-feil.
Null-nøkkelordet er en tilordningsverdi, som vanligvis tilordnes en variabel for å angi en ikke-eksisterende verdi. 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 annen side indikerer udefinert at en variabel eller en annen egenskap, som allerede er deklarert, mangler en tilordnet verdi. Det kan også innebære at ingenting er erklært. undefined er en type av seg selv.
Her er et eksempel:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefined
Interessant nok, hvis likhetsoperatøren og identitetsoperatøren er vant til å sammenligne null- og udefinerte nøkkelord, anser sistnevnte dem ikke som like.
console.log(null==undefined); //output is true console.log(null===undefined); //output is false
Derfor kan det å kjenne til riktig bruk av null og udefinerte nøkkelord hjelpe deg med å unngå å introdusere feil i JavaScript-programmene dine.
Udefinerte metoder
En annen vanlig årsak til feil i JavaScript er å ringe til en metode uten å gi dens forutgående definisjon. UBC-forskerne fant ut at denne feilen fører til 4 % av alle JavaScript-feil.
Her er et eksempel:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Her er feilen som vises på Chrome-utviklerkonsollen:
Feilen ovenfor oppstår fordi den kalte funksjonen, speakNow(), ikke er definert i JavaScript-koden.
Feil bruk av returerklæringen
I JavaScript brukes retursetningen til å stoppe kjøringen av en funksjon slik at verdien kan sendes ut. Hvis den brukes feil, kan returerklæringen svekke den optimale ytelsen til applikasjoner. I følge studien fører feil bruk av returerklæringen til 2 % av alle feil i JavaScript-applikasjoner.
For eksempel gjør noen JavaScript-programmerere vanligvis feilen ved å bryte retursetningen feil.
Selv om du kan bryte en JavaScript-setning på to linjer og fortsatt få den nødvendige utgangen, vil det å bryte en tilbakemelding invitere katastrofe inn i applikasjonen din.
Her er et eksempel:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Når koden ovenfor kjøres, vises en udefinert feil på Chrome-utviklerkonsollen:
Derfor bør du avstå fra å bryte retursetninger i JavaScript-koden.
Konklusjon
JavaScript-programmeringsspråket på klientsiden kommer med utmerkede omfattende muligheter for å drive funksjonaliteten til moderne nettapplikasjoner. Men hvis du ikke forstår særhetene som får språket til å fungere, kan ytelsen til applikasjonene dine bli forringet.
Dessuten, JavaScript-utviklere krever allsidige verktøy for å feilsøke ytelsen til applikasjonene deres og oppdage feil og feil raskt.
Derfor, med en omfattende pakke med testverktøy, kan du trygt identifisere uregelmessighetene som svekker ytelsen til nettstedet ditt. Det er det du trenger for å forbedre nettstedets ytelse og oppnå optimal brukeropplevelse.
Lykke til med feilfri JavaScript-programmering!
Artikkel skrevet av Alfrick Opidi