javascript - 为 children 创建一个 JavaScript 拖放编辑器，想要包含 JSHint 来检查语法 - 我该怎么做？

Question

我正在尝试为一些小学生构建一个拖放 JavaScript 编辑器:

https://jsfiddle.net/xfjd6beo/

我在做两件事时遇到问题:

1. 我想包含 JSHint 库来验证文本区域中的 JavaScript。
2. 我还想在右侧包含另一个变量列表，该列表是从另一个名为 Variables.js 的 JavaScript 文件中提取的。

Variables.js 的内容只是一个变量列表:

var HelloWorld = Hello World;
var Cat = Thomas;

这个想法是，左侧是所有默认语句，例如 if/else，右侧是变量列表， children 可以将其拖放到产品代码中，例如:

function helloCat(){

 alert(Cat);
}

有人对我如何实现这两个目标有任何想法吗？

Answer 1

快速回答，因为我没有那么多时间:

1. 根据JSHINT doc只需使用 JSHINT() 函数:

   JSHINT( source, options, predef )

   Parameters:

   • source

     • Description: The input JavaScript source code Type: string or an array of strings (each element is interpreted as a newline)

     • Example: JSHINT(["'use strict';", "console.log('hello, world!');"]);

   • options

     • Description: The linting options to use when analyzing the source code Type: an object whose property names are the desired options to use and whose property values are the configuration values for those properties.

     • Example: JSHINT(mySource, { undef: true });

   • predef

     • Description: variables defined outside of the current file; the behavior of this argument is identical to the globals linting option Type: an object whose property names are the global variable identifiers and whose property values control whether each variable should be considered read-only

     • Example: JSHINT(mySource, myOptions, {jQuery: false });

2. 您无法从脚本导出变量，最好的方法是将变量存储为 json 文件，然后通过 ajax 调用( see jquery docs )加载变量。 .