Blockly

Blockly 是一款运行在网页客户端的 JavaScript 库，目的是用来打造以积木块为基础，附带编辑器的视觉化程式设计语言。它是一项由谷歌根据 Apache2.0 许可的开放源码专案。常见被应用在网页浏览器中，视觉上与 Scratch 差不多。Blockly 也可于 Android 和 iOS 中运行，但无法获得网页浏览器的全部特性。

Blockly

原作者	Neil Fraser、Quynh Neutron、Ellen Spertus、Mark Friedman
開發者	Google、麻省理工学院
首次发布	2012年5月，​12年前​（2012-05）
当前版本	11.2.1（2025年1月16日；穩定版本）[1]
源代码库	github.com/google/blockly
编程语言	JavaScript
平台	网页浏览器
文件大小	150 KB
语言	50种语言
语言列表 English
类型	函式庫
许可协议	Apache许可证2.0版
网站	developers.google.com/blockly/

Blockly 是使用能在网页上拖拉并相互连接的视觉化方块，使得程序的撰写更加容易，并且可以生成对应的 JavaScript，Python，PHP 或 Dart 等源代码。它也可以定制产生任何含有文字的电脑语言。^[2]

历史

Blockly 的发展始于 2011 年夏天，首次是在 2012 年的 Maker Faire 公开发布。Blockly 最初是为了替代 App Inventor 的 OpenBlocks 所设计的。^[3] Neil Fraser 负责启动这个计划，并且与 Quynh Neutron、Ellen Spertus 以及 Mark Friedman 一同为主要贡献者。

使用者介面

Blockly 编辑器的预设使用者介面是由工具箱（toolbox）、工作区（workspace），工具箱内有可用的程式方块，使用者可从"工具箱"中拖拽方块，并且在工作区进行排列和组合。预设情况下，工作区还包括一个缩放图示和一个用来删除程式方块的垃圾桶。^[4] 特别的是，这个编辑器允许程式方块被开发者启用或是限制某些功能。

订制化

Blockly 包括一组通用功能的程式方块，但可以通过订制化以增加更多的程式方块。新的程式方块需要一组定义方块的数据以及方块逻辑的程式码产生器。方块定义数据决定了方块的外观（使用者介面）而产生器负责产生被翻译对象的程式码。方块定义与程式码产生器可以被放在 Javascript 中，或者可以利用 Block Factory，这是一种用来产生新的方块的工具，其原理是利用方块来产生新方块的相关数据；让创建新的方块更加容易。

应用

Blockly 被使用在一些著名的项目中，其中包括：

• 麻省理工学院的 App Inventor，用来创造应用程序。^[5]
• Blockly Games 是一套教育性质的电脑游戏，教导程式设计的概念，如循环与条件分支。^[6][7]
• Code.org 教入门级的程序设计，已经有数以百万计的学生参与到他们的 Hour of Code 计划中了。^[8]
• 来自 Code For Life 的 Rapid Router，教导小学生程序设计的概念。^[9]
• RoboBlockly，一款以网页为操作基底的机器人模拟环境，用来教导程式设计与数学。
• Verge3D 利用 Blockly 作为 WebGL 的脚本环境 (被称为拼图)。^[10]
• Wonder Workshop，用在控制他们的 Dot and Dash 教育机器人。^[11]

功能

• 基于网页为操作基底来使用 SVG，而不是使用 Flash
• 可完全客户端运行的 JavaScript
• 支持主要的网络浏览器包括：Chrome， Firefox，Safari，Opera，IE
• 支持行动载具，如 安卓 以及 iOS
• 支持许多程式设计架构，包括变数，函数， 阵列等
• 支持最小型别检查，是一种弱型别的程式语言
• 订制化方块扩展容易。借由使用 Block Factory 让 Blockly 打造 Blockly
• 可生成干净的代码^[12]
• 可单步执行代码以进行追踪和除错^[13]
• 已经翻译50种以上的语言^[14]
• 支持从左到右或者从右到左的文字显示 ^[15]

参考文献

1. Release 11.2.1. 2025年1月16日 [2025年1月21日].
2. Google's Blockly Teaches You to Create Apps. NBC Bay Area. [2018-02-02]. （原始内容存档于2018-08-13）.
3. Google Groups. Groups.google.com. [16 January 2018]. （原始内容存档于2019-05-31）.
4. Google Blockly - A Graphical Language with a Difference. I-programmer. [2018-02-02]. （原始内容存档于2018-02-04）.
5. MIT App Inventor 2. MIT. [2018-02-02]. （原始内容存档于2016-04-25）.
6. Google Introduces Kids to Coding Through Blockly Games Project. EWeek.^{[失效連結]}
7. Blockly: Maze Archives - BrainPOP Educators. BrainPop. [2018-02-02]. （原始内容存档于2015-04-23）.
8. Translate Code.org. Code.org. [2018-02-02]. （原始内容存档于2014-12-23）.
9. Rapid Router. Ocado Technology. [2018-02-02]. （原始内容存档于2018-01-18）.
10. Verge3D 1.0.2 Brings Instant Web Publishing, New Puzzles and More!. Soft8Soft. [2018-02-02]. （原始内容存档于2018-01-25）.
11. Wonder Workshop Blockly. Wonder Workshop. [2018-02-02]. （原始内容存档于2018-03-17）.
12. Blockly Demo. Blockly-demo.appspot.com. [16 January 2018]. （原始内容存档于2018-01-17）.
13. Blockly Demo: JS Interpreter. Blockly-demo.appspot.com. [16 January 2018]. （原始内容存档于2018-01-17）.
14. Localisation statistics for the Blockly core module. Translatewiki.net. [16 January 2018].
15. Blockly Demo: RTL. Blockly-demo.appspot.com. [16 January 2018]. （原始内容存档于2018-01-17）.

外部链接

• 官方网站（页面存档备份，存于互联网档案馆）