代碼生成器
Blockly的大多數(shù)應(yīng)用程序都要求將用戶的程序翻譯成JavaScript，Python，PHP瓮下，Lua，Dart或其他語(yǔ)言钝域。此操作由Blockly在客戶端執(zhí)行讽坏。這個(gè)過(guò)程就需要代碼生成器。
生成代碼
第一步是包含所用語(yǔ)言的生成器例证。Blockly包含以下5種生成器路呜，分別對(duì)應(yīng)不同的語(yǔ)言：
- javascript_compressed.js
- python_compressed.js
- php_compressed.js
- lua_compressed.js
- dart_compressed.js
當(dāng)然，在引入某個(gè)生成器之前织咧，你應(yīng)該先引入blockly_compressed.js胀葱。例如，下面是包含的JavaScript生成器：
<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
接下來(lái)笙蒙，在應(yīng)用程序中可以隨時(shí)通過(guò)調(diào)用下來(lái)的函數(shù)將用戶在工作區(qū)組合的塊導(dǎo)出為代碼：
var code = Blockly.JavaScript.workspaceToCode(workspace);
同理抵屿，如果你需要生成其它語(yǔ)言的代碼，則把：
<script src="https://blockly-demo.appspot.com/static/javascript_compressed.js"></script>
中的JavaScript替換成Python捅位，PHP轧葛，Lua，或Dart艇搀。
實(shí)時(shí)生成
生成代碼是一個(gè)非衬虺叮快速的操作，因此你可以時(shí)常調(diào)用此函數(shù)焰雕。一個(gè)常見(jiàn)的策略是通過(guò)向Blockly的更改事件添加監(jiān)聽(tīng)器來(lái)實(shí)時(shí)生成和顯示代碼：
function myUpdateFunction(event) {
var code = Blockly.JavaScript.workspaceToCode(workspace);
console.info(code)
}
workspace.addChangeListener(myUpdateFunction);
在這里可以看到示例
查看event以獲取更多信息姜胖。
給自定義塊添加生成器函數(shù)
在上文中我們提到了如何去創(chuàng)建自定義工具，但我們同時(shí)還要指定這個(gè)塊背后對(duì)應(yīng)的代碼淀散。這樣才能將該模塊轉(zhuǎn)換為代碼右莱。標(biāo)準(zhǔn)生成器通常采用以下格式：
Blockly.JavaScript['text_length'] = function(block) {
// String or array length.
var argument0 = Blockly.JavaScript.valueToCode(block, 'VALUE',
Blockly.JavaScript.ORDER_FUNCTION_CALL) || '\'\'';
return [argument0 + '.length', Blockly.JavaScript.ORDER_MEMBER];
};
生成器函數(shù)對(duì)塊進(jìn)行引用以進(jìn)行處理。它將輸入（上面的VALUE輸入框）渲染為代碼串档插，然后將這些代碼串連接成更大的表達(dá)式慢蜓。
請(qǐng)參閱使用自定義生成器 了解更多詳細(xì)信
綜合示例
下面的例子中，我們自定義了一個(gè)工具lenght_of郭膛，同時(shí)指定了它背后對(duì)應(yīng)的代碼晨抡。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: Fixed Blockly</title>
<script src="../../blockly_compressed.js"></script>
<script src="../../blocks_compressed.js"></script>
<script src="../../msg/js/en.js"></script>
<script src="../../javascript_compressed.js"></script>
<style>
body {
background-color: #fff;
font-family: sans-serif;
}
h1 {
font-weight: normal;
font-size: 140%;
}
</style>
</head>
<body>
<div id="blocklyDiv" style="height: 580px; width: 600px;"></div>
<div>
<button id="gerateCode">生成代碼</button>
<button id="runCode">執(zhí)行代碼</button>
</div>
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
<block type="string_length"></block>
</xml>
<script type="text/javascript">
var code = ""
document.getElementById("gerateCode").addEventListener("click",function(){
console.info(".....代碼如下....")
code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
console.info(code)
});
document.getElementById("runCode").addEventListener("click",function(){
console.info("執(zhí)行代碼如下....")
try{
eval(code)
}
catch(e){
console.info("執(zhí)行代碼錯(cuò)誤",e)
}
});
</script>
<script type="text/javascript">
Blockly.Blocks['string_length'] = {
init: function() {
this.jsonInit({
"message0": 'length of %1',
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": "String"
}
],
"output": "Number",
"colour": 160,
"tooltip": "Returns number of letters in the provided text.",
"helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
});
}
};
Blockly.JavaScript['string_length'] = function(block) {
// String or array length.
var argument0 = Blockly.JavaScript.valueToCode(block, 'VALUE',
Blockly.JavaScript.ORDER_FUNCTION_CALL) || '\'\'';
return [argument0 + '.length', Blockly.JavaScript.ORDER_MEMBER];
// return "'aaa'.length";
};
</script>
<script>
var demoWorkspace = Blockly.inject('blocklyDiv',
{
media: '../../media/',
toolbox: document.getElementById('toolbox')
});
</script>
</body>
</html>
