【导语】: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 的迷宫问题的例子:
我的项目地址:<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 工作区
- 引入 Blockly 库和用户语言集:
<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="msg/js/en.js"></script>
- 增加空白 div 元素:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
- 增加工具箱
<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>
- 执行以下代码将 Blockly 注入到 div 中
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
成果如下:
代码生成器:
- 确认所需的语言生成器,引入不同的库文件:
<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>
- 语言生成器库要紧接着 blockly_compressed.js 引入:
<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
- 导出代码:
var code = Blockly.JavaScript.workspaceToCode(workspace);
- 实时生成。生成代码的效率十分高,频繁调用不会有什么大问题,能够通过向 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 等。