Bagaimana cara memanggil metode bernama dinamis di Javascript?

Saya sedang mengerjakan secara dinamis membuat beberapa JavaScript yang akan dimasukkan ke dalam halaman web saat sedang dibuat.

JavaScript akan digunakan untuk mengisi listboxberdasarkan pilihan di tempat lain listbox. Ketika pemilihan salah satu listboxdiubah, itu akan memanggil nama metode berdasarkan nilai yang dipilih dari listbox.

Sebagai contoh:

Listbox1 mengandung:

• Colours
• Shapes

Jika Coloursdipilih maka itu akan memanggil populate_Coloursmetode yang mengisi yang lain listbox.

Untuk memperjelas pertanyaan saya: Bagaimana cara melakukan populate_Colourspanggilan itu di JavaScript?

Dengan asumsi populate_Coloursmetode ini dalam namespace global, Anda dapat menggunakan kode berikut, yang mengeksploitasi bahwa semua properti objek dapat diakses seolah-olah objek adalah array asosiatif, dan bahwa semua objek global sebenarnya adalah properti windowobjek host.

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

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

Seperti yang ditunjukkan Triptych, Anda dapat memanggil fungsi cakupan global apa pun dengan menemukannya di konten objek host.

Metode yang lebih bersih, yang mencemari namespace global jauh lebih sedikit, adalah dengan secara eksplisit meletakkan fungsi ke dalam array secara langsung seperti:

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

Array ini juga bisa menjadi properti dari beberapa objek selain objek host global yang juga berarti Anda dapat secara efektif membuat namespace Anda sendiri seperti yang dilakukan oleh banyak library JS seperti jQuery. Ini berguna untuk mengurangi konflik jika / saat Anda menyertakan beberapa pustaka utilitas terpisah di halaman yang sama, dan (bagian lain dari desain Anda mengizinkan) dapat mempermudah penggunaan kembali kode di halaman lain.

Anda juga bisa menggunakan objek seperti itu, yang mungkin Anda temukan lebih bersih:

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

Perhatikan bahwa dengan array atau objek, Anda dapat menggunakan salah satu metode pengaturan atau mengakses fungsi, dan tentu saja dapat menyimpan objek lain di sana juga. Anda selanjutnya dapat mengurangi sintaks dari salah satu metode untuk konten yang tidak terlalu dinamis dengan menggunakan notasi literal JS seperti ini:

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

Sunting: tentu saja untuk blok fungsionalitas yang lebih besar Anda dapat memperluas di atas ke "pola modul" yang sangat umum yang merupakan cara populer untuk merangkum fitur kode secara terorganisir.

Saya akan merekomendasikan untuk TIDAK menggunakan global/ window/ evaluntuk tujuan ini.
Sebaliknya, lakukan dengan cara ini:

mendefinisikan semua metode sebagai properti Handler:

var Handler={};

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

Sekarang sebut saja seperti ini

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

Hasil keluaran: jerigen

Anda bisa melakukannya seperti ini:

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

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

Di dalam ServiceWorkeratau Worker, ganti windowdengan self:

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

Pekerja tidak memiliki akses ke DOM, oleh karena windowitu referensi tidak valid. Pengenal cakupan global yang setara untuk tujuan ini adalah self.

Saya tidak akan merekomendasikan menggunakan jendela seperti yang disarankan beberapa jawaban lain. Gunakan thisdan ruang lingkup yang sesuai.

this['yourDynamicFcnName'](arguments);

Trik rapi lainnya adalah memanggil dalam cakupan yang berbeda dan menggunakannya untuk warisan. Katakanlah Anda telah menumpuk fungsi dan menginginkan akses ke objek jendela global. Anda bisa melakukan ini:

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

Hai coba ini,

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

itu akan menangani parameter itu sendiri.

Berikut adalah solusi yang berfungsi dan sederhana untuk memeriksa keberadaan suatu fungsi dan triaging fungsi tersebut secara dinamis oleh fungsi lain;

Fungsi pemicu

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
    }
}

dan sekarang Anda dapat menghasilkan fungsi secara dinamis mungkin menggunakan php seperti ini

function runThis_func(my_Parameter){

    alert(my_Parameter +" triggerd");
}

sekarang Anda dapat memanggil fungsi tersebut menggunakan peristiwa yang dibuat secara dinamis

<?php

$name_frm_somware ="runThis_func";

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

?>

kode HTML yang Anda butuhkan adalah

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

Coba dengan ini:

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