《Scratch3.0代码生成器编写启示录》

《Scratch3.0代码生成器编写启示录》

1、前言

对于想要二次开发scratch3.0 的同学来说,多语言(Python、Javascript、Arduino等等)代码生成或许是很多人面临的一个难题,因为scratch3.0在参照谷歌的blockly进行scratch-blocks模块研发的时候摒弃了代码生成这一环节,导致现在很多scratch二次开发者在代码生成这一环节犯难。那么我们今天就要讲一讲,Blockly是如何进行代码生成的,这对Scratch的代码生成又将有着什么样的意义。

2、Code Generators <代码生成器>

大多数的Blockly应用程序都需要将用户的程序翻译成JavaScript、Python、PHP、Lua、Dart或其他一些语言。这都是通过Blockly的客户端执行去完成的。例如:
《Scratch3.0代码生成器编写启示录》_第1张图片

代码生成

第一步是去包裹你想要的语言生成器,Blockly自带以下几种代码生成器:

  • javascript_compressed.js
  • python_compressed.js
  • php_compressed.js
  • lua_compressed.js
  • dart_compressed.js

代码生成器的js文件应该放置在blockly_compressed.js之后,例如:



在你的应用中,想要拖拽出的积木随时转换成代码,需要这样调用:

var code = Blockly.JavaScript.workspaceToCode(workspace);

上面这行代码中,只需要将JavaScript字段 修改成 Python, PHP, Lua, Dart 中的任意一个,就可转换代码生成器的语言。’

实时生成

生成代码是一个非常快的操作,因此系统会频繁地调用这个功能,且不能产生异常。通常的做法是,在Blockly的状态变更期间去添加一个监听器,从而做到代码的生成和展示实时进行。代码如下:

function myUpdateFunction(event) {
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(myUpdateFunction);

3、Generating Code <生成代码>

大部分Blockly应用需要将前台的积木转换成后台的代码去执行,本章节讲述的是如何给一个定制的积木添加一个代码生成器。
首先到generators/ 目录下,选择你想生成的语言(JavaScript, Python, PHP, Lua, Dart,等等)的子目录,如果你的积木运行不是这几类的语言,那么需要你创建一个新的js文件。这个新的js文件在HTML编辑器中需要被包裹在

你可能感兴趣的:(编程,scratch,Blockly,代码生成)