Comment transformer une chaîne de caractères en un appel de fonction JavaScript ?

Question

J'ai une chaîne comme :

settings.functionName + '(' + t.parentNode.id + ')';

que je veux traduire en appel de fonction comme ceci :

clickedOnItem(IdofParent);

Cela devra bien sûr être fait en JavaScript. Lorsque je fais une alerte sur settings.functionName + '(' + t.parentNode.id + ')'; il semble que tout soit correct. J'ai juste besoin d'appeler la fonction dans laquelle il serait traduit.

Légende :

settings.functionName = clickedOnItem

t.parentNode.id = IdofParent

Answer 1

Vu que je déteste l'évaluation, et que je suis pas seul :

var fn = window[settings.functionName];
if(typeof fn === 'function') {
    fn(t.parentNode.id);
}

Editar: En réponse au commentaire de @Mahan : Dans ce cas particulier, settings.functionName serait "clickedOnItem" . Cela permettrait, au moment de l'exécution, de traduire var fn = window[settings.functionName]; en var fn = window["clickedOnItem"] qui obtiendrait une référence à function clickedOnItem (nodeId) {} . Une fois que nous avons une référence à une fonction à l'intérieur d'une variable, nous pouvons appeler cette fonction en "appelant la variable", c'est-à-dire fn(t.parentNode.id) qui est égal à clickedOnItem(t.parentNode.id) ce qui était ce que le PO voulait.

Un exemple plus complet :

/* Somewhere: */
window.settings = {
  /* [..] Other settings */
  functionName: 'clickedOnItem'
  /* , [..] More settings */
};

/* Later */
function clickedOnItem (nodeId) {
  /* Some cool event handling code here */
}

/* Even later */
var fn = window[settings.functionName]; 
/* note that settings.functionName could also be written
   as window.settings.functionName. In this case, we use the fact that window
   is the implied scope of global variables. */
if(typeof fn === 'function') {
    fn(t.parentNode.id);
}

Answer 2

window[settings.functionName](t.parentNode.id);

Pas besoin d'un eval()

Answer 3

Voici une façon plus générique de faire la même chose, tout en supportant les scopes :

// Get function from string, with or without scopes (by Nicolas Gauthier)
window.getFunctionFromString = function(string)
{
    var scope = window;
    var scopeSplit = string.split('.');
    for (i = 0; i < scopeSplit.length - 1; i++)
    {
        scope = scope[scopeSplit[i]];

        if (scope == undefined) return;
    }

    return scope[scopeSplit[scopeSplit.length - 1]];
}

J'espère que cela pourra aider certaines personnes.

Answer 4

JavaScript a un eval qui évalue une chaîne de caractères et l'exécute en tant que code :

eval(settings.functionName + '(' + t.parentNode.id + ')');

Answer 5

Eval() est la fonction dont vous avez besoin pour le faire, mais je vous conseille d'essayer l'une de ces choses pour minimiser l'utilisation de eval. J'espère que l'une d'entre elles aura un sens pour vous.

Enregistrez la fonction

Stockez la fonction comme une fonction, et non comme une chaîne de caractères, et utilisez-la comme une fonction plus tard. C'est vous qui décidez de l'endroit où vous stockez la fonction.

var funcForLater = clickedOnItem;

// later is now
funcForLater(t.parentNode.id);

ou

someObject.funcForLater = clickedOnItem;    
// later is now    
(someObject.funcForLater)(t.parentNode.id);

Nom de la fonction de stockage

Même si vous devez stocker le nom de la fonction sous forme de chaîne, vous pouvez minimiser la complexité en faisant

(eval(settings.functionName))(t.parentNode.id);

ce qui minimise la quantité de Javascript que vous devez construire et évaluer.

Dictionnaire des manipulateurs

Placez toutes les fonctions d'action dont vous pourriez avoir besoin dans un objet, et appelez-les à la manière d'un dictionnaire en utilisant la chaîne de caractères.

// global
itemActions = { click: clickedOnItem, rightClick: rightClickedOnItem /* etc */ };

// Later...
var actionName = "click"; // Or wherever you got the action name
var actionToDo = itemActions[actionName];
actionToDo(t.parentNode.id);

(Note mineure : si au lieu de cela vous avez utilisé la syntaxe itemActions[actionName](t.parentNode.id); alors la fonction serait appelée comme une méthode de itemActions .)