研究调查问卷：请告诉我们您使用 Blockly 的体验

此页面由 Cloud Translation API 翻译。

代码块剖析

本文档将探讨分块的不同部分。

连接

连接用于定义块可以连接到哪里以及可以连接到哪些类型的块。

连接分为四种类型：

连接类型	图片
输出连接
输入连接
之前的连接
下次连接

输出连接和输入连接可以连接在一起，下一个连接和上一个连接也可以连接在一起。您可以使用连接检查进一步限制连接。

您可以使用自定义渲染程序自定义连接的形状。

顶级连接

块有三个连接，可供选择是否使用。

一个块可能只有一个输出连接，该连接表示为块前端上的公插接头拼图连接器。输出连接会将某个代码块的值（表达式）传递给另一个代码块。具有输出连接的块称为值块。

math_number 块。

某个分块可能在顶部有一个上一个连接（表示为凹槽），在底部有一个下一个连接（表示为标签页）。这些代码块可以垂直堆叠，表示一系列语句。没有输出连接的代码块称为语句块，通常具有前连接和后连接。

variables_set 块。

如需了解详情，请参阅顶级连接。

字段

字段用于定义某个版块中的大多数界面元素。这些控件包括字符串标签、下拉菜单、复选框、图片，以及用于字面量数据（例如字符串和数字）的输入框。例如，此循环块使用标签字段、下拉菜单字段和数字字段。

包含多个字段的块。

Blockly 提供了许多内置字段，包括文本输入框、颜色选择器和图片。您还可以创建自己的字段。

如需了解详情，请参阅字段。

输入

输入是字段和连接的容器。通过将输入渲染到一行或多行（如砖块）来构建代码块。

输入有四种不同类型，所有这些类型的输入都可以包含字段（包括标签），其中两种类型的输入包含单个连接。您还可以创建自定义输入，这些输入支持自定义渲染。

输入类型	连接类型	图片
虚拟输入	无
输入行尾	无
值输入	输入连接
语句输入	下次连接

我们将通过一系列示例来介绍这些输入。如需了解如何定义构成块的输入、连接和字段，请参阅 JSON 中的块结构和 JavaScript 中的块结构。

虚拟输入

虚构输入只是字段的容器，没有连接。例如，以下数字块包含一个包含单个数字字段的虚构输入。

包含虚构输入和数字字段的数字块。

举一个更复杂的示例，假设有一个用于将两个数字相加的代码块。这可以通过包含三个字段（编号、标签、编号）的单个虚构输入构建：

一个由包含三个字段的虚构输入构建的加法块。

或三个虚构输入，每个输入包含一个字段：

由三个虚构输入构建的加法块，每个输入对应一个字段。

行尾输入

Blockly 使用启发词语来决定是将所有输入渲染在一行中，还是将每个输入渲染在自己的行中。如果您想确保某个输入会开始新行，请使用行尾输入作为上一个输入。

与虚构输入一样，行尾输入可以包含字段，但没有连接。例如，下面是使用包含两个字段的行尾输入和包含一个字段的虚构输入构建的加法块。行尾输入会强制将虚构输入渲染在新行中。

一个加法块，由行结束输入分为两行。

值输入

字段可以接受的内容有限。例如，数字字段仅接受数字。但是，如果您想将两个变量相加，该怎么办？或者将过程调用的结果添加到其他计算的结果？如需解决此问题，请使用输入连接，而不是字段。这样，用户就可以将值块用作输入值。

值输入包含零个或多个字段，并以输入连接结尾。以下代码块会将加法块中的数字字段替换为输入连接。它由两个值输入构建而成，第一个不包含任何字段，第二个包含标签字段。两端均为输入连接。

一个包含两个值输入的加法块。

语句输入

最后一种类型的输入是语句输入，其中包含零个或多个字段，并以下一个连接结尾。通过下一个连接，您可以在代码块中嵌套一堆语句块。例如，请考虑以下重复块。此代码块的第二行包含一个包含单个标签字段的语句输入和一个下一个连接。

包含语句输入的 repeat 块，用于嵌套重复的语句。

语句输入始终在自己的行中呈现。您可以在以下 if-then-else 块中看到这一点，该块的第一行包含值输入，接下来的两行包含语句输入。

一个 if-then-else 代码块，其中 then 和 else 语句具有单独的语句输入。

内嵌输入源与外部输入源

输入可以内嵌或外部呈现。这用于控制值输入的连接器是呈现在块内（内嵌）还是在外边缘（外部），以及输入是呈现在同一行还是不同行中。

使用内嵌输入一次和使用外部输入一次呈现的同一块。

创建自定义块时，您可以指定要使用的块，也可以让 Blockly 为您决定。如需了解详情，请参阅内嵌输入与外部输入。

开始玩吧！

如需了解输入、字段和连接，最好的方法是在 Blockly 开发者工具中构建块，并为 inputs 下拉菜单选择不同的设置（automatic、external、inline）。

图标

除了输入、连接和字段之外，块还可以有一个或多个图标。这些标记有各种用途，例如显示警告、输入块级注释或显示更改器界面。例如，下面是一个包含评论图标及其关联编辑器的块。

如需了解详情，请参阅图标。

代码块和 JavaScript 对象

块、输入、连接、字段和图标都是 JavaScript 对象。

Blockly 组件	基类	子类
屏蔽	`Block`	`BlockSvg`
输入	`Input`	`DummyInput`
		`EndRowInput`
		`ValueInput`
		`StatementInput`
		自定义输入
连接	`Connection`	`RenderedConnection`
字段	`Field`	`FieldTextInput`
		`FieldNumber`
		`FieldLabel`
		自定义字段
		等等
图标	`Icon`	`CommentIcon`
		`MutatorIcon`
		`WarningIcon`
		自定义图标

分块中的对象会形成树形对象。在编写代码以程序化方式操控代码块时，了解代码块的图形表示法如何与此树对应会很有帮助。例如，controls_for 块：

包含变量字段、用于“to”“from”和“by”的值输入，以及用于重复语句的语句输入的循环块。

对应于以下 JavaScript 对象树。

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}