Blocks的前世今生
在開始本案例之前替蔬，大家先通過下面的小例子，鞏固一下Blockly開發(fā)者工具的使用。實現(xiàn)如下代碼塊的設(shè)計：
參考答案如下：
一灵妨、Plane中raw塊的模擬
1. 塊的設(shè)計
在Block Factory中設(shè)計raw代碼塊的外觀衣陶，完成設(shè)計后點擊“Save raw-block”按鈕柄瑰，將新建塊保存到Blocks Library中闸氮。
2. 塊的代碼導(dǎo)出
點擊Block Exporter選項卡，選擇raw-block代碼：
修改界面中間部分的Export Setting屬性：
- 勾中Block Definition(s)和Generator Stub(s)選項教沾；
- 將二者的Format屬性（語言格式）蒲跨，都選為JavaScript；
- 文件的命名授翻，為方便辨認(rèn)和引用或悲，文件命名時建議采用塊名（raw-block）+ b/g的形式，如命名為raw-block-b和raw-block-g堪唐。
屬性修改完成之后巡语，點擊Export按鈕即可對部分代碼進(jìn)行下載。導(dǎo)出的代碼分兩部分淮菠，一部分是Block Denifition代碼男公，一部分是Generator Stub代碼。
（1）Block Denifition代碼
此部分代碼合陵，負(fù)責(zé)控制新建塊（raw-blocks）的外觀枢赔，包括樣式、顏色等拥知，最終放在blocks文件夾中踏拜。
（2）Generator Stub代碼
此部分代碼，負(fù)責(zé)控制新建塊（raw-blocks）的代碼轉(zhuǎn)換低剔，最終放在generators的對應(yīng)子文件夾中速梗。
3. html文件的修改
在完成塊的代碼設(shè)計與導(dǎo)出之后，需要將其導(dǎo)入至html文件中襟齿，以呈現(xiàn)給用戶姻锁。
（1）導(dǎo)入raw_block_b文件
<script src="../../blocks/raw_block_b.js"></script>
（2）導(dǎo)入raw_block_g文件
<script src="../../generators/javascript/raw_block_g.js"></script>
（3）導(dǎo)入raw_block_g塊
<block type="raw_block"></block>
完成之后保存html文件，并在瀏覽器中打開蕊唐，即可看到你所新建的塊raw(5)了屋摔。
提示：
直接導(dǎo)出的文件放到指定的文件夾下并導(dǎo)入html文件中，可以直接使用替梨；不過保險起見钓试，最好類比其他blocks和generators中的文件，在文件頂部加上相應(yīng)的“頭”文件副瀑。 如下是在raw_block_b中添加的代碼：
'use strict'; goog.provide('Blockly.Blocks.repeat_times'); // Deprecated goog.provide('Blockly.Constants.repeat_times'); goog.require('Blockly.Blocks'); goog.require('Blockly');在html文件修改的過程中弓熏，應(yīng)注意raw_block_b、raw_block_g和raw_block插入的位置和順序糠睡，會影響顯示的效果挽鞠，可自行探索嘗試。
2. print-py塊的設(shè)計
1. 塊的設(shè)計
在Block Factory中設(shè)計print-py代碼塊的外觀，完成設(shè)計后點擊“Save print-py”按鈕信认，將新建塊保存到Blocks Library中材义。
2. 塊的代碼導(dǎo)出
點擊Block Exporter選項卡，選擇print-py代碼：
修改界面中間部分的Export Setting屬性：
- 勾中Block Definition(s)和Generator Stub(s)選項嫁赏；
- 選擇二者的Format屬性（語言格式）其掂，前者選為JavaScript，后者選為Python潦蝇；
- 文件的命名款熬，為方便辨認(rèn)和引用，文件命名時建議采用塊名（print-py）+ b/g的形式攘乒，如命名為print-py-b和print-py-g贤牛。
屬性修改完成之后，點擊Export按鈕即可對部分代碼進(jìn)行下載则酝。導(dǎo)出的代碼分兩部分殉簸，一部分是Block Denifition代碼，一部分是Generator Stub代碼堤魁。
（1）Block Denifition代碼
此部分代碼喂链，負(fù)責(zé)控制新建塊（print-py）的外觀，包括樣式妥泉、顏色等，最終放在blocks文件夾中洞坑。
（2）Generator Stub代碼
此部分代碼盲链，負(fù)責(zé)控制新建塊（print-py）的代碼轉(zhuǎn)換，最終放在generators的對應(yīng)子文件夾中迟杂。
3. html文件的修改
在完成塊的代碼設(shè)計與導(dǎo)出之后刽沾，需要將其導(dǎo)入至html文件中，以呈現(xiàn)給用戶排拷。
（1）導(dǎo)入print_py_b文件
<script src="../../blocks/print_py_b.js"></script>
（2）導(dǎo)入raw_block_g文件
<script src="../../generators/python/print_py_g.js"></script>
（3）導(dǎo)入raw_block_g塊
<block type="print_py"></block>
完成之后保存html文件侧漓，并在瀏覽器中打開，即可看到你所新建的塊“打印”了监氢。
4. 優(yōu)化改進(jìn)
完成前3步之后布蔗，功能已基本實現(xiàn)，現(xiàn)在有3個小任務(wù)浪腐，對print-py塊進(jìn)行優(yōu)化纵揍。
- （1）print-py代碼是否可以與raw代碼整合到一個文件中，為什么
- （2）print-py塊如何類比print塊加上默認(rèn)陰影
<block type="print_py">
<value name="print_sub"> // value的name為塊設(shè)計中的value input的name
<shadow type="text">
<field name="TEXT">Test</field>
</shadow>
</value>
</block>
- （3）完善print-py塊的其他幾種語言的轉(zhuǎn)換功能
3. Repeat-Do塊的復(fù)現(xiàn)
在Block Factory中設(shè)計repeat-do代碼塊的外觀议街，完成設(shè)計后點擊“Save repeat-do”按鈕泽谨，將新建塊保存到Blocks Library中。
2. 塊的代碼導(dǎo)出
可以選擇像前兩個demo中一樣，直接Export代碼塊對應(yīng)的代碼吧雹，不過這里為了方便骨杂，直接用raw_block的js文件，復(fù)制repeat-do的兩部分代碼雄卷，分別粘貼到raw-block-b.js和raw-block-g.js文件中搓蚪，保存即可。
3. html文件的修改
在完成塊的代碼設(shè)計與導(dǎo)出之后龙亲，需要將其導(dǎo)入至html文件中陕凹，以呈現(xiàn)給用戶。
（1）raw_block_b和raw_block_g文件已導(dǎo)入鳄炉，無需重復(fù)導(dǎo)入
<script src="../../blocks/raw_block_b.js"></script>
<script src="../../generators/javascript/raw_block_g.js"></script>
（2）導(dǎo)入repeat-do代碼塊杜耙，并加上默認(rèn)陰影
<block type="repeat_do">
<value name="repeat_times">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
完成之后保存html文件，并在瀏覽器中打開拂盯，即可看到你所新建的塊repeat-do代碼塊了佑女。
是不是已經(jīng)分辨不出哪個塊是你自己創(chuàng)建的了？
4. 代碼轉(zhuǎn)換功能完善
雖然從外觀已經(jīng)很難分辨出哪個是我們自定義的repeat-do代碼塊了谈竿，但是我們并沒有給它添加實際的代碼轉(zhuǎn)換功能团驱，如下圖：
一個repeat-do代碼塊會有兩個“參數(shù)”的輸入，一個是次數(shù)空凸，一個是需要do的語句嚎花，它們轉(zhuǎn)換后的JavaScript代碼應(yīng)該為：
for (var count = 0; count < 10; count++) {
window.alert('abc');
}
所以我們參照這個樣式，來進(jìn)行repeat-do自定義塊代碼的設(shè)計：
Blockly.JavaScript['repeat_do'] = function(block) {
var value_repeat_times = Blockly.JavaScript.valueToCode(block, 'repeat_times',Blockly.JavaScript.ORDER_ATOMIC);
var statements_repeat_statement = Blockly.JavaScript.statementToCode(block, 'repeat_statement');
// TODO: Assemble JavaScript into code variable.
var code = 'for(var count=0;count<' + value_repeat_times + ';count++){\n ' + statements_repeat_statement + '}\n';
return code;
};
至此呀洲，repeat-do代碼塊大功告成紊选！
