积木开发进阶 第九

积木开发进阶 第九

这一章节的难度与前八章存在鸿沟,需要至少掌握 Blockly Developer Tools 的使用,并拥有一定的积木开发经验,最好在 StackOverFlowGoogle Blockly 的官方 Forum 内浏览过一些开发上的问题,并研究过原生积木中比较复杂的(拥有 Mixin ExtensionMutator 的,如列表的部分积木)源码后再来阅读。

右文八章中的所有代码,足以完成一个 Blockly 代码编辑器的雏形。但如果仅用这样的代码实现积木,可能最后就会有这样的项目:

诚然,这些积木确实能正常工作,但是比之这块积木则相形见绌。

这一块积木,可以在 StatementReporter 之间变形。并且集 X Y Z 于一身。它是通过恰当的 Mutator 实现的。实现这样的积木有很多种办法,原生实现是 lists_getIndex 积木,在 StackOverFlow 等平台也有许多人发表过自己的实现。予聊提供一种实现供参考。源码位于示例项目 location_propmod 积木中,可自行查看。

其思路在于,使用 Field Validator 在第一个下拉列表的值更新时,调整积木的状态。同时为了能让这块积木被正确保存和读取,必须在 mutation 中记录这块积木当前处于“设置”还是“获取”状态,然后在积木的 domToMutation 函数被调用时也更新一次积木的状态。否则将会出现未被正常显示的积木。两个更新状态的逻辑是一样的,所以抽离出来写成单独的 updateInput_ 函数。这个函数只需要一个参数就是新的状态(获取或设置)。

在这个函数中,首先必须检查这个参数是不是 undefined ,因为初始化时会先传入不合法的值调用一次。这之后才会有正确的初值。假如得到“获取”状态,并且第二个输入还存在,说明此时的新状态应该是获取,需要进行变形。删除第二个输入,把积木弹出,然后再去掉上下两侧连接并添加左侧输出。同理可以写出将 Reporter 改为 Statement 的代码。直接通过第二个输入是不是存在来判断现有的状态是什么,是不是符合新状态,然后正确添加或移除第二个输入。

完成外观定义后编写代码生成器。只有处于“设置”这一状态下,才有第二个输入,也才能获取第二个输入。因此必须把获取第二个输入这一段代码放在处理“设置”积木的逻辑分支内。如果是“获取”,返回的应当是一个 [] ,否则直接返回字符串。不赘。

这并不是积木外观开发的终点。还有另外的进阶方向,比如此处的 XY 对应的都是数字类型。但是假如需要做一块积木,兼具设置获取坐标和 id 字符串的功能,就不能这么简单地使用 updateInput 了。又假如要做一块积木,可以设置获取 id 字符串,但是对于坐标则只能获取不能设置修改,则还需要把第二个下拉枚举做成动态的。这些问题,还望足下自行思考。

高级积木,代码都非常冗长。无论是 compose 还是 mutationToDom 抑或 saveExtraState 最终都有很多重复的逻辑。以至于一个积木动辄上百行。

最后更新于