web-dev-qa-db-fra.com

Comment appeler une méthode à nom dynamique en Javascript?

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 une liste en fonction de la sélection dans une autre liste. Lorsque la sélection d'une zone de liste est modifiée, un nom de méthode est appelé en fonction de la valeur sélectionnée de la zone de liste.

Par exemple:

Listbox1 contient:

Couleurs
Formes

Si 'Couleurs' est sélectionné, il appellera une méthode "populate_Colours" qui remplit une autre liste.
Pour clarifier ma question: comment puis-je effectuer cet appel "Populate_Colours" en Javascript?

javascriptdynamicmethods
91
Chris B

En supposant que la méthode 'populate_Colours' se trouve dans l'espace de noms global, vous pouvez utiliser le code suivant, qui exploite le fait que toutes les propriétés d'objet sont accessibles comme s'il s'agissait d'un tableau associatif et que tous les objets globaux sont en réalité des propriétés du window Objet hôte.

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

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

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

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

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 créer efficacement votre propre espace de nom, comme le font de nombreuses bibliothèques JS telles que jQuery. Ceci est utile pour réduire les conflits si/lorsque vous incluez plusieurs bibliothèques d'utilitaires distinctes dans la même page et que (les autres parties de votre conception le permettent), il est plus facile de réutiliser le code dans d'autres pages.

Vous pouvez également utiliser un objet comme ceci, que vous pourriez trouver 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 des méthodes de paramétrage ou d'accès aux fonctions, et bien sûr y stocker d'autres objets. Vous pouvez réduire davantage la syntaxe de l'une ou l'autre méthode pour la constante qui n'est pas synamique en utilisant la notation littérale JS comme ceci:

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

Edit: bien sûr, pour les blocs de fonctionnalités plus importants, vous pouvez développer ce qui précède pour créer un "modèle de module" très courant, qui est un moyen courant d'encapsuler les fonctionnalités de code de manière organisée.

34
David Spillett

Je recommanderais ET NON d'utiliser global/window/eval à cette fin.
Au lieu de cela, procédez comme suit:

définir toutes les méthodes en tant que propriétés de Handler:

var Handler={};

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

Maintenant, appelez comme ça

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

Sortie: Jerry

16
JerryGoyal

vous pouvez le faire comme ça:

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

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

Dans un ServiceWorker ou Worker, remplacez window par 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'identificateur global équivalent à cette fin est self.

2
OXiGEN

Salut essayez ceci,

 var callback_function = new Function(functionName);
 callback_function();

il gérera les paramètres lui-même.

1
mathi