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

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

简介

Blockly是一个向Web和移动应用程序添加可视化代码编辑器的库,块之间使用互锁的图形块来表示代码,如变量,逻辑表达式,循环等。该编辑器将代码表示为一个个的图形块,通过图形块之间的连接保证语法的正确性,同时支持自定义块以连接到应用程序中。

file

从用户的角度看,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的迷宫问题的例子: file

项目地址:
https://github.com/google/blockly

简单使用

下载安装方法很简单,使用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"
    }
  ]
}

效果如下: file

创建固定大小的Blockly工作区

  1. 引入Blockly库和用户语言集:
    <script src="blockly_compressed.js"></script>
    <script src="blocks_compressed.js"></script>
    <script src="msg/js/en.js"></script>
  2. 添加空白div元素:
    <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  3. 添加工具箱
    <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>
  4. 执行以下代码将Blockly注入到div中
    <script>
    var workspace = Blockly.inject('blocklyDiv',
       {toolbox: document.getElementById('toolbox')});
    </script>
    效果如下: file

代码生成器:

  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>
  2. 语言生成器库要紧接着blockly_compressed.js引入:
    <script src="blockly_compressed.js"></script>
    <script src="javascript_compressed.js"></script>
  3. 导出代码:
    var code = Blockly.JavaScript.workspaceToCode(workspace);
  4. 实时生成。生成代码的效率非常高,频繁调用不会有什么大问题,可以通过向Blockly的change事件添加监听器来实时生成和显示代码:
    function myUpdateFunction(event) {
    var code = Blockly.JavaScript.workspaceToCode(workspace);
    document.getElementById('textarea').value = code;
    }
    workspace.addChangeListener(myUpdateFunction);
    效果如下: file file

创建自定义块

Blockly拥有大量预定义的块,从数学函数导循环结构等应有尽有。但是有时候我们仍然需要自定义块以符合我们个性化的需求。在通常情况下,自定义块最快的方法就是找到一个最符合需求并且已经存在的块,在已有基础上对其进行修改。

小结

以上只是对Blockly基础和核心的功能做简要介绍,更详细的文档请参考官方网站。

开源前哨 日常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库,包括:Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。

已标记关键词 清除标记
相关推荐
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页