Question

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

为了保持代码模块化，我想引入一个回调变量，因此我可以指定一个回调函数，该函数根据请求的数据而变化。最好将其插入与功能相关的元素（即按钮或输入）

现在，我将回调函数名称存储在dom中，作为元素的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吗？

Answer 1

您可以使用setTimeout实现所需的功能。

.size()

如果需要传递一些参数，可以查看示例

$ ./bin/rd2dintarr+stuff dat/2dintarr+stuff.txt
2D array of values:

 1 0 0 0 1
 1 1 1 0 0
 1 1 0 0 0
 1 1 1 1 0

Single-values:

 8 5

Answer 2

您也可以这样处理-创建时我引用了these MDN docs

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

const log = document.getElementById('btn');

log.onclick = clickHandler;

function clickHandler(e) {
  const {callbackParam, callbackFunction} = e.target.dataset
  eval(`${callbackFunction}("${callbackParam}")`)
}

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

2 个答案: