對少兒編程的一點見解和 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 ，這裏我以爲若是沒有特殊狀況，仍是遵照谷歌官方的邏輯比較好