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

簡(jiǎn)介

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

從用戶的角度看，Blockly 是一種直觀?？梢暬拇a構(gòu)建方式，對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)，Blockly 是一種現(xiàn)成的 UI，用于創(chuàng)建一種可視化語(yǔ)言，該語(yǔ)言可以生成語(yǔ)法正確的用戶代碼。目前支持JS、Python、PHP、Lua、Dart。

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

Blockly 具有以下特點(diǎn)和優(yōu)勢(shì)：

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

解決 Blockly Games 的迷宮問(wèn)題的例子：

項(xiàng)目地址:

https://github.com/google/blockly

簡(jiǎn)單使用

下載安裝方法很簡(jiǎn)單，使用npm直接安裝即可：

npm install blockly 

Blockly工具箱

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

<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)所需的語(yǔ)言生成器，引入不同的庫(kù)文件：

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

語(yǔ)言生成器庫(kù)要緊接著blockly_compressed.js引入：

<script src="blockly_compressed.js"></script> 
 
<script src="javascript_compressed.js"></script> 

導(dǎo)出代碼：

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

實(shí)時(shí)生成。生成代碼的效率非常高，頻繁調(diào)用不會(huì)有什么大問(wèn)題，可以通過(guò)向Blockly的change事件添加監(jiān)聽(tīng)器來(lái)實(shí)時(shí)生成和顯示代碼：

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)有盡有。但是有時(shí)候我們?nèi)匀恍枰远x塊以符合我們個(gè)性化的需求。在通常情況下，自定義塊最快的方法就是找到一個(gè)最符合需求并且已經(jīng)存在的塊，在已有基礎(chǔ)上對(duì)其進(jìn)行修改。

小結(jié)

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

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