积木代码生成器开发 第七
积木代码生成器开发 第七
最后更新于
积木代码生成器开发 第七
最后更新于
实现一个积木，需要两部分代码。一是外观部分，定义了积木上的文字，输入与输出，以及可能的外观变形。二是代码生成器部分。示例项目的“转换”按钮，把用户在 WorkSpace 内搭建的项目转换成一段 JavaScript 代码。用以将一块积木转变为一段代码字符串的代码，称之为 Code Generator 。
所有的积木理论上都可以有多个代码生成器，每个对应一种语言，Blockly 自带了 JavaScript Lua Dart PHP Python 这五种语言。可以看到每一块原生积木都有五个生成器。本教程只演示 JavaScript 语言代码生成器的使用。也可以注册新语言，不过本教程不会提及。
代码生成器本身只能用 JavaScript 编写。
事实上，定义积木外观时，就已经得到了一个预设好的 Generator 。
这个预设的 Generator 很有用。
如图的红框就是预设的 Generator 。
首先，输入值有两种。
第一张图是一个 Value Input 。第二张图是一个 Field Input。
其区别在于，第一张图的输入可以是一串有返回值的方法，而第二张图必须由用户在浏览器内打字输入。
事实上，一个积木可以有很多个输入。为了区别这些输入，每一个输入都要有一个 Name 作为标记。通过 Name 可以访问这个输入的值。Dummy Input 也可以拥有名字，只不过不常用。编写高级积木时，如果需要动态添加、去除 Dummy Input，才会需要它作为标记。
这个输入的值，已经写在了预设代码里。照抄即可。
事实上，预设代码会生成所有获取 Field Input、Value Input、DropDown 的值的代码。只需要调用这些变量。最终拼接为一个字符串即可。Statement 积木需要在字符串末尾加上换行。
如果积木是 Statement，直接返回字符串。
如果积木是 Reporter ，则需要返回数组，第一项为字符串，第二项为运算顺序等级。运算顺序等级，实质上是用来恰当添加括号的。 1 + 2 * 3 和 (1 + 2) * 3 的运算结果是不同的。同理，一些逻辑运算符执行也有先后。当然，如果没有这些美化代码的需求，直接让所有 Reporter 积木全加上括号，就可以解决多数情况。对生成 JavaScript 代码的代码生成器而言，全加括号只需要返回 Blockly.JavaScript.ORDER_NONE 即可。
有一个所谓缓存参数的概念，实质上是使用了自定义函数功能。自定义函数即首先在文件的最开头加上一段函数 function(...) {...} 。可以在最终返回的代码里调用这个函数。如原生积木中的混合颜色积木，就提供了 colorBlend 函数。
使用函数的好处主要在于可以在 Reporter 积木中进行一些 Statement 调用和缓存参数。
比如要使用 Java 中的 INetSocketAddress 类型的对象获取 IP 字符串，就可以这么写：
另外一个好处在于，同一个 INetSocketAddress 类型的对象可以多次复用。假设这个对象是调用某个耗时方法得到的（即省略号位置处是一个对函数的调用），那么缓存参数可以提高效率。假设这个对象和随机有关，如生成随机长度列表，那么不缓存会造成错误。
将 workspace 内积木转换为 JavaScript 代码，只需要这样写：
可以使用非原生支持的语言，但是必须为所有用到的积木都写代码生成器。
