[JS] Problème de portée avec le mot-clef const

Le problème exposé dans ce sujet a été résolu.

Salut !

Je développe une animation graphique en JS où j’ai besoin d’un code comme ci-dessous :

'use strict';

// Récupération des dimensions visibles de l'écran
if (window.hasOwnProperty('innerWidth'))
{
    const max_width   =  window.innerWidth  - 65;
    const max_height  =  window.innerHeight - 35;
}
else
{
    throw 'Technologie incompatible';
}

// Erreur : max_width n'est pas défini
console.log(max_width);

Le souci, c’est que la portée de const est limitée au if.
J’ai pourtant besoin d’utiliser le mot-clef const pour optimiser au max l’animation qui tourne à 60 fps.
Toute optimisation est donc la bienvenue.

J’utilise cette condition car l’animation doit pouvoir tourner sur tous les navigateurs, IE inclus.
Peut-être que cette condition est inutile, dans ce cas comment le justifier ?

+0 -0

[HS]J’allais te souhaiter une bonne chance pour tomber sur les : throw 'Technologie incompatible'; mais je n’avais pas vu que ce n’était supportait qu'à partir d’IE 9 le support chez microsoft.[/HS]

const max_width   = window.innerWidth - 65;
const max_height  = window.innerHeight - 35;

if (isNaN(max_width) || isNaN(max_height))
    throw 'Technologie incompatible';

Avec ma solution, je ne répond pas à ton problème de const dans if mais pour aller plus loin dans ma réponse :

Tu pourrais aussi faire :

const nombre = (function(a, b) {
    //ton code

    return a + b;
})(300, 12)

console.log("A" + nombre * -1); // A-312
+0 -0

Je suis vraiment perplexe quant à l’efficacité de cette optimisation, et c’est probablement le genre de choses que tu pourrais plutôt calculer en dehors de ton requestAnimationFrame. Cela étant, tu peux sûrement faire quelque chose comme ça:

if(!window.hasOwnProperty('innerWidth')) {
  throw 'Technologie incompatible!';
}
const max_width   =  window.innerWidth  - 65;
const max_height  =  window.innerHeight - 35;

De plus, si tu fais ce calcul dans un requestAnimationFrame, ton throw ne sera jamais appelé. ;-)

+1 -0

Merci pour les réponses ! :)

Je me sens un peu bête de ne pas avoir pensé à vos solutions, ça me paraît logique à présent. :-°

Pour répondre à @dab, voici la structure générale de mon animation (jeu.js) :

'use strict';

if (!window.hasOwnProperty('innerWidth'))
{
    throw 'Technologie incompatible';
}

const max_width   =  window.innerWidth  - 65;
const max_height  =  window.innerHeight - 35;

// Beaucoup de joueurs à gérer
const n_joueurs = 20;

//...


function Personnage()
{
    this.pv = 300;
    //...
}


var persos;

document.addEventListener('DOMContentLoaded', () =>
{
    persos = Array(n_joueurs).fill(0).map(e => new Personnage());

    //...

    window.requestAnimationFrame(deplacer);
});



function deplacer()
{
    persos.forEach(perso =>
    {
        if (perso.y >= max_height)
        {
            perso.remonter();
        }
        else if (...)
        {
            //...
        }

        //... (gestion graphique)
    });

    window.requestAnimationFrame(deplacer);
}

En fait, si je tiens tant à garder const, c’est parce qu’il me semble avoir lu une fois pour le langage C (ou C++) qu’utiliser le mot-clef const permettait parfois au compilateur d’optimiser le code assembleur. Du coup, je me dit que ça doit être plus ou moins le même principe en Javascript. Dans ce code (qui lag déjà un peu), je pense que chaque petite optimisation a son importance.

Qu’en penses-tu ?

+0 -0

C’est peut-être vrai, mais sûrement pas à cause d’une analogie au C.

Je peux me tromper, mais à mon avis, la chose qui te ralentira sera bien plus probablement le temps d’affichage des éléments graphiques, et pas une petite condition dans la boucle.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte