【导语】：Blockly 是 Google 开源的基于 web 的可视化程序编辑器，用户可以将一些定义好的图形块拼接在一起，用来构建应用程序。
简介
Blockly 是一个向 Web 和移动应用程序添加可视化代码编辑器的库，块之间使用互锁的图形块来表示代码，如变量，逻辑表达式，循环等。该编辑器将代码表示为一个个的图形块，通过图形块之间的连接保证语法的正确性，同时支持自定义块以连接到应用程序中。
从用户的角度看，Blockly 是一种直观。可视化的代码构建方式，对于开发人员来说，Blockly 是一种现成的 UI，用于创建一种可视化语言，该语言可以生成语法正确的用户代码。目前支持JS、Python、PHP、Lua、Dart。
它是一个纯 JavaScript 库，不依赖于服务端，与主流浏览器兼容，包括Chrome、Firefox、Safari、Opera和IE（IE11），并且支持定制和扩展。
Blockly 具有以下特点和优势：
- 可导出代码。用户可以将基于块的程序提取导出，并用于自己的文本编程中。
- 开源。Blockly的所有内容都是开放的。
- 可扩展。支持自定义块或删除不需要的块和功能来进行功能调整定制。
- 功能强大。可以用来执行计算复杂的编程任务，如计算标准差。
- 国际化。目前已经被翻译成40多种语言。
- 其他类似的工具：Scratch Blocks、PXT、Droplet、Snap。
解决 Blockly Games 的迷宫问题的例子：
项目地址:
https://github.com/google/blockly
简单使用
下载安装方法很简单，使用npm直接安装即可：
npm install blockly
Blockly工具箱
工具箱是用户可以从中创建新块的侧边菜单，使用XML或JSON指定工具箱的结构，并在注入页面后被传递给Blockly。
XML格式：
<xmlid="toolbox"style="display: none"><categoryname="Logic"colour="210">...</category><categoryname="Loops"colour="120">...</category><categoryname="Math"colour="230">...</category><categoryname="Colour"colour="20">...</category><categoryname="Variables"colour="330"custom="VARIABLE"></category><categoryname="Functions"colour="290"custom="PROCEDURE"></category></xml>
JSON格式：
{ "contents": [ { "kind": "category", "name": "Logic", "colour": "210"}, { "kind": "category", "name": "Loops", "colour": "120"} ] }
效果如下
创建固定大小的Blockly工作区
引入Blockly库和用户语言集
<scriptsrc="blockly_compressed.js"></script><scriptsrc="blocks_compressed.js"></script><scriptsrc="msg/js/en.js"></script>
添加空白div元素
<divid="blocklyDiv"style="height: 480px; width: 600px;"></div>
添加工具箱
<xmlid="toolbox"style="display: none"><blocktype="controls_if"></block><blocktype="controls_repeat_ext"></block><blocktype="logic_compare"></block><blocktype="math_number"></block><blocktype="math_arithmetic"></block><blocktype="text"></block><blocktype="text_print"></block></xml>
执行以下代码将Blockly注入到div中
<script>varworkspace=Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox')}); </script>
效果如下
代码生成器
确认所需的语言生成器，引入不同的库文件
<scriptsrc="javascript_compressed.js"></script><scriptsrc="python_compressed.js"></script><scriptsrc="php_compressed.js"></script><scriptsrc="lua_compressed.js"></script><scriptsrc="dart_compressed.js"></script>
语言生成器库要紧接着blockly_compressed.js引入
<scriptsrc="blockly_compressed.js"></script><scriptsrc="javascript_compressed.js"></script>
导出代码
varcode=Blockly.JavaScript.workspaceToCode(workspace);
实时生成。生成代码的效率非常高，频繁调用不会有什么大问题，可以通过向Blockly的change事件添加监听器来实时生成和显示代码
functionmyUpdateFunction(event) { varcode=Blockly.JavaScript.workspaceToCode(workspace); document.getElementById('textarea').value=code; } workspace.addChangeListener(myUpdateFunction);
效果如下
创建自定义块
Blockly拥有大量预定义的块，从数学函数导循环结构等应有尽有。但是有时候我们仍然需要自定义块以符合我们个性化的需求。在通常情况下，自定义块最快的方法就是找到一个最符合需求并且已经存在的块，在已有基础上对其进行修改。
小结
以上只是对 Blockly 基础和核心的功能做简要介绍，更详细的文档请参考官方网站。
