javascript - 如何从数据属性执行功能

Question

<div id='dgok' data-fn="delbanner('banners')">OK</div>

js

$('#dgok').click(function(){
    let fn = $(this).attr('data-fn');
    console.log(fn) // delbanner('banners')
    fn();
});

错误:

未捕获的类型错误:fn 不是函数

如何在这种情况下执行delbanner('banners')(点击dgok)？

Answer 1

避免使用 eval，您可以尝试一种基于通过某些容器(例如 window)访问函数的方法:

const fnContainer = window;
$('#dgok').click(function(){
    const fn = $(this).attr('data-fn');
    const fnName = fn.substring(0, fn.indexOf('(')); // 'delbanner'
    const fnArg = fn.substring(fn.indexOf('(') + 2, fn.length - 2); // 'banners'
    if (typeof fnContainer[fnName] === 'function') {
      fnContainer[fnName].apply(fnContainer, [fnArg]); // window[fnName](fnArg);
    }
});

这里我假设您的函数是在 window 上定义的，并且有 1 个字符串参数。

---

在单独的数据属性中使用函数参数该方法可能看起来更简单一些

const fnContainer = window;
$('#dgok').click(function(){
    const fnName = $(this).attr('data-fn');
    const fnArg = $(this).attr('data-arg');
    if (typeof fnContainer[fnName] === 'function') {
      fnContainer[fnName].apply(fnContainer, [fnArg]); // window[fnName](fnArg);
    }
});