您可以将 javascript 函数名称设置为 html 属性吗？

Question

是否可以编写一个 html 属性来存储 javascript 函数的名称，然后提取该 val() 并执行该函数？示例：

<button id="example" data-function-name="showAllElements()">

然后在 js/jq 中

fn = $('#example').data('function-name');

fn;

Answer 1

你可以，是的。你是否应该完全是另一个问题，答案几乎肯定是“否”（就执行字符串而言；就下面显示的替代方案而言，有时它很有用）。

您评估该 sn-p 代码的方式（您所拥有的不只是一个函数名称，因为 ()）将使用可怕的 eval ：

eval(fn);

几乎总有比使用eval 更好的选择。 （见下文。）

eval 示例：

$("#example").on("click", function() {
  var fn = $("#example").attr("data-function-name");
  eval(fn);
});

function showAllElements() {
  alert("showAllElements was called");
}

<button type="button" id="example" data-function-name="showAllElements()">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

一个更好的选择是将函数引用作为属性存储在对象上，然后使用括号表示法根据函数名称获取函数引用：

例子：

var functions = {
  showAllElements: function() {
    alert("showAllElements was called");
  }
};

$("#example").on("click", function() {
  var fn = $("#example").attr("data-function-name");
  functions[fn]();
});

<button type="button" id="example" data-function-name="showAllElements">Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意，我只是存储函数名称，而不是任意代码。

更新：如果您将函数嵌套在对象中，请参阅canon's answer 以了解处理它的巧妙方法，例如mumble.foo.doSomething，使用reduce。 （reduce 是一个 ES5 特性，但它是可填充的。）

---

旁注：除非您所做的不仅仅是检索data-* 属性的值，否则不要使用data，使用attr。 data 为元素初始化数据缓存，读入该元素的所有data-* 属性，并将它们复制到缓存中。如果您不使用它，则没有理由这样做。使用data 访问data-* 属性的想法是一种常见的误解。

Answer 2

当然……假设 showAllElements 是全局的……

function showAllElements() {
  console.log("test!");
}
document.querySelector("button").addEventListener("click", function(e) {
  var functionName = this.getAttribute("data-function-name");
  window[functionName]();
});

<button id="example" data-function-name="showAllElements">x</button>

现在，假设您的属性实际上是更复杂的东西，例如：foo.bar.showAllElements...

var foo = {
  bar: {
    showAllElements: function() {
      console.log("test!");
    }
  }
};

document.querySelector("button").addEventListener("click", function(e){
    var functionName = this.getAttribute("data-function-name");
    // Split by "." and resolve each segment starting at the window. Invoke with ()
    functionName.split(".").reduce((o,n) => o[n], window)();
});

<button id="example" data-function-name="foo.bar.showAllElements">x</button>

Answer 3

虽然我不认为您可以直接使用 HTML 属性执行此操作（除了上面提到的全局函数），如果您可以在页面加载时使用 javascript 添加数据元素，您可以直接执行此操作。正如这里所说，jquery 的$.data() 与data-* 属性不同。根据jQuery docs，使用.data()存储的值“新的数据值；这可以是除了未定义的任何Javascript类型。”

所以你可以直接使用存储一个函数

function my_func(){
   // Do stuff
}
$(function(){
   $('#foo').data('func', my_func);
});

后来

var func = $('#foo').data('func');
if( $.isFunction( func ) ) {
   func.call( $('#foo'), somearg );
}

我有an example as a fiddle。

这样做的好处是，只要将它们添加到同一个外壳范围内的元素中，就可以拥有外壳等中的功能。