3
votes

Utiliser des objets javascript comme "magasin de fonctions" et les appeler dynamiquement?

Pensez à quelque chose comme ceci:

const keyAction = {
    a() {
        console.log("You've pressed 'a'");
    },
    b() {
        console.log("You've pressed 'b'");
    },
    c() {
        console.log("You've pressed 'c'");
    }
}

document.addEventListener('keydown', e => keyAction[e.key]());

Est-ce une mauvaise pratique? Y a-t-il une raison de ne pas le faire de cette façon?

javascript ecmascript-6

5 commentaires

pourquoi créer 3 fonctions? créez 1 et utilisez e.key à l'intérieur

Double possible: stackoverflow.com/ questions / 8902687 /…

@Justcode et si, si ces fonctions ont une implémentation différente

@brk comme? nous pouvons appeler une autre fonction à l'intérieur d'un. oui je suis d'accord avec rien de mal avec celui-ci aussi

Absolument rien de mal à le faire de cette façon. N'oubliez pas de vérifier que keyAction [e.key] n'est pas indéfini avant de l'appeler.

3 Réponses :

3
votes

C'est une pratique courante, car certaines personnes ont tendance à utiliser des objets pour simuler des espaces de noms à partir d'autres langues. Je pense qu'il n'y a rien de mal à cela, tant que vous comprenez les pièges que cette approche peut créer. Par exemple, vous devez garder à l'esprit ce qui arrive à ceci lorsque vous passez ces fonctions comme paramètres (regardez l'exemple ci-dessous):

document.addEventListener('keydown', e => {
    if (typeof keyAction[e.key] === 'function') {
        keyAction[e.key]();
    }
});

Aussi, comme indiqué par @ Nick Ovchinnikov, dans votre exemple spécifique, il y a un autre écueil. Vous devez vous assurer que chaque fois qu'un bouton est enfoncé, l'environnement n'essaiera pas d'appeler une fonction qui n'existe pas - sinon vous risquez de rencontrer une erreur. Donc, finalement, votre liaison de gestionnaire devrait ressembler à ceci:

const store = {
    a() {
        this.b();
    },
    b() {
        console.log("It works!");
    }
}

store.a();  // Logs "It works"
setTimeout(store.a, 10) // Error: this.b is not a function

2 commentaires

Merci pour l'explication. La réponse de @Nick Ovchinnikov contient également un piège important avec mon idée. Pouvez-vous s'il vous plaît l'inclure dans votre réponse afin que je puisse l'accepter?

Sûr! Cela a été noté. Merci beaucoup!

0
votes

Utiliser un objet comme magasin de fonctions n'est pas une mauvaise idée. Il est facile à comprendre, facile à entretenir et rapide d’accès (grâce au système de hashmap) . Cela vous permet également d'effectuer un traitement sur vos données par rapport à une chose if / else if / ... - par exemple, faire une boucle ... ect

En fonction de ce que vous essayez de faire, cela peut être une bonne chose help.

Essayez d'éviter de recréer l'objet à chaque fois que vous appelez la fonction tho. Construisez-le une fois et réutilisez-le.

<div class="ex" onclick="clickFunc('a')">
  A
</div>

<div class="ex" onclick="clickFunc('b')">
  B
</div>

.ex {
  background-color: #444444;
  color: white;
  height: 5em;
  width: 5em;
  margin: 1em;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

const keyAction = {
  a: () => {
    console.log("You've pressed 'a'");
  },

  b: () => {
    console.log("You've pressed 'b'");
  },
};

function clickFunc(key) {
  keyAction[key]();
}

0 commentaires

2
votes

Vous avez un problème, lorsque vous appuyez sur une touche que vous n'avez pas manipulée, vous verrez Erreur: keyAction [e.key] n'est pas une fonction

if (typeof keyAction[e.key] === 'function') {
    return keyAction[e.key]()
}

console.log('You pressed a some button')

Javascript est un langage dynamique, bien sûr, dans certains cas, c'est très bien. Mais pas besoin d'abuser, car vous pourriez perdre le contrôle plus rapidement que vous ne pouvez l'imaginer

0 commentaires