Wie rufe ich eine dynamisch benannte Methode in Javascript auf?

Ich arbeite daran, dynamisch JavaScript zu erstellen, das beim Erstellen in eine Webseite eingefügt wird.

Das JavaScript wird verwendet, um eine listboxbasierend auf der Auswahl in einer anderen zu füllen listbox. Wenn die Auswahl von eins listboxgeändert wird, wird ein Methodenname aufgerufen, der auf dem ausgewählten Wert von basiert listbox.

Beispielsweise:

Listbox1 enthält:

• Colours
• Shapes

Wenn Coloursausgewählt, wird eine populate_ColoursMethode aufgerufen, die eine andere auffüllt listbox.

Um meine Frage zu klären: Wie populate_Coloursrufe ich JavaScript auf?

Angenommen, die populate_ColoursMethode befindet sich im globalen Namespace, können Sie den folgenden Code verwenden, der sowohl ausnutzt, dass auf alle Objekteigenschaften zugegriffen werden kann, als ob das Objekt ein assoziatives Array wäre, als auch dass alle globalen Objekte tatsächlich Eigenschaften des windowHostobjekts sind.

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

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

Wie Triptychon hervorhebt, können Sie jede globale Bereichsfunktion aufrufen, indem Sie sie im Inhalt des Hostobjekts finden.

Eine sauberere Methode, die den globalen Namespace viel weniger verschmutzt, besteht darin, die Funktionen explizit wie folgt explizit in ein Array einzufügen:

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);

Dieses Array kann auch eine Eigenschaft eines anderen Objekts als des globalen Hostobjekts sein, was bedeutet, dass Sie effektiv Ihren eigenen Namespace erstellen können, wie dies bei vielen JS-Bibliotheken wie jQuery der Fall ist. Dies ist nützlich, um Konflikte zu reduzieren, wenn Sie mehrere separate Dienstprogrammbibliotheken auf derselben Seite einfügen und (sofern andere Teile Ihres Entwurfs dies zulassen) die Wiederverwendung des Codes auf anderen Seiten erleichtern.

Sie können auch ein Objekt wie dieses verwenden, das Sie möglicherweise sauberer finden:

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);

Beachten Sie, dass Sie mit einem Array oder einem Objekt entweder die Methode zum Festlegen oder Zugreifen auf die Funktionen verwenden und natürlich auch andere Objekte darin speichern können. Sie können die Syntax beider Methoden für nicht so dynamische Inhalte weiter reduzieren, indem Sie die JS-Literalnotation wie folgt verwenden:

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

Bearbeiten: Natürlich können Sie für größere Funktionsblöcke das Obige auf das sehr verbreitete "Modulmuster" erweitern, das eine beliebte Methode ist, um Code-Features auf organisierte Weise zu kapseln.

Ich würde empfehlen , / / NICHT für diesen Zweck zu verwenden. Gehen Sie stattdessen folgendermaßen vor: globalwindoweval

Definieren Sie alle Methoden als Eigenschaften von Handler:

var Handler={};

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

Nennen Sie es jetzt so

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

Ausgabe: Jerry

Sie können es so machen:

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

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

Innerhalb eines ServiceWorkeroder Workerdurch ersetzen windowdurch self:

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

Arbeiter haben keinen Zugriff auf das DOM, daher windowist dies eine ungültige Referenz. Die entsprechende globale Bereichskennung für diesen Zweck lautet self.

Ich würde nicht empfehlen, das Fenster zu verwenden, wie einige der anderen Antworten vermuten lassen. Verwendung thisund Umfang entsprechend.

this['yourDynamicFcnName'](arguments);

Ein weiterer guter Trick besteht darin, innerhalb verschiedener Bereiche aufzurufen und ihn für die Vererbung zu verwenden. Angenommen, Sie haben die Funktion verschachtelt und möchten Zugriff auf das globale Fensterobjekt. Sie könnten dies tun:

this['yourDynamicFcnName'].call(window, arguments);

Hallo versuch das,

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

Es wird die Parameter selbst behandeln.

Hier ist eine funktionierende und einfache Lösung, um das Vorhandensein einer Funktion zu überprüfen und diese Funktion dynamisch zu testen durch eine andere Funktion zu .

Auslöserfunktion

function runDynmicFunction(functionname){ 

    if (typeof window[functionname] == "function"  ) { //check availability

        window[functionname]("this is from the function it "); //run function and pass a parameter to it
    }
}

und Sie können die Funktion jetzt dynamisch generieren, möglicherweise mit PHP wie diesem

function runThis_func(my_Parameter){

    alert(my_Parameter +" triggerd");
}

Jetzt können Sie die Funktion mit einem dynamisch generierten Ereignis aufrufen

<?php

$name_frm_somware ="runThis_func";

echo "<input type='button' value='Button' onclick='runDynmicFunction(\"".$name_frm_somware."\");'>";

?>

Der genaue HTML-Code, den Sie benötigen, ist

<input type="button" value="Button" onclick="runDynmicFunction('runThis_func');">

Versuchen Sie es damit:

var fn_name = "Colours",
fn = eval("populate_"+fn_name);
fn(args1,argsN);