Javascript 如何将JSON字符串转换并执行为带参数的函数？

IntersectionObserver设计用于在某些滚动点执行功能。我在回调下的数据选项属性中给出了这些函数

现在的问题是，如何触发相应的函数？ 看起来是这样的：

modal ('default-modal');
notify ('subscribe-newsletter', 'bottomLeft');

带有JSON字符串的我的HTML节点：

<section id="section-90" data-trigger="observer" data-options="{'root':null,'rootMargin':'0px','threshold':[0,0.1,0.2,0.3,0.4,0.7,1],'callbacks':{'modal':[{'id':'default-modal','position':'center'}],'notify':[{'id':'subscribe-newsletter','position':'bottomLeft'},{'id':'become-distributor','position':'bottomRight'}]}}">

使用选项和筛选器回调解析字符串

let str = target.dataset.options; // options from HTML node
let optStr = str.replace(/'/g, '"');
options = JSON.parse(optStr);
let callbacks = options.callbacks; // store only callbacks

for (const key of Object.keys(callbacks)) {
  console.log(key, callbacks[key]);

  /*
  Output:
  modal -> [{"id":"default-modal"}]
  notify -> [{"id":"subscribe-newsletter","position":"bottomLeft"},{"id":"become-distributor","position":"bottomRight"}]
  */
}

如何使用输出中的参数调用函数？

modal('default-modal');
notify('subscribe-newsletter', bottomLeft)

---

您可以创建一个存储可用回调的对象：

const availableCallbacks = {
  modal: // function definition here
  notify: // function definition here
}

然后，在你的循环中

for (const key of Object.keys(callbacks)) {
  console.log(key, callbacks[key]); // we were here...
  const callbackFn = availableCallbacks[key];

  if(callbackFn) {
    callbacks[key].forEach(value => callbackFn(value));
  }

---

您可以通过调用

eval（）

以非常黑客的方式执行此操作，但强烈建议您不要这样做，因为它允许各种XSS攻击。最好是白名单函数并显式调用它们。请参见下面的示例

//伪函数调用
函数modal（x）{console.log（'fake modal（）call'，x）；}
函数notify（a，b）{console.log（'fake notify（）call'，a，b）；}
//解析HTML字符串
var elem=document.getElementById（'section-90'）；
var optionsStr=elem.getAttribute（'data-options'）。替换（/'/g'，'）；
var options=JSON.parse（optionssr）；
//调用已知函数
Object.keys（options.callbacks）.forEach（key=>{
如果（键==“模式”）{
模态（options.callbacks.modal[0].id）
}否则如果（键==“通知”）{
notify（options.callbacks.notify[0].id，options.callbacks.notify[1].id）
}否则{
抛出错误（“尝试调用未知函数！”）；
}
})；

for (const key of Object.keys(callbacks)) {
  console.log(key, callbacks[key]); // we were here...
  const callbackFn = availableCallbacks[key];

  if(callbackFn) {
    callbacks[key].forEach(value => callbackFn(value));
  }