拼圖也能寫代碼？快來試試這個(gè)谷歌開源的工具！
【導(dǎo)語】：Blockly 是 Google 開源的基于 web 的可視化程序編輯器，用戶可以將一些定義好的圖形塊拼接在一起，用來構(gòu)建應(yīng)用程序。
簡介
Blockly 是一個(gè)向 Web 和移動應(yīng)用程序添加可視化代碼編輯器的庫，塊之間使用互鎖的圖形塊來表示代碼，如變量，邏輯表達(dá)式，循環(huán)等。該編輯器將代碼表示為一個(gè)個(gè)的圖形塊，通過圖形塊之間的連接保證語法的正確性，同時(shí)支持自定義塊以連接到應(yīng)用程序中。
從用戶的角度看，Blockly 是一種直觀。可視化的代碼構(gòu)建方式，對于開發(fā)人員來說，Blockly 是一種現(xiàn)成的 UI，用于創(chuàng)建一種可視化語言，該語言可以生成語法正確的用戶代碼。目前支持JS、Python、PHP、Lua、Dart。
它是一個(gè)純JavaScript 庫，不依賴于服務(wù)端，與主流瀏覽器兼容，包括Chrome、Firefox、Safari、Opera和IE（IE11），并且支持定制和擴(kuò)展。
Blockly 具有以下特點(diǎn)和優(yōu)勢：
可導(dǎo)出代碼。用戶可以將基于塊的程序提取導(dǎo)出，并用于自己的文本編程中。 開源。Blockly的所有內(nèi)容都是開放的。 可擴(kuò)展。支持自定義塊或刪除不需要的塊和功能來進(jìn)行功能調(diào)整定制。 功能強(qiáng)大?？梢杂脕韴?zhí)行計(jì)算復(fù)雜的編程任務(wù)，如計(jì)算標(biāo)準(zhǔn)差。 國際化。目前已經(jīng)被翻譯成40多種語言。 其他類似的工具：Scratch Blocks、PXT、Droplet、Snap。
解決 Blockly Games 的迷宮問題的例子：
項(xiàng)目地址:
https://github.com/google/blockly
簡單使用
下載安裝方法很簡單，使用npm直接安裝即可：
npm?install?blockly
Blockly工具箱
工具箱是用戶可以從中創(chuàng)建新塊的側(cè)邊菜單，使用XML或JSON指定工具箱的結(jié)構(gòu)，并在注入頁面后被傳遞給Blockly。
XML格式：
"toolbox"?style="display:?none">
??"Logic"?colour="210">...
??"Loops"?colour="120">...
??"Math"?colour="230">...
??"Colour"?colour="20">...
??"Variables"?colour="330"?custom="VARIABLE">
??"Functions"?colour="290"?custom="PROCEDURE">
JSON格式：
{
??"contents":?[
????{
??????"kind":?"category",
??????"name":?"Logic",
??????"colour":?"210"
????},
????{
??????"kind":?"category",
??????"name":?"Loops",
??????"colour":?"120"
????}
??]
}
效果如下：
創(chuàng)建固定大小的Blockly工作區(qū)
引入Blockly庫和用戶語言集：
添加空白div元素：
"blocklyDiv"?style="height:?480px;?width:?600px;"> 添加工具箱
"toolbox"?style="display:?none">
??type="controls_if">
??type="controls_repeat_ext">
??type="logic_compare">
??type="math_number">
??type="math_arithmetic">
??type="text">
??type="text_print">
執(zhí)行以下代碼將Blockly注入到div中
效果如下：
代碼生成器：
確認(rèn)所需的語言生成器，引入不同的庫文件：
語言生成器庫要緊接著blockly_compressed.js引入：
導(dǎo)出代碼：
var?code?=?Blockly.JavaScript.workspaceToCode(workspace);
實(shí)時(shí)生成。生成代碼的效率非常高，頻繁調(diào)用不會有什么大問題，可以通過向Blockly的change事件添加監(jiān)聽器來實(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ǔ)上對其進(jìn)行修改。
以下是自定義塊的演示視頻：
小結(jié)
以上只是對 Blockly 基礎(chǔ)和核心的功能做簡要介紹，更詳細(xì)的文檔請參考官方網(wǎng)站。
https://developers.google.com/blockly/
-?EOF -?
更多優(yōu)秀開源項(xiàng)目（點(diǎn)擊下方圖片可跳轉(zhuǎn)）
開源前哨
日常分享熱門、有趣和實(shí)用的開源項(xiàng)目。參與維護(hù)10萬+star 的開源技術(shù)資源庫，包括：Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET 等
關(guān)注后獲取
回復(fù)?資源?獲取 10萬+ star 開源資源
分享、點(diǎn)贊和在看
支持我們分享更多優(yōu)秀開源項(xiàng)目，謝謝！