Comprendre la variabilité de la sortie JavaScript entre les plates-formes

Introduction

JavaScript est l’un des langages de programmation les plus polyvalents et les plus utilisés, alimentant tout, du simple applications Web aux systèmes complexes côté serveur. Cependant, les développeurs rencontrent souvent des incohérences dans le comportement de JavaScript sur différentes plates-formes. Ce blog se penchera sur ces écarts, en se concentrant sur les différences de sortie que vous pouvez rencontrer entre les navigateurs, Noeud.jset d’autres environnements JavaScript.

Différents navigateurs, différentes sorties

JavaScript est exécuté dans différents navigateurs, chacun implémentant la norme ECMAScript avec de légères variations. Ces différences peuvent affecter :

Manipulation du DOM : Chaque navigateur peut afficher le DOM différemment, ce qui entraîne des résultats différents lors de la modification d’éléments.
Gestion des événements : La propagation et le comportement des événements peuvent varier d’un navigateur à l’autre, en particulier avec la prise en charge héritée.
Exemple:

document.getElementById('demo').innerHTML = navigator.userAgent;

Selon le navigateur (Chrome, Firefox, Safari, etc.), ce code peut renvoyer une chaîne d’agent utilisateur différente.

Différences de version

Les navigateurs prennent en charge diverses versions d’ECMAScript. Les fonctionnalités d’ES6 ou version ultérieure peuvent ne pas être entièrement prises en charge dans les anciens navigateurs, ce qui entraîne un comportement inattendu.

Example:
let promise = new Promise((resolve, reject) => {

resolve("Success");

});

promise.then((result) => console.log(result));

Dans un navigateur plus ancien qui ne prend pas en charge les promesses, le code ci-dessus générera une erreur.

Différences dans les objets globaux

Node.js et les navigateurs diffèrent considérablement par leurs objets globaux. Dans un navigateur, vous pouvez interagir avec l’objet window, tandis que Node.js utilise global.

Example:

console.log(window); // In the browser

console.log(global); // In Node.js

V8 contre SpiderMonkey contre Chakra

Différentes plates-formes utilisent divers moteurs JavaScript : V8 (Chrome et Node.js), SpiderMonkey (Firefox) et Chakra (anciennes versions d’Edge). Ces moteurs peuvent implémenter des fonctionnalités JavaScript avec différentes optimisations, entraînant des écarts de performances.

Variabilité des performances : Le même morceau de code peut s’exécuter à des vitesses différentes en fonction des optimisations du moteur. Par exemple, la manière dont le code asynchrone est géré peut différer, ce qui a un impact sur les performances globales des applications.

Détection de fonctionnalités pour querySelector

Concept : les navigateurs peuvent implémenter certaines fonctionnalités différemment, ou les anciennes versions peuvent ne pas les prendre en charge du tout. Il est essentiel de vérifier la disponibilité des fonctionnalités avant de les utiliser.

Input:

if (document.querySelector) {

console.log("querySelector is supported!");

// Using querySelector to manipulate DOM

document.body.innerHTML += "<div>New Element</div>";

} else {

console.log("querySelector is NOT supported.");

}

Sortir:

Navigateur moderne : querySelector est pris en charge !
Ancien navigateur (par exemple, IE8) : querySelector n’est PAS pris en charge.

Bloquer la portée avec let

Les fonctionnalités ECMAScript ne sont pas prises en charge de manière uniforme sur tous les navigateurs. Par exemple, les mots-clés let et const introduits dans ES6 peuvent ne pas fonctionner dans les anciens navigateurs.

Exemple: Bloquer la portée avec let
Saisir:

for (var i = 0; i < 3; i++) {

let blockScoped = i;

console.log(blockScoped); // Should log 0, 1, 2

}

console.log(i); // Should log 3

 

Sortir:

Navigateur moderne : Journaux 0, 1, 2, puis 3.
Ancien navigateur : Peut lancer une SyntaxError lors de l’utilisation de let.

Exemple en temps réel

let x;
function testHoisting() {
    console.log(x); 
    var x = 5;
    console.log(x);
}
console.log(x)
testHoisting();

Explication

• Dans le navigateur : La déclaration var est hissée en haut de la portée de la fonction, mais pas l’affectation. Par conséquent, lorsque vous enregistrez x, il n’est pas défini car la variable a été déclarée mais aucune valeur n’a encore été attribuée.
• Dans d’autres J : Selon la version ou les paramètres du mode strict, il peut se comporter différemment et générer une ReferenceError. L’environnement Node.js peut avoir des règles plus strictes concernant l’accès aux variables avant leur initialisation.

ce comportement de mot clé

console.log(this.values); 


function checkValues() {
    console.log(this.values); 
}
checkValues(); 

const obj = {
    values: 'I am a value',
    check: function() {
        console.log(this.values); 
    }
};

obj.check(); // Call the method of the object

Accès this.values dans le contexte mondial, ils se comportent différemment selon l’environnement.
Dans les deux environnements, au sein d’une fonction standard, this n’a pas de propriété value sauf si elle est définie explicitement.
Dans une méthode objet, this fait correctement référence à l’objet et la propriété values ​​est accessible comme prévu.

Conclusion

En étant conscient de ces comportements spécifiques à la plateforme et en utilisant les bonnes stratégies, vous pouvez créer des applications JavaScript plus robustes et plus fiables. Bon codage !

VOUS TROUVEZ CELA UTILE ? PARTAGEZ-LE