【导语】：Blockly是Google开源的基于web的可视化程序编辑器，用户能够将一些定义好的图形块拼接在一起，用来构建应用程序。

简介

Blockly是一个向Web和挪动应用程序增加可视化代码编辑器的库，块之间应用互锁的图形块来示意代码，如变量，逻辑表达式，循环等。该编辑器将代码示意为一个个的图形块，通过图形块之间的连贯保障语法的正确性，同时反对自定义块以连贯到应用程序中。

从用户的角度看，Blockly是一种直观。可视化的代码构建形式，对于开发人员来说，Blockly是一种现成的UI，用于创立一种可视化语言，该语言能够生成语法正确的用户代码。目前反对JS、Python、PHP、Lua、Dart。它是一个纯JavaScript库，不依赖于服务端，与支流浏览器兼容，包含Chrome、Firefox、Safari、Opera和IE（IE11），并且反对定制和扩大。

Blockly具备以下特点和劣势：

  1. 可导出代码。用户能够将基于块的程序提取导出，并用于本人的文本编程中。
  2. 开源。Blockly的所有内容都是凋谢的。
  3. 可扩大。反对自定义块或删除不须要的块和性能来进行性能调整定制。
  4. 功能强大。能够用来执行计算简单的编程工作，如计算标准差。
  5. 国际化。目前曾经被翻译成40多种语言。
  6. 其余相似的工具：Scratch Blocks、PXT、Droplet、Snap。

解决Blockly Games的迷宫问题的例子：

我的项目地址:<br/>
https://github.com/google/blo...

简略应用

下载安装办法很简略，应用npm间接装置即可：

npm install blockly

Blockly工具箱

工具箱是用户能够从中创立新块的侧边菜单，应用XML或JSON指定工具箱的构造，并在注入页面后被传递给Blockly。

XML格局：

<xml id="toolbox" style="display: none">  <category name="Logic" colour="210">...</category>  <category name="Loops" colour="120">...</category>  <category name="Math" colour="230">...</category>  <category name="Colour" colour="20">...</category>  <category name="Variables" colour="330" custom="VARIABLE"></category>  <category name="Functions" colour="290" custom="PROCEDURE"></category></xml>

JSON格局：

{  "contents": [    {      "kind": "category",      "name": "Logic",      "colour": "210"    },    {      "kind": "category",      "name": "Loops",      "colour": "120"    }  ]}

成果如下：

创立固定大小的Blockly工作区

  1. 引入Blockly库和用户语言集：
<script src="blockly_compressed.js"></script><script src="blocks_compressed.js"></script><script src="msg/js/en.js"></script>
  1. 增加空白div元素：
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  1. 增加工具箱
<xml id="toolbox" style="display: none">  <block type="controls_if"></block>  <block type="controls_repeat_ext"></block>  <block type="logic_compare"></block>  <block type="math_number"></block>  <block type="math_arithmetic"></block>  <block type="text"></block>  <block type="text_print"></block></xml>
  1. 执行以下代码将Blockly注入到div中
<script>  var workspace = Blockly.inject('blocklyDiv',      {toolbox: document.getElementById('toolbox')});</script>

成果如下：

代码生成器：

  1. 确认所需的语言生成器，引入不同的库文件：
<script src="javascript_compressed.js"></script><script src="python_compressed.js"></script><script src="php_compressed.js"></script><script src="lua_compressed.js"></script><script src="dart_compressed.js"></script>
  1. 语言生成器库要紧接着blockly_compressed.js引入：
<script src="blockly_compressed.js"></script><script src="javascript_compressed.js"></script>
  1. 导出代码：
var code = Blockly.JavaScript.workspaceToCode(workspace);
  1. 实时生成。生成代码的效率十分高，频繁调用不会有什么大问题，能够通过向Blockly的change事件增加监听器来实时生成和显示代码：
function myUpdateFunction(event) {  var code = Blockly.JavaScript.workspaceToCode(workspace);  document.getElementById('textarea').value = code;}workspace.addChangeListener(myUpdateFunction);

成果如下：

创立自定义块

Blockly领有大量预约义的块，从数学函数导循环构造等包罗万象。然而有时候咱们依然须要自定义块以合乎咱们个性化的需要。在通常状况下，自定义块最快的办法就是找到一个最合乎需要并且曾经存在的块，在已有根底上对其进行批改。

小结

以上只是对Blockly根底和外围的性能做简要介绍，更具体的文档请参考官方网站。

开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10万+ Star 的开源技术资源库，包含：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。