编程语言试验之Antlr4+JavaScript实现"圈4"

Myth丶恋晨 2024-04-17 14:02 105阅读 0赞

参考: [ANTLR4: Making a compiler with the JavaScript runtime][ANTLR4_ Making a compiler with the JavaScript runtime]

演示效果虽弱, 还是先上图吧:

在线演示: [地址][Link 1].

源码库: [program-in-chinese/quan4][program-in-chinese_quan4]

下载到本地后在浏览器中打开"圈4.html"就可以在本地试验.

以后设计实现好语言后可以直接用静态网页作在线编程的演示, 觉得还蛮有用.

注: JS代码中各种不良操作(比如全局函数定义). 请勿作为JS学习材料使用. 与前文一样, 此文的目标不是一个实用的编程语言.

语法非常简单(圈4.g4), 只为演示之用. 前文[编程语言试验之Antlr4+Java实现"圈2"][Antlr4_Java_2]有更多格式的解释:

grammar 圈4;
    程序   : 求约数;
    
    求约数    : '求约数' T数 ;
    
    T数 : [0-9]+ ;
    T空白     : [ \n\t]+ -> skip;
    复制代码

下面命令生成词法语法分析器相关JavaScript文件(圈4.tokens, 圈4Lexer.js, 圈4Lexer.tokens, 圈4Listener.js, 圈4Parser.js):

$ java -cp "antlr-4.7-complete.jar:$CLASSPATH" org.antlr.v4.Tool -Dlanguage=JavaScript 圈4.g4
    复制代码

作为解释器的"定制监听器.js":

读取文件输入, 调用附着了定制监听器的分析器"代码分析.js":

const antlr4 = require("antlr4/index")
    const 圈4Lexer = require("./圈4Lexer.js")
    const 圈4Parser = require("./圈4Parser.js")
    const 定制监听器 = require("./定制监听器.js").定制监听器
    
    运行();
    
    // TODO: 需改进-现为全局, 由于browserify
    function 运行() {
      var 代码 = document.getElementById('输入代码').value;
      var 输入流 = new antlr4.InputStream(代码)
      var 词法分析器 = new 圈4Lexer.圈4Lexer(输入流)
      var 词 = new antlr4.CommonTokenStream(词法分析器)
      var 语法分析器 = new 圈4Parser.圈4Parser(词)
      语法分析器.buildParseTrees = true
    
      antlr4.tree.ParseTreeWalker.DEFAULT.walk(new 定制监听器(), 语法分析器.程序())
    }
    
    window.运行 = 运行;
    复制代码

HTML界面"圈4.html":

<html>
      <head>
        
        <script src="圈4.js" defer></script>
      </head>
      <body>
        <textarea id="输入代码">求约数50
        </textarea>
        <button onclick="运行()">运行</button> 
        <span id="输出"></span>
      </body>
    </html>
    复制代码

是的, 上面的"圈4.js"需要另行生成. 安装Browserify后运行:

$ browserify 代码分析.js > 圈4.js 
    复制代码

2017-12-02

转载于:https://juejin.im/post/5d40fcdb6fb9a06b2b475504

[ANTLR4_ Making a compiler with the JavaScript runtime]: https://link.juejin.im?target=http%3A%2F%2Fwww.scriptol.com%2Fprogramming%2Fantlr4-javascript.php
[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fcodeinchinese.com%2F%25E5%259C%25884%2F%25E5%259C%25884.html
[program-in-chinese_quan4]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fprogram-in-chinese%2Fquan4
[Antlr4_Java_2]: https://link.juejin.im?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F31429800