javascript - 运行代码并将其显示为文本而不重复

Question

我想将 JavaScript 代码存储在一个对象中，然后在用户单击按钮时运行其中的一部分。到目前为止我有这个:

var exampleCode = {
    test: "$('body').css('background: pink');"
}
$(document).ready(function(){
    console.log(exampleCode.test);
    exampleCode.test;
});

我有两个问题，第一个问题是，如何让代码实际运行？

第二个是，如果我想在我的 javascript 中包含一些 html，我该怎么办，比如下面的代码行:

$('body').append('<div class="whatever"></div>');

这与对象值周围的双引号不能很好地配合。

我所有这一切的目标是能够在同一页面上以文本形式运行和显示代码，而无需将代码编写两次，因此如果您有其他建议，那就太好了。

Answer 1

您实际上无法执行“代码字符串”，因此运行代码的唯一方法就是执行以下操作:

var exampleCode = {
    test: function(){$('body').css('background', 'pink');}
}
$(document).ready(function(){
    console.log(exampleCode.test); //No "()" for the function
    exampleCode.test();
});

您在对象中保存一个函数并调用它。

如果你想附加函数的文本，你可以这样做:

$('body').append(String(exampleCode.test))

这将附加函数，但没有格式

但是，您可以使用 JavaScript 函数 .replace() 进行一些格式化。

//Really weak example, can be optimised
var txtCode = String(exampleCode.test)
txtCode = txtCode.replace(';', ';<br/>')
txtCode = txtCode.replace('{', '{<br/>')
txtCode = txtCode.replace('}', '}<br/>')
var code = $('<code/>').html(txtCode)
$('body').append(code)

<小时/>

其他信息:您可以使用“\”转义字符。

执行 alert('How's it?') 将弹出警报“How's it?”和 alert(“See that :\” !") 将弹出警报“请参阅:”!”。