Question

IntersectionObserver设计为在某些滚动点执行功能。我在回调的data-options属性中提供了这些功能。

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

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'}]}}">

格式化的JSON（仅在此处提供更好的概述：）：

{
  "root": "null",
  "rootMargin": "0px",
  "threshold": [
    0,
    0.25,
    0.5,
    0.75,
    1
  ],
  "callback": {
    "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)

Answer 1

您可以通过调用eval()来做到这一点，但是强烈建议不要这样做，因为它可以进行各种XSS攻击。将函数列入白名单并显式调用它们会更好。参见下面的示例。

//fake funciton calls
function modal(x) { console.log('fake modal() call', x); }
function notify(a, b) { console.log('fake notify() call', a, b); }

//parse the HTML string
var elem = document.getElementById('section-90');
var optionsStr = elem.getAttribute('data-options').replace(/'/g, '"');
var options = JSON.parse(optionsStr);

//Call the known functions
Object.keys(options.callbacks).forEach(key => {
  if (key === "modal") {
    modal(options.callbacks.modal[0].id)
  } else if (key === "notify") {
    notify(options.callbacks.notify[0].id, options.callbacks.notify[1].id)
  } else {
    throw Error("Unknown function attempted to be called!");
  }
});

<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'}]}}">

Answer 2

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

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));
  }

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

2 个答案: