【導(dǎo)語】：Blockly 是 Google 開源的基于 web 的可視化程序編輯器，用戶可以將一些定義好的圖形塊拼接在一起，用來構(gòu)建應(yīng)用程序。

簡介

Blockly 是一個向 Web 和移動應(yīng)用程序添加可視化代碼編輯器的庫，塊之間使用互鎖的圖形塊來表示代碼，如變量，邏輯表達(dá)式，循環(huán)等。該編輯器將代碼表示為一個個的圖形塊，通過圖形塊之間的連接保證語法的正確性，同時支持自定義塊以連接到應(yīng)用程序中。

從用戶的角度看，Blockly 是一種直觀。可視化的代碼構(gòu)建方式，對于開發(fā)人員來說，Blockly 是一種現(xiàn)成的 UI，用于創(chuàng)建一種可視化語言，該語言可以生成語法正確的用戶代碼。目前支持JS、Python、PHP、Lua、Dart。

它是一個純JavaScript 庫，不依賴于服務(wù)端，與主流瀏覽器兼容，包括Chrome、Firefox、Safari、Opera和IE（IE11），并且支持定制和擴(kuò)展。

Blockly 具有以下特點和優(yōu)勢：

• 可導(dǎo)出代碼。用戶可以將基于塊的程序提取導(dǎo)出，并用于自己的文本編程中。
• 開源。Blockly的所有內(nèi)容都是開放的。
• 可擴(kuò)展。支持自定義塊或刪除不需要的塊和功能來進(jìn)行功能調(diào)整定制。
• 功能強(qiáng)大。可以用來執(zhí)行計算復(fù)雜的編程任務(wù)，如計算標(biāo)準(zhǔn)差。
• 國際化。目前已經(jīng)被翻譯成40多種語言。
• 其他類似的工具：Scratch Blocks、PXT、Droplet、Snap。

解決 Blockly Games 的迷宮問題的例子：

項目地址:

https://github.com/google/blockly

簡單使用

下載安裝方法很簡單，使用npm直接安裝即可：

npm install blockly 

Blockly工具箱

工具箱是用戶可以從中創(chuàng)建新塊的側(cè)邊菜單，使用XML或JSON指定工具箱的結(jié)構(gòu)，并在注入頁面后被傳遞給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" 
 
} 
 
] 
 
} 

效果如下：

創(chuàng)建固定大小的Blockly工作區(qū)

引入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> 

執(zhí)行以下代碼將Blockly注入到div中

<script> 
 
var workspace = Blockly.inject('blocklyDiv', 
 
{toolbox: document.getElementById('toolbox')}); 
 
</script> 

效果如下：

代碼生成器：

確認(rèn)所需的語言生成器，引入不同的庫文件：

<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> 

導(dǎo)出代碼：

var code = Blockly.JavaScript.workspaceToCode(workspace); 

實時生成。生成代碼的效率非常高，頻繁調(diào)用不會有什么大問題，可以通過向Blockly的change事件添加監(jiān)聽器來實時生成和顯示代碼：

function myUpdateFunction(event) { 
 
var code = Blockly.JavaScript.workspaceToCode(workspace); 
 
document.getElementById('textarea').value = code; 
 
} 
 
workspace.addChangeListener(myUpdateFunction); 

效果如下：

創(chuàng)建自定義塊

Blockly擁有大量預(yù)定義的塊，從數(shù)學(xué)函數(shù)導(dǎo)循環(huán)結(jié)構(gòu)等應(yīng)有盡有。但是有時候我們?nèi)匀恍枰远x塊以符合我們個性化的需求。在通常情況下，自定義塊最快的方法就是找到一個最符合需求并且已經(jīng)存在的塊，在已有基礎(chǔ)上對其進(jìn)行修改。

小結(jié)

以上只是對 Blockly 基礎(chǔ)和核心的功能做簡要介紹，更詳細(xì)的文檔請參考官方網(wǎng)站。

https://developers.google.com/blockly/