积木开发进阶 第九

积木开发进阶 第九

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

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

Bad Example

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

Setter

Getter

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

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

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

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

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

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