Question

我目前正在编写一个JavaScript库来绘制浏览器中的函数。用户包括库，并向页面添加div特定类。他能够通过data-*的{{1}}属性告诉图书馆要绘制什么内容。

现在我确实希望用户能够将常量值或javascript函数作为参数传递，并且我的库读取常量或评估函数。我该怎么做？

示例：

div

这会使lib方式更灵活，但我如何处理传入数据实习生？

Answer 1

使用eval和type of来区分函数和num之间的不同并调用该函数。如果“rangeValue”（eval =＆gt;函数）写成“rangeValue（）”（eval =＆gt; number），则可以使用eval。

function rangeValue() {
  var range = document.getElementById("random-range");
  return range.value;
}

function rangeValue2(num) {
  return num + 10;
}

var divs = document.getElementsByClassName("plot-example");

for (var i = 0; i < divs.length; i++) {
  var val = eval(divs[i].getAttribute("data-plot-xMin"));
  var trueval = null;
  if (typeof val === 'function') {
    trueval = val();
  } else {
    trueval = val;
  }
  document.write("<br>" + trueval);

}

<div class="plot-example" data-plot-xMin="-1"></div>
<div class="plot-example" data-plot-xMin="rangeValue"></div>
<div class="plot-example" data-plot-xMin="rangeValue2(3)"></div>
<input id="random-range" value="2" />

Answer 2

您可以通过window['the_function_name']获取属性的值并访问该函数来实现。

像这样：

[].forEach.call(document.querySelectorAll('.plot-example'), function(elm) {
  var f = window[elm.getAttribute('data-plot-xMin')];
  if (f) {
    elm.innerHTML = window[elm.getAttribute('data-plot-xMin')].call();
  }
});

<script>
function rangeValue() {
  var range = document.getElementById("random-range");
  return range.value;
}
</script>

<div class="plot-example" data-plot-xMin="-1"></div>
<div class="plot-example" data-plot-xMin="rangeValue"></div>
<input type="range" id="random-range" />

HTML将常量或函数传递给JavaScript

2 个答案: