5 Algemene oorsake van JavaScript-foute (en hoe om hulle te vermy)

JavaScript (JS) is ‘n alomteenwoordige, buigsame en wyd gewilde programmeringstaal – hoewel dit ook geneig is tot foute en foute wat die meeste ontwikkelaars laat frons en freak.


JS word breedvoerig gebruik om gebruikersinteraktiwiteit aan die kliëntkant van die meeste webtoepassings aan te wakker. Sonder JavaScript kan dinge op die web miskien leweloos en onstimulerend wees. Nietemin laat ontwikkelaars die taal ebbs en vloei soms ‘n liefde-haat-verhouding daarmee hê.

JavaScript-foute veroorsaak dat programme onverwagte resultate lewer en die gebruikerservaring benadeel. ‘N Onlangse studie deur die Universiteit van Brits-Columbië (UBC) probeer om vas te stel wat die oorsake en impak van JavaScript-foute en -foute is. Die resultate van die studie het enkele algemene patrone ontbloot wat die prestasie van JS-programme benadeel.

Hier is ‘n sirkelgrafiek wat toon wat die navorsers uitgevind het:

In hierdie blogplasing sal ons enkele van die algemene oorsake van JavaScript-foute illustreer wat in die studie uitgelig word (plus ander wat ons daagliks teëkom) en hoe u toepassings minder geneig is tot mislukkings..

DOM-verwante

Die Document Object Model (DOM) speel ‘n belangrike rol in die interaktiwiteit van webwerwe. Met die DOM-koppelvlak kan die inhoud, styl en struktuur van ‘n webblad gemanipuleer word. Om HTML-webbladsye interaktief te maak – of die DOM te manipuleer – is juis die rede waarom die JavaScript-programmeertaal vrygestel is.

Dus, selfs met die bekendstelling van JavaScript-tegnologie-backend soos Node.js, vorm die werk met die DOM steeds ‘n groot deel van wat die taal doen. Daarom is die DOM ‘n belangrike manier om foute en foute in JavaScript-toepassings bekend te stel.

Dit is nie ‘n verrassing dat die JavaScript-foutverslagstudie uitgevind het dat DOM-verwante probleme verantwoordelik is vir die meeste van die gebreke nie, teen 68%.

Byvoorbeeld, sommige JavaScript-programmeerders maak gewoonlik die fout om na ‘n DOM-element te verwys voordat dit gelaai word, wat lei tot kodefoute.

document.getElementById ("houer") .innerHTML = "Algemene JS-foute en -foute";

As die kode hierbo in die Chrome-blaaier uitgevoer word, sal dit ‘n fout gooi, wat op die ontwikkelaarkonsole gesien kan word:

Die fout word weggegooi omdat JavaScript-kode gewoonlik uitgevoer word volgens die volgorde waarop dit op ‘n dokument verskyn. As sodanig is die blaaier nie bewus van die element waarna verwys word wanneer die kode loop nie.

Om so ‘n probleem op te los, kan u verskillende benaderings gebruik. Die eenvoudigste metode is om die voor die begin van die skripmerk te plaas. U kan ook ‘n JavaScript-biblioteek soos jQuery gebruik om seker te maak dat die DOM eers gelaai is voordat u toegang daartoe het.

document.getElementById ("houer") .innerHTML = "Algemene JS-foute en -foute";

Sintaksis-gebaseerde

Sintaksisfoute vind plaas wanneer die JavaScript-tolk versuim om ‘n sintakties verkeerde kode uit te voer. As u ‘n toepassing skep en die tolk tekens waarneem wat nie ooreenstem met die standaard-sintaksis van die JavaScript-programmeringstaal nie, sal dit ‘n fout veroorsaak. Volgens die JavaScript-foutverslagstudie is sulke foute verantwoordelik vir 12% van alle foute in die taal.

Grammatikale foute, soos ontbrekende hakies of ongeëwenaarde hakies, is die belangrikste oorsake van sintaksisfoute in JavaScript.

Byvoorbeeld, as u voorwaardelike verklarings moet gebruik om veelvuldige voorwaardes aan te spreek, kan u die hakies misluk soos benodig, wat tot sintaksisfoute kan lei.

Kom ons kyk na die volgende voorbeeld.

indien ((x > y) && (y < 77) {
// meer kode hier
}

Ja, die laaste hakies van die voorwaardelike stelling ontbreek. Het u die fout met die bostaande kode opgemerk??

Laat ons dit regstel.

indien ((x > y) && (y < 77)) {
// meer kode hier
}

Om sulke sintaksfoute te vermy, moet u tyd spandeer om die grammatikale reëls van die JavaScript-programmeringstaal te leer. Met uitgebreide koderingspraktyk kan u die grammatikale foute maklik raaksien en vermy om dit met u ontwikkelde toepassing te versend.

Onbehoorlike gebruik van ongedefinieerde / nul sleutelwoorde

Sommige JavaScript-ontwikkelaars weet nie hoe om die ongedefinieerde en nul trefwoorde korrek. In werklikheid het die studie gemeld dat die onbehoorlike gebruik van die sleutelwoorde 5% van alle JavaScript-foute uitmaak.

Die nul trefwoord is ‘n toewysingswaarde, wat gewoonlik aan ‘n veranderlike toegewys word om ‘n nie-bestaande waarde aan te dui. verbasend, nul is ook ‘n JavaScript-objek.

Hier is ‘n voorbeeld:

var codeJS = null;

console.log (codeJS);
// uitset is nul

console.log (typeof codeJS);
// uitset is objek

Aan die ander kant, ongedefinieerde dui aan dat ‘n veranderlike of enige ander eiendom wat reeds verklaar is, nie ‘n toegewese waarde het nie. Dit kan ook impliseer dat niks verklaar is nie. ongedefinieerde is ‘n tipe van homself.

Hier is ‘n voorbeeld:

var codeJS;

console.log (codeJS);
// uitset is ongedefinieerd

console.log (typeof codeJS);
// uitset is ongedefinieerd

Interessant genoeg, as die gelykheidsoperateur en die identiteitsoperateur daaraan gewoond is om die nul en ongedefinieerde sleutelwoorde, laasgenoemde beskou hulle nie as eenders nie.

console.log (nul == undefined);
// uitset is waar

console.log (nul === undefined);
// uitset is onwaar

Daarom, om die regte gebruik van die nul en ongedefinieerde sleutelwoorde kan u help om foute in u JavaScript-programme bekend te stel.

Ongedefinieerde metodes

‘N Ander algemene oorsaak van foute in JavaScript is ‘n oproep tot ‘n metode sonder om vooraf te definieer. Die UBC-navorsers het uitgevind dat hierdie fout tot 4% van alle JavaScript-foute lei.

Hier is ‘n voorbeeld:

var kodeerder = {
noem: "Peter",
ouderdom: 27,
praat () {
console.log (this.name);
}
};
coder.speakNow ();

Hier is die fout wat gesien word op die Chrome-ontwikkelaarkonsole:

Bogenoemde fout kom voor omdat die genoemde funksie, speakNow (), nie in die JavaScript-kode gedefinieër is nie.

Onbehoorlike gebruik van die opgawe staat

In JavaScript, die terugkeer stelling word gebruik om die werking van ‘n funksie te stop, sodat die waarde daarvan uitgereik kan word. As dit verkeerd gebruik word, kan die opgaafverklaring die optimale werkverrigting van toepassings benadeel. Volgens die studie lei die verkeerde gebruik van die opgawe-verklaring tot 2% van alle foute in JavaScript-toepassings.

Byvoorbeeld, sommige JavaScript-programmeerders maak gewoonlik die fout om die opgawe-verklaring verkeerd te breek.

Terwyl u ‘n JavaScript-verklaring in twee reëls kan breek en steeds die verlangde uitset kry, is die uitbreek van die opgaweverklaring ‘n ramp in u aansoek.

Hier is ‘n voorbeeld:

funksie nommer (n) {
var voeg = 5;
terug te keer;
n + voeg;
}
console.log (nommer (10));

As bogenoemde kode uitgevoer word, word ‘n ongedefinieerde fout op die Chrome-ontwikkelaarkonsole gesien:

Daarom moet u nie daarvan hou om te breek nie terugkeer stellings in u JavaScript-kode.

Afsluiting

Die JavaScript-programmeringstaal aan die kant van die kliënt het uitstekende uitgebreide vermoëns om die funksies van moderne webtoepassings te benut. As u egter nie die eienaardighede wat die taal laat werk, verstaan ​​nie, kan die werkverrigting van u toepassings vermink word.

Verder, JavaScript-ontwikkelaars benodig veelsydige instrumente om die werkverrigting van hul toepassings op te los en om foute en foute vinnig op te spoor.

Daarom kan u met ‘n uitgebreide reeks toetsinstrumente met selfvertroue die afwykings identifiseer wat die prestasie van u webwerf benadeel. Dit is wat u nodig het om u webwerfprestasie te verbeter en optimale gebruikerservaring te verkry.

Gelukkige foutvrye JavaScript-programmering!

Artikel geskryf deur 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