Comment appeler une méthode nommée dynamiquement en Javascript ?

Question

Je travaille sur la création dynamique de JavaScript qui sera inséré dans une page web au fur et à mesure de sa construction.

Le JavaScript sera utilisé pour remplir un listbox sur la base de la sélection dans un autre listbox . Lorsque la sélection d'un listbox est modifié, il appellera le nom d'une méthode en fonction de la valeur sélectionnée dans le champ listbox .

Par exemple :

Listbox1 contient :

• Colours
• Shapes

Si Colours est sélectionné, il appellera un populate_Colours qui remplit une autre méthode listbox .

Pour clarifier ma question : Comment faire pour que populate_Colours en JavaScript ?

Answer 1

En supposant que le populate_Colours se trouve dans l'espace de noms global, vous pouvez utiliser le code suivant, qui exploite à la fois le fait que toutes les propriétés de l'objet sont accessibles comme si l'objet était un tableau associatif, et que tous les objets globaux sont en fait des propriétés de l'espace de noms global. window objet de l'hôte.

var method_name = "Colours";
var method_prefix = "populate_";

// Call function:
window[method_prefix + method_name](arg1, arg2);

Answer 2

Comme le souligne Triptych, vous pouvez appeler n'importe quelle fonction de portée globale en la trouvant dans le contenu de l'objet hôte.

Une méthode plus propre, qui pollue beaucoup moins l'espace de noms global, consiste à placer explicitement les fonctions dans un tableau, comme suit :

var dyn_functions = [];
dyn_functions['populate_Colours'] = function (arg1, arg2) { 
                // function body
           };
dyn_functions['populate_Shapes'] = function (arg1, arg2) { 
                // function body
           };
// calling one of the functions
var result = dyn_functions['populate_Shapes'](1, 2);
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions.populate_Shapes(1, 2);

Ce tableau peut également être une propriété d'un objet autre que l'objet hôte global, ce qui signifie que vous pouvez effectivement créer votre propre espace de noms, comme le font de nombreuses bibliothèques JS telles que jQuery. Cela permet de réduire les conflits lorsque vous incluez plusieurs bibliothèques utilitaires distinctes dans la même page et (si d'autres éléments de votre conception le permettent) de faciliter la réutilisation du code dans d'autres pages.

Vous pouvez également utiliser un objet comme celui-ci, ce qui vous semblera peut-être plus propre :

var dyn_functions = {};
dyn_functions.populate_Colours = function (arg1, arg2) { 
                // function body
           };
dyn_functions['populate_Shapes'] = function (arg1, arg2) { 
                // function body
           };
// calling one of the functions
var result = dyn_functions.populate_Shapes(1, 2);
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions['populate_Shapes'](1, 2);

Notez qu'avec un tableau ou un objet, vous pouvez utiliser l'une ou l'autre méthode pour définir les fonctions ou y accéder, et vous pouvez bien sûr y stocker d'autres objets. Vous pouvez encore réduire la syntaxe de l'une ou l'autre méthode pour un contenu qui n'est pas très dynamique en utilisant la notation littérale JS comme suit :

var dyn_functions = {
           populate_Colours:function (arg1, arg2) { 
                // function body
           };
         , populate_Shapes:function (arg1, arg2) { 
                // function body
           };
};

Modification : bien entendu, pour les blocs de fonctionnalités plus importants, vous pouvez étendre ce qui précède au "modèle de module" très courant, qui est un moyen populaire d'encapsuler les caractéristiques du code d'une manière organisée.

Answer 3

Je recommande PAS à utiliser global / window / eval à cette fin.
Au lieu de cela, procédez de la manière suivante :

définir toutes les méthodes comme des propriétés du gestionnaire :

var Handler={};

Handler.application_run = function (name) {
console.log(name)
}

Appelez-le maintenant comme suit

var somefunc = "application_run";
Handler[somefunc]('jerry');

Salida: jerry

---

Cas d'importation de fonctions à partir de différents fichiers

import { func1, func2 } from "../utility";

const Handler= {
  func1,
  func2
};

Handler["func1"]("sic mundus");
Handler["func2"]("creatus est");

Answer 4

Vous pouvez procéder comme suit :

function MyClass() {
    this.abc = function() {
        alert("abc");
    }
}

var myObject = new MyClass();
myObject["abc"]();

Answer 5

Dans un délai de ServiceWorker o Worker , remplacer window con self :

self[method_prefix + method_name](arg1, arg2);

Les travailleurs n'ont pas accès au DOM, donc window est une référence non valide. L'identifiant de portée globale équivalent à cette fin est self .