在 javascript 中替代使用 eval答案

【问题标题】：Alternative use of eval in javascript在 javascript 中替代使用 eval
【发布时间】：2012-12-21 23:15:43
【问题描述】：

我听说在 JavaScript 中使用 eval 函数是个坏主意，但我有这段代码：

// this string (function)  is generated dynamically...
var funVal = 'alert("a")' ;        
//.....

var Button1 = document.getElementById("BtnSave");
// onclick event of button
eval("Button1.onclick = function () { " + funVal + " };");

我不想使用eval。还有其他解决方案吗？

【问题讨论】：

"alert('a')" 只是一个例子，代码是在服务器端动态生成的

标签： javascript function onclick eval

【解决方案1】：

只需编写几乎没有eval 的代码，那里没有什么需要它：

var funVal = function() {
    alert("a");
};

var Button1 = document.getElementById("BtnSave");
Button1.onclick = funVal;

在您所说的 cmets 中，代码是在服务器端动态生成的。这根本不是问题，只需让服务器输出预期 JavaScript 代码的代码（在 <script>...</script> 标签内，或作为您将通过 <script src="..."></script> 加载的响应的完整内容）。无论哪种情况，关键是确保您发送到浏览器的内容是有效代码。

示例 1：动态生成的内联 script 标签（你还没有说服务器端技术是什么，所以我选择了相当常见的 PHP）：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Inline Dynamically Generated Script</title>
</head>
<body>
<p>Each time you load this page, the script in the inline
<code>script</code> tag at the end is different.</p>
<button id="theButton">Click Me</button>
<script>
document.getElementById("theButton").onclick = function() {
    alert("<?php echo("Hi there, this page's magic number is " . rand(0, 10000)); ?>");
};
</script>
</body>
</html>

Live Example

示例 2：在单独文件中动态生成的脚本：

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamically Generated Script from File</title>
</head>
<body>
<p>Each time you load this page, the script in the file
loaded by the <code>script</code> tag at the end
is different.</p>
<button id="theButton">Click Me</button>
<script src="dynamic-script.php"></script>
</body>
</html>

JavaScript 文件 (dynamic-script.php)：

<?php header('Content-type: application/javascript'); ?>
document.getElementById("theButton").onclick = function() {
    alert("<?php echo("Hi there, this page's magic number is " . rand(0, 10000)); ?>");
};

Live Example

【讨论】：

感谢您的回答，但是...“alert ('a')”只是一个例子，代码是在服务器端动态生成的
@CSPHPJAVASQLAJAXHTMLJS 让另一个系统生成 JS 代码是您必须使用 eval 的少数情况之一，因为没有其他方法可以将函数从一个系统传递到另一个系统，除了在源代码形式。但是为什么你首先要在服务器上创建 JS 代码呢？这对我来说真的很奇怪。
@CSPHPJAVASQLAJAXHTMLJS - 如果您在页面生成时执行此操作，则无需 eval 在服务器上生成代码完全没有问题。您只需将生成的函数放入页面中的<script> 标记中，然后您就可以从页面中的任何其他位置引用该函数。但是，通常首选的方法是编写一个存在于页面中的通用函数，该函数使用一些由服务器插入到页面中的 javascript 数据，以便准确了解它应该做什么。
@CSPHPJAVASQLAJAXHTMLJS：上面我只能echo jfriend00，服务器端生成就好了。无论如何，代码都会作为文本发送到浏览器。然后浏览器解释它接收到的文本（脚本标签之间的文本或整个文件的文本，如果你使用）。我已经用这样做的例子更新了答案。

【解决方案2】：

我不知道你为什么要这样做，但更好的方法是使用 Function 构造函数：

new Function("Button1.onclick = function () { " + funVal + " };")();

但您不必使用这个或eval 解决方案。这样做在输出中是完全等价的：

Button1.onclick = function() { alert('a'); };

【讨论】：

使用x = new Function () 被认为是不好的做法。在大多数情况下，您应该使用x = function() { }。有关详细信息，请参阅此问题：stackoverflow.com/questions/3026089/…
不好的做法？你的意思是在这种情况下比eval 更糟糕？
不，但它仍然不如 function()。我想我应该指出这一点，因为你并没有真正说得很清楚。

【解决方案3】：

Javascript 允许您将函数视为变量。您可以将它们分配给其他变量，可以将它们作为参数传递给其他函数，甚至可以拥有返回其他函数的函数。这可以在您使用 ~~evil()~~eval() 的大多数情况下使用。

【讨论】：