Javascript - 如何在 javascript 中列出文件中所有声明的类答案

【问题标题】：Javascript - How to list all the declared classes in a file in javascriptJavascript - 如何在 javascript 中列出文件中所有声明的类
【发布时间】：2017-04-10 12:36:53
【问题描述】：

我正在为基于 Web 的 JS 编辑器实现自动建议功能。当用户打字时，我想向他展示所有已经声明或使用的变量、函数和类的建议。我可以从window 获取变量和函数，但我无法获取声明的类列表。假设以下是到目前为止输入的代码：

class FooClass {
  constructor() {
    console.log("I am the constructor of ECMA6 class");
  }
};

声明类后，如果用户输入 Foo，我想向他显示建议为FooClass。

【问题讨论】：

那么，您是手动解析用户输入的锯文本吗？
@Cerbrus，每当用户按下 Ctrl-Space 时，我目前正在调查窗口对象，并相应地返回结果。我也在调查工作线程的 self 对象以获取建议。所以要从工作线程中获取类，我需要声明的类列表。
“调查窗口对象”？你什么意思？你是否自动运行用户输入的代码？
@Cerbrus，它是一种 Chrome 开发工具类的应用程序，所以在用户输入有效的 JS 代码后，我正在执行它并保持下一个要输入的代码的范围相同。
您不想依赖运行的代码来获得这些代码建议，但是...您最好解析 class <someName> 部分的代码输入字段

标签： javascript class autocomplete ecmascript-6

【解决方案1】：

大多数 IDE 使用 AST 执行自动完成和其他智能重构和缺陷检测。

最著名的 Javascript AST 工具之一是Esprima，除了解析 Javascript，它还可以在 JS（浏览器和节点）中运行。

这是它提供的如何用于自动完成的演示： http://esprima.org/demo/autocomplete.html

如果您正在创建基于 Web 的 JS 编辑器，此工具可能会为您节省很多时间，不要重新发明轮子。

在 CodeMirror 的上下文中，您可能会发现这很有帮助： https://github.com/maxogden/javascript-editor

codemirror + esprima 支持的 html5 javascript 编辑器组件

【讨论】：

esprima 只是解析文件中的关键字。在显示建议之前，它不会进行任何有效性检查。而且maxogden 不支持ECMA6。它将class 指定为无效关键字。
esprima.org/demo/validate.html - 另外，maxogden 可能不支持 ECMA6，但 esprima 支持（主页上的第一个项目符号） - 我并不是说这将是一个开箱即用的解决方案，但是这比尝试自己可靠地重新创建它要容易得多。