Передача обратного вызова в js через набор данных элементов DOM - PullRequest
Новая
       10

Передача обратного вызова в js через набор данных элементов DOM

0 голосов
/ 02 апреля 2019

У меня есть модульная система, которая получает некоторые данные с моего сервера и возвращает их клиенту через ajax, после чего клиент обрабатывает эти данные.

Чтобы сохранить код модульным, я хочу ввести переменную обратного вызова, чтобы я мог назначить функцию обратного вызова, которая изменяется в зависимости от запрошенных данных. Желательно, чтобы это было вставлено в элемент, относящийся к функции (например, кнопка или вход)

Сейчас я сохраняю имя функции обратного вызова в dom как свойство data-callback="functionName" elements, а затем 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 считается опасным, есть ли другой способ передать обратный вызов в javascript через DOM?

Ответы [ 2 ]

0 голосов
/ 02 апреля 2019

Вы также можете сделать это следующим образом - я ссылался на эти документы MDN при создании: 

<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}")`)
}
0 голосов
/ 02 апреля 2019

Вы можете достичь того, что вам нужно, используя setTimeout. 

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

Если вам нужно передать некоторые параметры, вы можете, см. Пример 

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