当前位置: 首页 > 科技观察

拼图也能写代码?快来试试这款谷歌开源工具吧!

时间:2023-03-17 11:57:02 科技观察

【简介】:Blockly是Google开源的基于网络的可视化程序编辑器。用户可以将一些定义好的图形块拼接起来构建应用程序。Blockly是一个为Web和移动应用程序添加可视化代码编辑器的库,使用块之间互锁的图形块来表示代码,例如变量、逻辑表达式、循环等。编辑器将代码逐一表示为图形块,并通过图形块之间的连接保证语法的正确性,支持自定义块连接到应用程序。从用户的角度来看,Blockly是直观的。一种构建代码的可视化方式。对于开发人员而言,Blockly是一种开箱即用的UI,用于创建可生成语法正确的用户代码的可视化语言。目前支持JS、Python、PHP、Lua、Dart。它是一个纯JavaScript库,不依赖服务器,兼容主流浏览器,包括Chrome、Firefox、Safari、Opera和IE(IE11),支持定制和扩展。Blockly具有以下特性和优势:可导出代码。用户可以提取和导出基于块的程序,并在自己的文本编程中使用它们。开源。Blockly上的所有内容都是开放的。可扩展。支持自定义块或删除不需要的块和功能进行功能调整定制。强大的。可用于执行计算复杂的编程任务,例如计算标准偏差。全球化。至今已被翻译成40多种语言。其他类似工具:ScratchBlocks、PXT、Droplet、Snap。一个解决BlocklyGames迷宫问题的例子:项目地址:https://github.com/google/blockly使用简单下载安装方法很简单,直接使用npm安装:npminstallblocklyBlocklyToolbox工具箱来自哪个用户可以创建新的blocks工具箱的侧边菜单,使用XML或JSON指定工具箱的结构,并在注入页面后传递给Blockly。XML格式:............JSON格式:{"contents":[{"kind":"category","name":"Logic","colour":"210"},{"kind":"category","name":"Loops","colour":"120"}]}效果如下:创建一个固定大小的Blockly工作区,导入Blockly库和用户语言集:添加一个空白的div元素:

添加工具箱执行以下代码将Blockly注入div效果如下:代码生成器:确认需要的语言生成器,引入不同的库文件:语言生成器库应在blockly_compressed.js之后立即导入:导出代码:varcode=Blockly.JavaScript.workspaceToCode(workspace);实时生成生成代码的效率非常高,频繁调用不会有什么大问题,可以通过在Blockly的change事件中添加监听器来实时生成并显示代码:functionmyUpdateFunction(event){varcode=Blockly.JavaScript.workspaceToCode(workspace);document.getElementById('textarea').value=code;}workspace.addChangeListener(myUpdateFunction);效果如下:创建自定义块Blockly有大量的预定义块,从数学函数到循环结构等一切。但有时我们仍然需要o自定义区块以满足我们的个性化需求。一般来说,自定义block最快的方式就是找到一个最符合需求且已经存在的block,在已有的基础上进行修改。以上总结只是简单介绍了Blockly的基础知识和核心功能。更详细的文档请参考官网。https://developers.google.com/blockly/