【導語】：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 的迷宮問題的例子：
專案地址:
簡單使用
下載安裝方法很簡單，使用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); 效果如下：
建立自定義塊
Blockly擁有大量預定義的塊，從數學函式導迴圈結構等應有盡有。但是有時候我們仍然需要自定義塊以符合我們個性化的需求。在通常情況下，自定義塊最快的方法就是找到一個最符合需求並且已經存在的塊，在已有基礎上對其進行修改。
小結
https://developers.google.com/blockly/