对少儿编程的一点见解和 blockly 开发的一点心得

什么是 blockly?

关于 blockly，它的创造者谷歌公司在 blockly 的官网中给出了详尽的说明，文档和用例展现

developers.google.com/blockly

它的维基百科中文条目的翻译的水准实在差，我为此修改了维基百科 blockly 的中文条目，在这里为了保持原义，仍是用这样一句英文来归纳它：

A JavaScript library for building visual programming editors.
复制代码

更完善的定义：

Blockly is a library that adds a visual code editor to web and mobile apps.
The Blockly editor uses interlocking, graphical blocks to represent code concepts like variables, logical expressions, loops, and more. 
It allows users to apply programming principles without having to worry about syntax or the intimidation of a blinking cursor on the command line.
复制代码

简而言之，blockly 是一个基于 JavaScript 的可视化的程序开发编辑器 第一眼看上去，它和咱们常见的 Scratch 很像，事实上，Scratch3.0 基于 Blockly 构建，也就是说 Scratch3.0 中包含了 Blockly，可是两者都具备可视化模块编程的特色，可是在设计理念上却截然不同

关于 Blockly 和 Scratch 之间的异同点，我推荐你们在这篇博客里寻找答案：blog.just4fun.site/post/少儿编程/s…

blockly 在少儿编程中能用来作什么？

近年来，少儿编程的概念在不断被热炒。计算机要从娃娃抓起彷佛已经实现了。在中国1、二线城市乃至个人家乡，一个山西的县级市里，咱们都能看到各类品牌的少儿编程培训机构。他们或是同当地教育部门合做，在各个学校开展信息学教育；或是做为头部创业机构的加盟商，在焦虑的家长中寻找合适的韭菜客户。实事求是地说，联想到大学里不少同窗的编程实践能力，我不认为目前市场上的少儿编程培训机构在现阶段对大多数普通青少年在智力开发和编程能力上能起到家长们想象中的做用。软件开发发展到今天，已通过了那个须要程序员在寄存器上跳舞的年代了，可是对不少不感兴趣的青少年和大学生而言，并无那么强大的驱动力。你敢想象我见过不少计算机专业的大学生除了在课堂上和必要的做业以外一行代码都没写过？学习真正的编程是无疑会对青少年产生深远影响，可是在如今的中国，它彷佛是一个被资本营销的泡沫。强烈建议那些对少儿编程抱有很大指望的家长本身先写个几百行代码，再决定要不要给孩子报名

可是有一点我十分认同：青少年是适当接触编程的基本概念和基础实践是有益无害的，有助于青少年创建缜密的逻辑思惟能力，为他们将来发展打下良好的基础，可是这里有一个没法回避的问题：在不少青少年没有掌握英语和基本的计算机操做能力的时候，如何进行编程教学？他们可能键盘都不熟悉，怎么能奢求他们配置 IDE，键入和调试用英文书写的高级语言代码？这个没法回避的难题有一个不错的答案：使用 blockly 开展学习

做为可视化的程序开发编辑器，咱们在有 blockly 集成的环境中，从左侧有限的选项里拖拽积木块，按照咱们所计划的顺序来排列和组合这些积木块，单击运行按钮就能够看到运行结果，全程不须要用到鼠标和显示器外的其余计算机外设，这样的操做对青少年而言太友好了，这么看，blockly 这个答案是不错的

对比上下两者，你以为哪一个更容易被青少年接受？

开发者的使命

首先咱们应该明确一个观点:Blockly is for developers. Blockly apps are for students，开发者的使命不是拖拽积木设计程序，而是要对这个编辑器进行合理的开发，使之适应不一样的需求

目前在互联网上关于各种语言、框架和库的中文教程可谓汗牛充栋，其中也不乏精品，可是关于 blockly 的教程却少而又少，只有部分博客零散的介绍了一些经验，我在一开始接手 blockly 开发时遇到了很大的困难。但事实上这是一件好事，由于这样的状况给了我一开始就只能阅读官方文档，运行官方示例的选项

clone 官方示例

git clone https://github.com/google/blockly.git
复制代码

在 VScode 中打开这个文件夹，找到 blockly/demos/toolbox/index.html 在浏览器中打开这个 index.html 文件，在这里咱们能够很方便的看到 blockly 编辑器的结构，并能够动手修改这里的 index.html 文件

在源码阅读中咱们很容易知道：在图形界面上的增删积木，在 index.html 文件中经过增删<block>标签进行，至于其余更多的内容，在阅读官方文档和实践中得真知吧！

在开发中我接触到的两个涉及源码的问题：

撤回操做的问题

在我接手的一个项目中，引入了 blockly 的编辑器区域初始化后会生成一个不可删除的 [ 开始 ] 积木来做为程序运行的惟一的入口，在没有进行任何操做的状况下右键选项选择撤回，会把 [ 开始 ] 积木删除，这样的行为是不被容许的

更难受的是！blockly源文件不是官方文件，是被重构的main_compressed.js 那么我是如何解决这个 bug 的呢？

很简单，这里就须要静下心来仔细寻找，在 VScode 中搜索 撤销，咱们找到了负责翻译的模块，顺藤摸瓜，在 main_compressed.js中找到了

undoOption.text = Blockly.Msg['UNDO'];
复制代码

它所在的函数名是：

Blockly.WorkspaceSvg.prototype.showContextMenu_

这么看就很清晰了，这个函数负责右键选项的逻辑，那么关于撤销和重作，我找到了这样的代码：

var undoOption = {};
  undoOption.text = Blockly.Msg['UNDO'];
  undoOption.enabled = this.undoStack_.length > 0;
  undoOption.callback = this.undo.bind(this, false);
  menuOptions.push(undoOption);
  var redoOption = {};
  redoOption.text = Blockly.Msg['REDO'];
  redoOption.enabled = this.redoStack_.length > 0;
  redoOption.callback = this.undo.bind(this, true);
  menuOptions.push(redoOption);

复制代码

能够看到undoStack_是workspace中的各项操做的储存的栈，并且undoOption.enabled属性与其长度有关，因而打印输出初始状态下栈的长度

console.log(this.undoStach_.length);
复制代码

运行程序，控制台输出2

果真！那接下来是事情就简单了，只须要把原来的该选项是否可用的判断条件改成是否大于2

undoOption.enabled = this.undoStack_.length > 2;
复制代码

再次运行程序，问题解决

垃圾桶和禁用积木块的问题

这是一个颇有趣的 bug : 在编辑区域禁用某个积木块后，将它删除掉，会发如今垃圾桶的已删除列表中单击这个积木没法还原，可是拖动却能够还原

blockly-demo.appspot.com/static/demo…

谷歌 blockly 源码中的处理是：在积木进入垃圾桶后，调用node.removeAttribute()函数，会把当前的位置属性和disable属性移除，因此单击垃圾桶中的积木不会出如今原来的位置，而是出如今workspace里垃圾桶中的位置；而且在被禁用的积木进入垃圾桶时，自身的disable属性会改成enable，blockly 官网中所给出的实例都是如此：被禁用的积木删除后在垃圾桶中的显示都会变为可用

而我修改的 blockly 源码在改动后，把移除disabled属性的方法删去，因此致使当前的 bug ，这里我以为若是没有特殊状况，仍是遵照谷歌官方的逻辑比较好