從文本區域執行JavaScript - JSHint的eval是邪惡的

Question

小提琴 - 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.

---

我發現，沒有任何錯誤的工作的唯一辦法就是追加劇本的身體，但還是天堂」噸想出了一個替代的措施，這是不是在我看來是多餘的，因爲我喜歡從我的HTML分離我的JavaScript代碼。

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

有誰知道一個解決方法，以從中得到警示擺脫，同時還具有我的功能運行（不上Codemirror禁用的eval，而不必一個腳本追加到身體）？

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);

@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; 
 
}

<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>

Answer 1

呼叫JSHint設置爲false的邪惡選項。

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