从Textarea执行Javascript - JSHint eval是邪恶的

时间:2015-08-22 18:28:14

标签: javascript jquery eval jshint

小提琴 - http://jsbin.com/zepugadafa/edit?js,output

我最近了解到Eval

我的脚本运行正常,但JSHint正在说eval is evil

我不想禁用Codemirror的eval警报。只需重写我的点击功能(仍然使用eval或其他形式的eval来使其以完全相同的方式工作)。

我试过......

$("#download").on("click", function() {
  var call = new Function( $("#jszipdemo").val() );
  return call();
});

但获得了The Function constructor is a form of eval.

我发现没有任何错误的唯一方法就是将脚本附加到正文中,但仍然没有找到替代措施,在我看来,这并不是多余的我喜欢将我的javascript代码与我的html分开。

var script = "<script>" + content + "</script>";
$('body').append(script);

有没有人知道摆脱此警报的解决方法,同时仍然运行我的函数(不在代码镜像上禁用eval,而不必将脚本附加到正文)?

&#13;
&#13;
var widgets = [];
var waiting;

function updateHints() {
  editor.operation(function(){
    for (var i = 0; i < widgets.length; ++i)
      editor.removeLineWidget(widgets[i]);
    widgets.length = 0;

    JSHINT(editor.getValue());
    for (i = 0; i < JSHINT.errors.length; ++i) {
      var err = JSHINT.errors[i];
      if (!err) continue;
      var msg = document.createElement("div");
      var icon = msg.appendChild(document.createElement("span"));
      icon.innerHTML = "!!";
      icon.className = "lint-error-icon";
      msg.appendChild(document.createTextNode(err.reason));
      msg.className = "lint-error";
      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
    }
  });
  var info = editor.getScrollInfo();
  var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
  if (info.top + info.clientHeight < after)
    editor.scrollTo(null, after - info.clientHeight + 3);
}

editor = CodeMirror.fromTextArea(document.getElementById("jszipdemo"), {
  lineNumbers: true,
  mode: "javascript",
  lint: true,
  gutters: ["CodeMirror-lint-markers"]
});

editor.on("change", function() {
  clearTimeout(waiting);
  waiting = setTimeout(updateHints, 500);
});

setTimeout(updateHints, 100);
&#13;
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
@import url("http://codemirror.net/lib/codemirror.css");
@import url("http://codemirror.net/addon/fold/foldgutter.css");
@import url("https://codemirror.net/addon/lint/lint.css");


.CodeMirror {
  float: left;
  width: 100%;
}
.lint-error {
  font-family: arial; 
  font-size: 70%; 
  background: #ffa; 
  color: #a00; 
  padding: 2px 5px 3px; 
}
.lint-error-icon {
  color: white; 
  background-color: red; 
  font-weight: bold; 
  border-radius: 50%; 
  padding: 0 3px; 
  margin-right: 7px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/javascripts/code-completion.js"></script>
<script src="http://codemirror.net/javascripts/css-completion.js"></script>
<script src="http://codemirror.net/javascripts/html-completion.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/keymap/extra.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<script src="https://codemirror.net/addon/lint/lint.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
<script src="https://codemirror.net/addon/lint/javascript-lint.js"></script>

<script src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>

<textarea id="jszipdemo" rows="4" cols="35">$("#download").on("click", function() {
  return eval( $("#jszipdemo").val() );
});</textarea>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

使用 evil 选项设置为false调用JSHint。

JSHINT(editor.getValue(), {evil:false});