Blockly简介

Blockly是为应用程序添加可视代码编辑器的应用。Blockly编辑器使用卡合的图形块（后文称图形块为积木，像乐高积木一样，使用者可以自由搭配积木）来表示代码概念，如变量，逻辑表达式，循环等。它使得用户可以不必关注语法细节就能直接按照编程原则进行编程。图形块形式的编程易于初级用户或年龄较小的学生熟悉编程，利用图形块的编程方式，理解编程，实现创意！

卡合

1. Blockly界面介绍

Blockly界面

Blockly的优势不在于定义界面有哪些功能积木，重要的是可灵活定义积木块，自由搭配积木块，使一堆卡合的积木块翻译出一种通用的XML语言，运算出相应的结果。
界面整体称为工作空间，主要分为三个区域，分类区、积木区、脚本区

• 分类区（Categories）：用于将Blocks按模块进行分类，Blockly默认定义了8种分类，每种分类使用不同的颜色，有不同功能，譬如Loops分类存放循环积木，Math分类存放数学操作积木等；
• 积木区（Blocks）：用于存放分类下的积木，不同积木代表不同的功能，在Blockly中，积木可以使用开发者工具，或者编写代码灵活定义积木；
• 脚本区（Scripts）：用于编写代码的区域，将积木区中的积木，拖动到脚本区，积木进行卡合形成积木组，积木组即可成为可执行的代码段，执行代码段获得运算结果；
• 工作空间（Workspace）：分类区、积木区、脚本区组合为工作空间，Blockly操作以Workspace为核心。

Blockly初始时，将分类XML转化为分类区和积木区，生成Workspace，运行时，将脚本区中的积木组，转成对应的代码段，然后转成可执行的高级编程语言，获得结果。

2. Blockly使用

源码

Blockly由JavaScript编写，利用Google的closure-library技术实现，使用npm进行包管理，gulp进行代码打包生成。Blockly源码地址 。

1. 安装包 npm install
2. 打包 npm build

另外npm build打包时会生成4类文件blockly_compressed.js、blockly_uncompressed.js、blocks_compressed.js、[language]-compressed.js,blockly文件为核心代码文件，blocks文件为Blocks积木代码文件，[language]文件为积木对应的高级语言代码文件。

Demo例子

Demo例子

Blockly Demo例子可以直观的感受Blockly使用方法，从Workspace的生成（toolbox、fixed、resizable等），到积木组的执行（interpreter、code等），再到积木的制作（graph、blockfactory等），具体使用方式可参考Blockly的开发者文档。

playground例子

Blockly引入了playground例子，后期Scratch每一个模块都是使用playground为例子，playground例子包含了项目绝大部分功能。

playground例子

左侧即为Blockly比较重要的特性，每一项都可以触发Workspace事件，使用不同的方式相应。
LTR：控制分类或的对齐线在Workspace左侧还是右侧对其；
Categories：显示不同的分类；
Start：控制分类在Workspace上下左右侧显示；
Classic:Workspace的主题；
Export/Import: 脚本区的脚本导入导出xml；
To [language]:脚本区的脚本生成对应高级语言代码；
Stress test:使用不同的方式生成积木代码，显示先脚本区；
Log event:Workspace的事件日志记录器，勾选后，控制台将会打印事件日志；

3. Blockly类似软件

在越来越丰富的可视化编程环境中，Blockly仅仅是其中的一个，Blockly不是所有应用程序的解决方案。以下是一些您可能会发现有用的其他可视化编辑器：

• Scratch Blocks：基于Blockly代码库并由麻省理工学院Scratch团队的设计人员设计，Scratch Blocks提供了一种适合青少年的简化编程模型。Scratch主页Scratch源码地址

  Scratch Gui

• PXT：为Microsoft MakeCode编辑器提供支持的可视化和基于文本的编程环境。 PXT将Blocks，TypeScript，模拟器和编译器捆绑在一个库中。MakeCode主页 源码地址
  

  MakeCode

• Droplet：为Pencil Code提供支持的图形编程编辑器，其独特之处在于能够将代码转换为块。Pencil Code主页 源码地址
  

  Pencil Code

• Snap：一种Scratch风格的图形编程语言，它不是一个库，而是一个带有集成执行环境的完整应用程序。Snap主页 源码地址
  

  Snap

  好在Blockly是Google出品，社区非常强大，在前几年Google开发者大会上都有体积Blockly，而使用广泛的少儿编程软件Scratch3.0，基于Blockly重写，Scratch是一款面向低龄的图形化编程软件，作品百万，社区大佬众多，而且在中国，占有绝大部分的市场空间。

  4. Blockly优势

  下面列举几个Blockly的优势：

• 用户可以将基于块编写的程序转换成通用编程语言，并平滑过渡到基于文本的编程。

• 关于Blockly的一切都是开放的：您可以用您自己的方式修改它，并在您自己的网站中使用它。

• Blockly不仅仅是玩具，您可以用它实现复杂的编程任务，例如在单个块中计算标准偏差。

• Blockly已被翻译成40多种语言，包括阿拉伯语和希伯来语的从右到左的版本。