程序人生 - 开发程序不写代码,而是靠拼图?
【导语】: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格式:
<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 基础和核心的功能做简要介绍,更详细的文档请参考官方网站。
https://developers.google.com/blockly/
程序人生 - 开发程序不写代码,而是靠拼图?相关推荐
- 小程序云开发获取手机号完整代码 云函数中网络请求第三方接口
小程序云开发获取手机号完整代码 效果图: 小程序代码 <button open-type="getPhoneNumber" bindgetphonenumber=" ...
- 别以为程序员的工作就是写代码
大家好,我是鱼皮,今天给大家分享一个开发小经验. 很多没有实际工作过的同学,可能都会认为程序员的工作只有写代码 + 和产品经理 "拉扯",也会习惯性地用代码量来评价一个程序员的工作 ...
- 为什么中国的程序员喜欢用英文写代码,甚至注释也用英文?
为什么中国的程序员喜欢用英文写代码,甚至注释也用英文? 1.因为英语是国际通用的,用英语方便各国程序员. 2.因为英文才专业 3.因为语句只能用英文 4.因为变量名用英文方便外国同行看代码 5.因为英 ...
- 计算机原始程序,原始程序员竟然是这样写代码的?
原标题:原始程序员竟然是这样写代码的? 如今我们大部分人眼中编程是这样的:一台电脑,一个编辑器,几串代码.彩色的页面,自动缩进,智能联想,隐隐觉得这是一件很艺术的事情. 不过,在几十年前,原始程序员更 ...
- 10月16日云栖精选夜读 | 为什么程序员喜欢在半夜写代码?
本文的作者是 Swizec Teller,他是一名自由职业者兼连续创业家,有超过17 年以上的软件开发经验,自称 A Geek with a Hat.几年前因为在inside.com上发了一篇文章&l ...
- 入职开发很少写代码_如何简化开发人员入职:将开发环境作为代码
入职开发很少写代码 Imagine that only a decade ago system administrators deployed, configured, and maintained ...
- 大数据开发,想写代码不给我写,到底是人性的扭曲,还是道德的沦丧?
从面试到入职,其实中间的过程还是没啥曲折的,offer发得快,毕业后顺理成章的进去了.开始以为做开发,写写spark代码啥的,要不然写写SQL也行-其实不然,啥活都干,就是不写代码!至今已有四月有余了 ...
- 程序人生:教你写出让同事抓狂的代码
对,你没看错. 本文就是教你怎么写出让同事无法维护的代码. 01 程序命名 容易输入的变量名.比如:Fred,asdf 单字母的变量名.比如:a,b,c,x,y,z(如果不够用,可以考虑 a1,a2, ...
- 编程开发工具一览:新手到大神,程序员都用什么写代码?
俗话说的好:工欲善其事,必先利其器.一款好的开发工具对程序员来说是至关重要的,可以降低开发成本.提高开发的效率和代码质量. 所以今天分享一些主流的编程开发工具,基本都是我曾经或正在使用的,附带一些使用 ...
最新文章
- Science评论:量子计算目前最大的挑战,在0和1之间
- redis trie
- Codeforces#371 Div2
- 【cs229-Lecture19】微分动态规划
- sqlserver 多排序的问题
- 成功解决ModuleNotFoundError: No module named ‘minepy.mine‘
- ORA-28000: the account is locked 解决方法
- 【bzoj1708】[USACO2007 Oct]Money奶牛的硬币 背包dp
- 基于.net的微服务架构下的开发测试环境运维实践
- .NET跨平台之旅:将QPS 100左右的ASP.NET Core站点部署到Linux服务器上
- 【Flink】Flink kafka报错 Auto-commit of offsets failed for group Offset commit failed with a retriable
- 2021-11-10 动态粒子背景插件
- Hibernate注释总结
- c语言api接口文档模板,apiDoc生成接口文档,不费吹灰之力
- Azkaban的安装部署
- uni-app 报错:代码使用了scss/sass语言,但未安装相应的编译器插件,请前往插件市场安装该插件
- c语言x20是什么意思,为什么vivo X20坚持不用TYPE-C插口?
- 三行九个点,用4条线段连接(扩展,用3条,用1条)
- App/QoE-Based Congestion control
- 在家使用IPv6访问NAS服务器