美文网首页
Blockly 代码生成器的引入

Blockly 代码生成器的引入

作者: 春困秋乏夏打盹_e473 | 来源:发表于2018-02-26 17:36 被阅读0次

    生成代码

    大多数块的应用程序都需要将块变成代码来执行。这个页面描述了如何将代码生成器添加到自定义块中。

    首先,进入generators/目录并选择与您想要生成的语言(JavaScript,Python,PHP,Lua,Dart等)相对应的子目录。假设您的块不适合现有的类别,请创建一个新的JavaScript文件。这个新的JavaScript文件需要包含在<script>编辑器HTML文件中的标签列表中。编辑器HTML文件中的标签列表中。编辑器HTML文件中的标签列表中。编辑器HTML文件中的标签列表中。

    典型的块代码生成器如下所示:

    此图为官方的一个例子,特指text_indexOf块儿

    收集参数

    任何块的代码生成器的第一个任务是收集所有参数和字段数据。有几项常用于此任务的功能:

    getFieldValue     valueToCode     statementToCode

    getFieldValue

    图2

    该函数从指定名称的字段返回值。

    在文本字段的情况下,该函数返回键入的文本。例如“Hello World”。

    在下拉的情况下,该函数返回与所选选项关联的与语言无关的文本。一个英文单词可能会有一个下拉字,选择“first”一词,而德语中的同一个下拉菜单则会显示“erste”。代码生成器不必知道所有可能的人类语言,因此该getFieldValue函数将返回创建下拉列表时指定的语言中性文本(Blockly的核心块通常使用大写英文单词,例如“FIRST”)。

    在变量下拉的情况下,该函数返回变量下拉的面向用户的名称。请注意,这个名称不一定与生成的代码中使用的变量名称相同。例如,“ forBlockly ”中的变量名称在Blockly中是合法的,但会在大多数语言中与保留字发生冲突,因此将被重命名为“ for2”。同样,متغير“Blockly”中的阿拉伯语变量名称在Blockly中是合法的,但在大多数语言中都是非法的,因此会重命名为“ _D9_85_D8_AA_D8_BA_D9_8A_D8_B1”。要获取可用于生成的代码的Blockly变量名称,请使用以下调用:

    图3

    该函数查找连接到命名值输入('FROM')的块,生成该块的代码,并将该代码作为字符串返回。在输入未连接的情况下,此函数返回null,这就是为什么通常使用布尔型“or”和默认值跟随函数的原因。因此,在上面的示例中,如果没有任何块连接到名为'FROM'的输入,那么此输入的默认代码将是字符串'0'。

    第三个参数指定嵌入所需的操作信息的顺序。每个语言生成器都有一个有序的优先级列表。该 valueToCode函数需要传递与将应用于返回代码的最大力相对应的订单值。valueToCode如果需要,这允许 将代码包装在括号中。有关详细信息,请参阅运营商优先级页面。

    请注意,JavaScript应改为相应的语言(Python,PHP,Lua,Dart,等)。

    statementToCode

    图4

    该函数查找连接到指定语句输入的嵌套块的堆栈,为该堆栈生成代码,缩进代码并以字符串形式返回代码。如果输入未连接,则此函数返回一个空字符串。

    请注意,JavaScript应改为相应的语言(Python,PHP,Lua,Dart,等)。

    组装代码

    一旦收集完所有参数,就可以组装最终代码。对于大多数街区而言,这是直接的。这是一个while循环的例子:

    图5

    语句块(那些没有返回值的块)可以毫不费力地返回代码:

    图6

    值块(返回值的块)稍微复杂一些。下面是一个基本的算术运算符(加号,减号等)的例子:

    图7

    这个例子说明了操作顺序问题。考虑形成表达式的两个连接的算术块的情况(2 * (3 + 4))。使用上面的代码剪切,加法块将返回字符串,"3 + 4" 而乘法块将使用此作为输入返回"2 * 3 + 4"。这个结果是不正确的,因为执行时3会更紧密地绑定到乘法。

    为了解决这个问题,值块必须返回一个包含两个值的列表:代码和合适的顺序值:

    图8

    每个语言生成器都有一个有序的优先级列表。返回的订单值指定将代码绑定在一起的最小力。有关详细信息,请参阅运营商优先级页面。

    如果生成的代码要求包含子块的代码两次,则应该缓存参数以提高效率并防止副作用.

    相关文章

      网友评论

          本文标题:Blockly 代码生成器的引入

          本文链接:https://www.haomeiwen.com/subject/hywyxftx.html