javascript - 如何通过其名称作为字符串来调用函数？

Question

所以我知道这个问题已经被问过几次了，但我找不到适合我的解决方案，而且我不明白这是如何正常工作的。

这里是涉及的函数:

import form from "./form"; //return some html
function changePage(e){
    console.log(e.target.dataset.component) // equal "form"
    //loadComponent(form) => is working 
    loadComponent(eval(e.target.dataset.component)) // => form is not defined    
}

function loadComponent(name)
{
    const wtv = name()
    document.getElementById('app').append(wtv)
}

那么我如何动态调用e.target.dataset.component？

Answer 1

您肯定需要从标签到函数的映射:

import form from "./form"; //return some html

const datasetToComponent = {
  'form': form
};

function changePage(e){
  if (datasetToComponent[e.target.dataset.component]) {
    loadComponent(datasetToComponent[e.target.dataset.component]);
  }  
}

function loadComponent(name) {
  const wtv = name()
  document.getElementById('app').append(wtv)
}