应用设计

在设计使用 Blockly 的应用时，有多个范式可供选择。应尽早考虑这些选项，因为它们会影响用户需要的功能块。

配置

许多 Blockly 应用用于描述配置，而不是可执行程序。配置应用通常首先在工作区中初始化一个根级块。Blockly 开发者工具的“Block Factory”标签页就是一个很好的例子：

用于设计其他块的块。用户可以指定块名称、块输入、输入是内部还是外部，等等。

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

这会创建一个不可删除且不可移动的块，用于存储用户的所有配置。系统可以随时序列化工作区，以确定当前配置。

此类应用可能希望自动停用未连接到根块的任何块。只需一行代码即可实现此目的：

workspace.addChangeListener(Blockly.Events.disableOrphans);

连续节目

大多数 Blockly 应用都是用于创建串行程序。用户可以将多个代码块堆叠在一起，这些代码块会按顺序执行。

一堆包含移动、向左转和再次移动命令的代码块。

工作区中的每个（未停用的）代码块都将成为程序的一部分。如果有多个堆栈的块，则先执行较高的堆栈。（如果两个堆叠的高度大致相同，则优先显示左侧的堆叠 [在 RTL 模式下为右侧]。）

您可以随时将工作区导出为可执行代码。此代码可在客户端使用 JavaScript（使用 eval 或 JS 解释器）执行，也可在服务器端使用任何语言执行。

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

并行程序

某些 Blockly 应用会选择并行（而非串行）执行所有堆栈的块。例如，在音乐应用中，鼓循环与旋律同时运行。

实现并行执行的一种方法是单独为每个分块生成代码：

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

如果目标语言是 JavaScript，则可以使用 allCode 数组创建多个 JS 解释器以进行同时执行。如果目标语言是 Python 之类的语言，则 allCode 数组可以组装成使用线程模块的单个程序。

与任何并行程序一样，必须就所有共享资源（例如变量和函数）做出谨慎的决策。

事件驱动型程序

事件处理程序只是由系统（而非程序）调用的函数。这些代码块可以封装要执行的代码块堆栈，也可以是位于代码块堆栈顶部的标头。

两个“on mouse click”块，其中一个包含语句输入，另一个包含下一个连接。

有些开发者喜欢在事件块顶部添加“帽子”，以便与其他块区分开来。这不是 Blockly 的默认外观，但可以通过以下方式添加：将渲染程序常量 ADD_START_HATS 替换为 true（自定义渲染程序 Codelab - 替换常量），或添加主题并在代码块样式上设置帽子选项。如需详细了解如何在主题中为方块设置帽子，请点击此处。

带有帽子的相同“on mouse click”块，在块顶部形成一个隆起。

在事件驱动型模型中，为程序启动创建一个处理程序可能也很有用。在此模型下，工作区中未连接到事件处理脚本的任何代码块都会被忽略，不会执行。

设计使用事件的系统时，请考虑是否可能或是否需要支持同一事件处理脚本的多个实例。

工作区布局

从左到右布局界面有两种合理的方式。一种方式是，左侧是工具栏，中间是工作区，右侧是输出可视化结果。Scratch 1 版和“用代码编程”都使用此布局。

一款应用，左侧是工具栏，中间是工作区，右侧是迷宫（输出可视化结果）。

另一种方式是从左侧的输出可视化结果开始，中间是工具栏，右侧是工作区。Scratch 2 版以及大多数 Blockly 应用都使用此布局。

一款应用，左侧显示迷宫（输出可视化结果），中间显示工具栏，右侧显示工作区。

无论是哪种情况，工作区都应拉伸以占用可用的屏幕尺寸，因为用户需要尽可能多的编程空间。如上面的屏幕截图所示，由于用户的代码和输出可视化结果是分开的，因此第一个布局在宽屏上表现不佳。而第二种布局则为大型程序提供了额外的空间，同时仍可让所有三个部分保持紧密的距离。

从逻辑上讲，用户也应该先考虑他们尝试解决的问题，然后查看提供的工具，最后再开始编程。

当然，对于阿拉伯语和希伯来语译文，需要将整个顺序翻转。

在某些情况下（例如使用少量简单的块时），将工具箱放在工作区的上方或下方可能更合适。对于这些情况，Blockly 支持在 Toolbox 中水平滚动，但应谨慎使用。

建议：将计划可视化图表放置在工具栏旁边。