通过DOM元素数据集将回调传递给js

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (47)

我有一个模块化系统,从我的服务器获取一些数据并通过ajax将它返回给客户端,然后客户端对这些数据进行处理。

为了保持代码模块化,我想引入一个回调变量,所以我可以指定一个根据请求的数据而变化的回调函数。这将优选地插入到与功能相关的元素中(即,按钮或输入)

现在我将回调函数名称存储在dom中,作为elements data-callback="functionName"属性,然后eval()将该值存储为运行回调。

片段

document.addEventListener( 'click', function( evt ){
  var tgt = evt.target;
  
  if( tgt.id == "btn" ){
  
    var callback = tgt.dataset.callback;
    var callbackParam = tgt.dataset.callbackParam;
  
    eval( callback + "('" + callbackParam + "')" );
  }
});



function foo( str ){

  document.getElementById( "returnDisplay" ).innerText = str;
  
  window.setTimeout( function(){
    document.getElementById( "returnDisplay" ).innerText = '';
  }, 1000 );
  
}

<div id=returnDisplay></div>
<button id=btn data-callback="foo" data-callback-param="bar">Click me</button>

我知道eval被认为是危险的,还有另外一种方法可以通过DOM将回调传递给javascript吗?

提问于
用户回答回答于

您也可以这样做 - 我在创建时引用了这些MDN文档

<div id=returnDisplay></div>
<button id="btn" data-callback-param="bar">Click me</button>
const log = document.getElementById('btn');

document.onclick = clickHandler;

function clickHandler(e) {
  console.log(e.target.dataset.callbackParam)
}

用户回答回答于

您可以使用setTimeout实现所需。

var callback = tgt.dataset.callback;
setTimeout(callback);

如果你需要传递一些参数,你可以参见例子

let fncName = 'alert'
let fncParam = 'hello'
setTimeout(`${fncName}("${fncParam}")`)

扫码关注云+社区

领取腾讯云代金券