拼圖也能寫代碼？快來試試這個谷歌開源的工具！

作者：小秋 2021-01-27 11:36:34

Blockly 是 Google 開源的基于 web 的可視化程序編輯器，用戶可以將一些定義好的圖形塊拼接在一起，用來構建應用程序。

【導語】：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);

效果如下：