javascript - 在事件监听器中使用 eval(myFunctionName) 作为回调的替代方法是什么？

Question

I set about asking this question wrongly, so I am starting again, beginning with the specifics of the issue I am wrestling with, rather than the general features of the issue.

我有一个对象，其中的值为字符串。它们几乎需要是字符串，因为它们是从 HTML5 自定义 data-* 属性中提取的，我真的不想开始在 HTML 属性中编写 javascript，就像 1999 年那样。

这是自定义 data-* 属性之一的示例:

data-event="{«eventListener» : «transitionend», «eventAction» : «showText»}"

如您所见，它基本上是一个 JSON 字符串，稍作修改，使其可以采用 HTML 属性值的形式。

我希望能够解析自定义 data-* 属性并将其转换为以下 javascript:

parentElement.addEventListener('transitionend', showText, false);

为此，我需要:

1. 将 « 和 » 字符替换为 " 字符
2. JSON.parse 将结果值转化为对象
3. 如果 useCapture 参数不存在(如本例所示)，则创建它
4. 然后(几乎)我可以直接创建 addEventListener 语句

事实上 - 当然 - 我最终得到了这个声明:

parentElement.addEventListener('transitionend', 'showText', false);

这不起作用，因为我无法调用 'showText' - 它只是一个字符串，不指向函数。

解决此问题的最简单方法是创建此语句，而不是:

parentElement.addEventListener('transitionend', eval('showText'), false);

这等同于:

parentElement.addEventListener('transitionend', showText, false);

唯一让我退缩的是我不确定 eval() 是否真的应该永远不被使用，或者它是否应该基本上被避免 - 而且，尽管有正常的警告，这种不寻常的情况是可以接受的部署eval()的情况。

---

问题:在 Javascript 中使用一个恰好是函数名称的字符串并使用 eval() 访问和执行该函数是否被误导或不可取> 在绳子上？

如果它不可取，当我知道一个函数的名称并且我希望将它插入到一个事件处理程序中时，有什么替代方法？

如果我最好避免这种情况:

parentElement.addEventListener('transitionend', eval('showText'), false);

我应该改用什么？

或者...在某些情况下使用eval() 是否完全可以接受 - 这就是其中之一？

Answer 1

为了响应更新，您最好将所有事件处理程序放在一个对象中而不是全局命名空间中，即:

之前:

function showText(event) {
   ...
}

function anotherHandler(event) {
   ...
}

之后:

const myActions = {
   showText(event) {
      ...
   },
   anotherHandler(event) {
      ...
   }
}

然后，在你解析了 data 属性并得到类似这样的东西之后:

data = {"eventListener" : "transitionend", "eventAction" : "showText"}

以这种方式绑定(bind)处理程序:

parentElement.addEventListener(
     data.eventListener,
     myActions[data.eventAction],
     false)

这不仅摆脱了 eval，而且有助于以更清晰的方式组织代码。