jquery - 触发一个以 name 作为变量名的函数

Question

$('.dgok').click(function(){
var fn = $(this).attr('data-fn');
console.log(fn); // abc
fn();
});

function abc(){
console.log('abc');
}

.dgok{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='dgok' data-fn='abc'>OK</div>

结果:错误 fn 不是函数...

有办法做到这一点吗？

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Answer 1

动态访问函数名称通常是一种代码味道，但如果您的 abc 位于顶层，则可以访问 window[fnName]，其中 fnName 是包含函数名称的字符串。精确的变量名称​​很重要 - 您的fn不是一个函数，而是一个字符串，因此最好将其命名为更清楚的名称一个字符串(通过尝试调用它来减少混淆的可能性)。例如:

$('.dgok').click(function() {
  var fnName = $(this).attr('data-fn');
  window[fnName]();
});
function abc() {
  console.log('abc');
}

.dgok {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='dgok' data-fn='abc'>OK</div>

如果您的 abc 不在顶层，window[fnName] 将不起作用 - 使用按函数名称索引的对象相反:

(() => {
  const fns = {
    abc: () => console.log('abc')
  };
  $('.dgok').click(function() {
    var fnName = $(this).attr('data-fn');
    fns[fnName]();
  });
})();

.dgok {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='dgok' data-fn='abc'>OK</div>