5 causes habituals dels errors de JavaScript (i com evitar-los)

JavaScript (JS) és un llenguatge de programació omnipresent, flexible i àmpliament popular, tot i que també és propens a errors i errors que fan que la majoria de desenvolupadors s’aixecin i s’estenguin..


JS s’utilitza àmpliament per alimentar la interacció de l’usuari en el costat del client de la majoria d’aplicacions web. Sense JavaScript, potser les coses del web podrien ser sense vida i estimulants. Tot i això, els fluixos i fluixos del llenguatge de vegades fan que els desenvolupadors tinguin una relació amorosa i odi amb ell.

Les fallades de JavaScript provoquen que les aplicacions produeixin resultats inesperats i perjudiquin l’experiència de l’usuari. Una recent estudiar per la Universitat de Colúmbia Britànica (UBC) va buscar esbrinar les causes i l’impacte dels errors i els errors de JavaScript. Els resultats de l’estudi van descobrir alguns patrons comuns que dificulten el rendiment dels programes JS.

A continuació, es mostra un gràfic que mostra el que van descobrir els investigadors:

En aquesta publicació al bloc, il·lustrarem algunes de les causes habituals de les falles de JavaScript destacades a l’estudi (més d’altres que trobem diàriament) i com fer que les aplicacions siguin menys propenses a fallar.

Relacionat amb les DOM

El Model Object Object (Document Object Model) té un paper fonamental en la interactivitat dels llocs web. La interfície DOM permet manipular el contingut, l’estil i l’estructura d’una pàgina web. La interacció de pàgines web en format HTML (o manipular el DOM) és la raó per la qual es va publicar el llenguatge de programació de JavaScript.

Així, fins i tot amb la introducció de tecnologies JavaScript de backend com Node.js, treballar amb el DOM encara constitueix una part important del que fa el llenguatge. Per tant, el DOM és una via important per a la introducció d’errors i errors en les aplicacions JavaScript.

No és estrany que l’estudi de l’informe d’errors de JavaScript hagi assabentat que els problemes relacionats amb les DOM són els responsables de la majoria dels defectes, en un 68%.

Per exemple, alguns programadors de JavaScript solen cometre l’error de fer referència a un element DOM abans de carregar-lo, provocant errors de codi.

document.getElementById ("contenidor") .innerHTML = "Errors i errors comuns de la JS";

Si el codi anterior s’executa al navegador Chrome, es produirà un error que es pot veure a la consola de desenvolupadors:

L’error es llença perquè el codi JavaScript normalment s’executa d’acord amb l’ordre que apareix en un document. Com a tal, el navegador desconeix l’element de referència quan s’executa el codi.

Per resoldre aquest problema, podeu utilitzar diversos enfocaments. El mètode més senzill és col·locar abans l’inici de l’etiqueta de script. També podeu utilitzar una biblioteca JavaScript com jQuery per assegurar-vos que primer es carrega el DOM abans que es pugui accedir.

document.getElementById ("contenidor") .innerHTML = "Errors i errors comuns de la JS";

Basat en la sintaxi

Els errors de sintaxi es produeixen quan l’intèrpret de JavaScript no aconsegueix executar un codi incorrecte. Si es crea una aplicació i l’intèrpret observa fitxes que no coincideixen amb la sintaxi estàndard del llenguatge de programació de JavaScript, es llançarà un error. Segons l’estudi de l’informe d’errors de JavaScript, aquests errors són responsables del 12% de tots els errors de l’idioma.

Els errors gramaticals, com els parèntesis que falten o els claudàtors no combinats, són les causes principals dels errors de sintaxi a JavaScript..

Per exemple, quan heu d’utilitzar sentències condicionals per fer front a diverses condicions, és possible que us proporcioneu els parèntesis tal com es requereixi, provocant defectes de sintaxi..

Vegem l’exemple següent.

if ((x > i) && (i < 77) {
// més codi aquí
}

Sí, falta el darrer parèntesi de l’afirmació condicional. Heu notat l’error amb el codi anterior?

Corregim.

if ((x > i) && (i < 77)) {
// més codi aquí
}

Per evitar aquests errors de sintaxi, haureu de dedicar temps a aprendre les regles gramaticals del llenguatge de programació de JavaScript. Amb una àmplia pràctica de codificació, podeu detectar els errors gramaticals fàcilment i evitar enviar-los amb l’aplicació desenvolupada.

Ús incorrecte de paraules clau no definides / nul·les

Alguns desenvolupadors de JavaScript no saben com utilitzar-los sense definir i nul paraules clau correctament. De fet, l’estudi va informar que un ús indegut de les paraules clau representa el 5% de tots els errors de JavaScript.

El nul la paraula clau és un valor d’assignació, que normalment s’assigna a una variable per denotar un valor inexistent. Sorprenentment, nul és també un objecte JavaScript.

Aquí teniu un exemple:

codi varJS = null;

console.log (codeJS);
// la sortida és nul·la

console.log (tipus de codiJS);
// la sortida és objecte

Per altra banda, sense definir indica que una variable o qualsevol altra propietat, que ja s’ha declarat, no té un valor assignat. També pot implicar que no s’hagi declarat res. sense definir és un tipus de si mateix.

Aquí teniu un exemple:

codi varJS;

console.log (codeJS);
// la sortida no està definida

console.log (tipus de codiJS);
// la sortida no està definida

Curiosament, si l’operador d’igualtat i l’operador d’identitat solen comparar nul i sense definir aquestes paraules clau, aquesta darrera no les considera iguals.

console.log (null == indefinit);
// la sortida és certa

console.log (null === indefinit);
// la sortida és falsa

Per tant, coneixent l’ús correcte de la web nul i sense definir les paraules clau us poden ajudar a evitar la introducció d’errors als vostres programes JavaScript.

Mètodes no definits

Una altra causa freqüent d’errors en JavaScript és fer una trucada a un mètode sense proporcionar la seva definició prèvia. Els investigadors de la UBC van saber que aquest error comporta un 4% de tots els errors de JavaScript.

Aquí teniu un exemple:

var coder = {
nom: "Pere",
edat: 27,
parlar () {
console.log (this.name);
}
};
coder.speakNow ();

Aquí hi ha l’error que es veu a la consola del desenvolupador de Chrome:

L’error anterior es produeix perquè la funció anomenada, talkNow (), no s’ha definit al codi JavaScript.

Ús incorrecte de la declaració de devolució

A JavaScript, el tornar instrucció s’utilitza per aturar l’execució d’una funció de manera que es pugui treure el seu valor. Si s’utilitza erròniament, la declaració de retorn pot deteriorar el rendiment òptim de les aplicacions. Segons l’estudi, l’ús incorrecte de la declaració de retorn comporta un 2% de tots els errors en les aplicacions JavaScript.

Per exemple, alguns programadors de JavaScript solen cometre l’error de trencar la instrucció de retorn de forma incorrecta.

Si bé podeu desglossar una instrucció JavaScript en dues línies i obtenir la sortida necessària, si trenqueu la declaració de devolució, convidem a desastre a la vostra aplicació.

Aquí teniu un exemple:

número de funció (n) {
var add = 5;
retorn;
n + afegir;
}
console.log (número (10));

Quan s’executa el codi anterior, es mostra un error no definit a la consola de desenvolupadors de Chrome:

Per tant, hauria de desistir de trencar-se tornar instruccions al vostre codi JavaScript.

Conclusió

El llenguatge de programació JavaScript de costat del client ofereix excel·lents capacitats per alimentar les funcionalitats de les aplicacions web modernes. Tanmateix, si no enteneu els elements que facin funcionar l’idioma, es pot deixar de funcionar el rendiment de les vostres aplicacions.

a més, Desenvolupadors de JavaScript requereixen eines versàtils per solucionar el rendiment de les seves aplicacions i detectar errors i errors ràpidament.

Per tant, amb un conjunt complet d’eines de prova, podeu identificar amb seguretat les anomalies que dificulten el rendiment del vostre lloc web. És el que necessiteu per millorar el rendiment del vostre lloc i aconseguir una experiència d’usuari òptima.

Programació de JavaScript sense errors feliç!

Article escrit per 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