ฉันจะเรียกเมธอดที่มีชื่อแบบไดนามิกใน Javascript ได้อย่างไร

ฉันกำลังดำเนินการสร้าง JavaScript แบบไดนามิกซึ่งจะแทรกลงในหน้าเว็บขณะที่กำลังสร้าง

จาวาสคริปต์จะใช้ในการเติมขึ้นอยู่กับตัวเลือกในอีกlistbox listboxเมื่อการเลือกlistboxมีการเปลี่ยนแปลงจะเรียกชื่อเมธอดตามค่าที่เลือกของlistbox.

ตัวอย่างเช่น:

Listbox1 ประกอบด้วย:

• Colours
• Shapes

หากColoursถูกเลือกแล้วมันจะเรียกpopulate_Coloursวิธีการที่ populates listboxอื่น

เพื่อชี้แจงคำถามของฉัน: ฉันจะpopulate_Coloursโทรใน JavaScript ได้อย่างไร

สมมติว่าpopulate_Coloursเมธอดอยู่ในเนมสเปซส่วนกลางคุณอาจใช้โค้ดต่อไปนี้ซึ่งใช้ประโยชน์จากทั้งสองอย่างที่คุณสมบัติอ็อบเจ็กต์ทั้งหมดอาจเข้าถึงได้ราวกับว่าอ็อบเจ็กต์เป็นอาร์เรย์ที่เชื่อมโยงกันและอ็อบเจ็กต์ส่วนกลางทั้งหมดเป็นคุณสมบัติของwindowอ็อบเจ็กต์โฮสต์

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

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

ตามที่ Triptych ชี้ให้เห็นคุณสามารถเรียกใช้ฟังก์ชันขอบเขตส่วนกลางใด ๆ โดยค้นหาในเนื้อหาของวัตถุโฮสต์

วิธีการที่สะอาดกว่าซึ่งก่อให้เกิดมลพิษต่อเนมสเปซทั่วโลกน้อยกว่ามากคือการใส่ฟังก์ชันลงในอาร์เรย์โดยตรงดังนี้:

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

อาร์เรย์นี้อาจเป็นคุณสมบัติของออบเจ็กต์บางอย่างนอกเหนือจากอ็อบเจ็กต์โฮสต์ส่วนกลางเช่นกันซึ่งหมายความว่าคุณสามารถสร้างเนมสเปซของคุณเองได้อย่างมีประสิทธิภาพเหมือนกับไลบรารี JS จำนวนมากเช่น jQuery สิ่งนี้มีประโยชน์ในการลดความขัดแย้งหาก / เมื่อคุณรวมไลบรารียูทิลิตี้แยกกันหลายไลบรารีไว้ในหน้าเดียวกันและ (ส่วนอื่น ๆ ของการอนุญาตการออกแบบของคุณ) ช่วยให้สามารถใช้โค้ดซ้ำในหน้าอื่น ๆ ได้ง่ายขึ้น

คุณยังสามารถใช้วัตถุเช่นนี้ซึ่งคุณอาจพบว่าสะอาดกว่า:

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

โปรดทราบว่าด้วยอาร์เรย์หรือออบเจ็กต์คุณสามารถใช้วิธีการตั้งค่าหรือเข้าถึงฟังก์ชั่นใดก็ได้และแน่นอนว่าสามารถจัดเก็บอ็อบเจ็กต์อื่น ๆ ไว้ในนั้นด้วย คุณสามารถลดไวยากรณ์ของวิธีใดวิธีหนึ่งสำหรับเนื้อหาที่ไม่ใช่ไดนามิกนั้นได้โดยใช้สัญกรณ์ตัวอักษร JS ดังนี้:

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

แก้ไข: แน่นอนว่าสำหรับบล็อกการทำงานที่ใหญ่ขึ้นคุณสามารถขยายข้างต้นเป็น "รูปแบบโมดูล" ทั่วไปซึ่งเป็นวิธีที่นิยมในการห่อหุ้มคุณลักษณะของโค้ดในลักษณะที่เป็นระเบียบ

ฉันไม่แนะนำให้ใช้global/ window/ evalเพื่อจุดประสงค์นี้
ให้ทำวิธีนี้แทน:

กำหนดวิธีการทั้งหมดเป็นคุณสมบัติของ Handler:

var Handler={};

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

เดี๋ยวนี้เรียกแบบนี้

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

เอาท์พุต:เจอร์รี่

กรณีเมื่อนำเข้าฟังก์ชันจากไฟล์อื่น

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

const Handler= {
  func1,
  func2
};

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

คุณสามารถทำได้ดังนี้:

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

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

ภายในServiceWorkerหรือWorkerแทนที่windowด้วยself:

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

คนงานไม่มีสิทธิ์เข้าถึง DOM ดังนั้นจึงwindowเป็นการอ้างอิงที่ไม่ถูกต้อง selfเทียบเท่าระบุขอบเขตทั่วโลกเพื่อวัตถุประสงค์นี้คือ

ฉันไม่แนะนำให้ใช้หน้าต่างตามที่คำตอบอื่น ๆ แนะนำ ใช้thisและขอบเขตตามนั้น

this['yourDynamicFcnName'](arguments);

เคล็ดลับอีกอย่างหนึ่งคือการโทรภายในขอบเขตที่แตกต่างกันและใช้เพื่อการสืบทอด สมมติว่าคุณได้ซ้อนฟังก์ชันและต้องการเข้าถึงวัตถุหน้าต่างส่วนกลาง คุณสามารถทำได้:

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

สวัสดีลองสิ่งนี้

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

มันจะจัดการกับพารามิเตอร์เอง

นี่คือวิธีแก้ปัญหาที่ใช้งานง่ายและใช้งานง่ายสำหรับการตรวจสอบการมีอยู่ของฟังก์ชันและการตรวจสอบฟังก์ชันนั้นแบบไดนามิกโดยฟังก์ชันอื่น

ฟังก์ชันทริกเกอร์

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

และตอนนี้คุณสามารถสร้างฟังก์ชันแบบไดนามิกได้แล้วโดยใช้ php เช่นนี้

function runThis_func(my_Parameter){

    alert(my_Parameter +" triggerd");
}

ตอนนี้คุณสามารถเรียกใช้ฟังก์ชันโดยใช้เหตุการณ์ที่สร้างขึ้นแบบไดนามิก

<?php

$name_frm_somware ="runThis_func";

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

?>

โค้ด HTML ที่คุณต้องการคือ

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

ลองใช้สิ่งนี้:

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