?一個(gè)較大的程序一般應(yīng)分為若干個(gè)程序模塊，每一個(gè)模塊用來實(shí)現(xiàn)一個(gè)特定的功能。所有的高級(jí)語言中都有子程序這個(gè)概念，用子程序?qū)崿F(xiàn)模塊的功能。比如在C語言中，子程序的作用是由函數(shù)完成的，一個(gè)C程序可由一個(gè)主函數(shù)和若干個(gè)函數(shù)構(gòu)成，由主函數(shù)調(diào)用其它函數(shù)，其他函數(shù)也可以相互調(diào)用，同一個(gè)函數(shù)可以被一個(gè)或多個(gè)函數(shù)調(diào)用任意多次。在Blockly中，也支持函數(shù)的定義和使用。
?在程序設(shè)計(jì)中，常將一些常用的功能模塊編寫成函數(shù)，放在函數(shù)庫中供公共選用，所以要善于利用函數(shù)，以減少重復(fù)編寫代碼的工程量。
?在C語言和別的語言中，函數(shù)的一個(gè)明顯的特征就是使用時(shí)帶括號(hào)()，必要的話，括號(hào)中還要包含數(shù)據(jù)和變量，稱為參數(shù)(Parameter)，參數(shù)是函數(shù)需要處理的的數(shù)據(jù)。根據(jù)參數(shù)的有無，可將函數(shù)簡(jiǎn)單的分為無參函數(shù)和有參函數(shù)。
?這段話對(duì)于沒有接觸過C語言或其他編程語言的同學(xué)可能比較抽象，不過不必?fù)?dān)心，接下來我們會(huì)通過Blockly向您詳細(xì)的解釋。
?(1)無參函數(shù)的定義
?上圖是我們從Blockly工具箱中拖出的一個(gè)函數(shù)塊，其中:對(duì)函數(shù)進(jìn)行參數(shù)的設(shè)置，無參函數(shù)不需要用到此選項(xiàng)
對(duì)工具箱中的Blockly有了簡(jiǎn)單的了解之后，嘗試動(dòng)手設(shè)計(jì)自己的函數(shù)。
?上圖是一個(gè)簡(jiǎn)單的無參函數(shù)，它的函數(shù)名就叫“無參函數(shù)”，當(dāng)你從工具箱拖動(dòng)一個(gè)塊在編輯區(qū)的同時(shí)，在工具箱中的函數(shù)選項(xiàng)卡中會(huì)生成一個(gè)對(duì)應(yīng)的函數(shù)塊，當(dāng)再用到此函數(shù)時(shí)，就可以像使用其他工具箱中的塊一樣直接使用。
(2)有參函數(shù)的定義?與無參函數(shù)不同，有參函數(shù)需要在“設(shè)置”中對(duì)參數(shù)進(jìn)行設(shè)置，拖動(dòng)“輸入名稱：x”至右側(cè)“輸入”中，并對(duì)參數(shù)進(jìn)行命名即可。
?同時(shí)，像無參函數(shù)一樣，你也可以在左側(cè)工具箱“函數(shù)”選項(xiàng)卡中看到對(duì)應(yīng)的塊。
(3)函數(shù)的返回值?函數(shù)的另外一個(gè)明顯的特征就是返回值，既然函數(shù)可以進(jìn)行數(shù)據(jù)處理，那就有必要將將處理結(jié)果告訴我們，所以很多函數(shù)都有返回值，所謂的返回值就是函數(shù)的執(zhí)行結(jié)果。
?當(dāng)創(chuàng)建的函數(shù)需要返回值時(shí)，可直接從工具箱中拖動(dòng)自帶返回值的函數(shù)塊，可見工具箱中生成的函數(shù)塊左側(cè)帶有凸起的連接。
?這種方式生成的函數(shù)，只有當(dāng)函數(shù)執(zhí)行完成后才會(huì)返回值，如果在函數(shù)執(zhí)行過程中就已經(jīng)產(chǎn)生了想要的結(jié)果，也可以拖動(dòng)"如果..返回"結(jié)束正在執(zhí)行的函數(shù)，并返回執(zhí)行結(jié)果。
?注意：?"如果..返回"在使用時(shí)，只有當(dāng)函數(shù)最初設(shè)計(jì)有返回值時(shí)才有返回值，否則只是簡(jiǎn)單的結(jié)束正在執(zhí)行的函數(shù)。
?下面來做一個(gè)小練習(xí)，設(shè)計(jì)一個(gè)求x, y中最大者的函數(shù)，名為Max(x, y)。
?可以按照思維導(dǎo)圖，一步一步進(jìn)行Max(x, y)函數(shù)的設(shè)計(jì)。在進(jìn)行程序設(shè)計(jì)時(shí)，無論你是簡(jiǎn)單的學(xué)習(xí)，還是進(jìn)行復(fù)雜的開發(fā)，在動(dòng)手之前，一定要對(duì)你所設(shè)計(jì)的程序有一個(gè)良好的規(guī)劃，磨刀不誤砍柴工，好的習(xí)慣很重要，它可以加速你編程水平的提升，提高你的編程效率。
?當(dāng)你設(shè)計(jì)完成后，剩下的就是測(cè)試驗(yàn)證程序結(jié)果了，測(cè)試時(shí)不需要很復(fù)雜，如果可以，最簡(jiǎn)單的就是使用"打印"。
?在前幾章的學(xué)習(xí)中，每章開篇我們的小游戲環(huán)節(jié)，每個(gè)小游戲雖然是可視化編程，和我們學(xué)習(xí)的Blockly很像，但是又有所不同，而這些不同由何而來?這就是我們本章所講的重點(diǎn)，Blockly開發(fā)工具(Blockly Developer Tools)，通過它用戶可以自定義新塊，這使得Blockly可擴(kuò)展性大大提升，同時(shí)也是Blockly的靈活和強(qiáng)大之處。
?本節(jié)面向希望在Blockly中創(chuàng)建新塊的開發(fā)人員。它的基本要求是，有一個(gè)
?可以編輯的Blockly的本地副本，大體上熟悉了Blockly的使用，并且對(duì)JavaScript有一個(gè)基本的理解。
?Blockly帶有大量的預(yù)定義塊，從數(shù)學(xué)函數(shù)到循環(huán)結(jié)構(gòu)的一切，然而為了與外部應(yīng)用程序接口，必須創(chuàng)建自定義塊以形成API。 例如，當(dāng)創(chuàng)建繪圖程序時(shí)，可能需要?jiǎng)?chuàng)建“繪制半徑R的圓”塊。而在大多數(shù)情況下，最簡(jiǎn)單的方法是找到一個(gè)已經(jīng)存在的真正相似的塊，復(fù)制它，并根據(jù)需要修改它。
?第一步是創(chuàng)建一個(gè)塊; 指定其形狀，字段和連接點(diǎn)。 使用Blockly Developer Tools是編寫此代碼的最簡(jiǎn)單的方法，或者，可以在學(xué)習(xí)API之后手動(dòng)編寫該代碼，高級(jí)塊可以響應(yīng)于用戶或其他因素而動(dòng)態(tài)地改變它們的形狀。
?第二步是創(chuàng)建生成器代碼以將新塊導(dǎo)出為編程語言（例如JavaScript，Python，PHP，Lua或Dart）。為了生成既干凈又正確的代碼，必須注意給定語言的操作列表順序，創(chuàng)建更復(fù)雜的塊需要使用臨時(shí)變量和調(diào)用函數(shù)，當(dāng)輸入使用兩次并需要緩存時(shí)，這是尤為重要的。
?Blockly開發(fā)工具是一個(gè)基于Web的開發(fā)工具，可自動(dòng)完成Blockly配置過程的各個(gè)部分，包括創(chuàng)建自定義塊，構(gòu)建工具箱和配置Web Blockly工作區(qū)。
?使用該工具的Blockly開發(fā)者進(jìn)程包括三個(gè)部分：
?1、使用塊工廠和塊導(dǎo)出器創(chuàng)建自定義塊。
?2、使用Workspace Factory構(gòu)建工具箱和默認(rèn)工作空間。
?3、使用Workspace Factory配置工作空間（當(dāng)前是僅限Web的功能）。
?定義一個(gè)塊需要使用到Blockly開發(fā)工具中的塊工廠(Block Factory),塊工廠主要分為三個(gè)區(qū)域：
?（1）編輯區(qū)：對(duì)新增塊進(jìn)行設(shè)計(jì)和編輯
?（2）預(yù)覽區(qū)：對(duì)編輯區(qū)編輯的塊進(jìn)行實(shí)時(shí)預(yù)覽
?（3）代碼區(qū)：代碼區(qū)分為兩個(gè)部分Language code和Generator stub，其中Language code 區(qū)指定和控制新增塊所呈現(xiàn)的形狀，Generator stub區(qū)負(fù)責(zé)新增塊所要生成的代碼。
?在編輯區(qū)的左側(cè)，可以看到4個(gè)基本塊，Input，F(xiàn)ield，Type和Colour，它們是四個(gè)原料庫，使用者可以從這些庫中獲取所需要的任意“原料”，來合成自己的新塊。
?先從最簡(jiǎn)單的介紹，顏色(Colour)塊，它默認(rèn)定義了九種基本顏色，直接將你想要的顏色拖到右側(cè)，拼接到對(duì)應(yīng)的colour的凹槽，便可立即在預(yù)覽區(qū)看到新塊的顏色。
?如果默認(rèn)色彩中沒有你想要的顏色，可以拖動(dòng)任意色彩塊到編輯區(qū)拼接完成后，點(diǎn)擊色塊中的數(shù)字，在色塊的下方出現(xiàn)一個(gè)圓形的調(diào)色盤，轉(zhuǎn)動(dòng)調(diào)色盤，選擇你喜歡的顏色。
?在Blockly中，同一類型的塊通常采用相同的顏色，所以新塊的顏色選擇不能僅憑喜歡，還需要前后兼顧。
?一個(gè)新塊不僅需要有顏色，還需要與其他塊進(jìn)行銜接，這就需要設(shè)計(jì)新增塊的輸入和輸出，它們將決定新增塊的功能、屬性和類別。<>br?接下來看一看輸入(Input)，這是新增塊與其他塊連接的接口之一。
?輸入可以分為三種類型：值輸入(value input)，聲明輸入(statement input)，模擬輸入(dummy input)。首先以值輸入為例，拖動(dòng)值輸入至右側(cè)與Inputs連接，可看到預(yù)覽區(qū)新增塊多了一個(gè)凹槽:
?根據(jù)需要，使用者還可以添加多個(gè)輸入值，但要注意多個(gè)輸入值的名字不能相同，否則會(huì)出現(xiàn)警告，而且在后續(xù)調(diào)用的時(shí)候，也會(huì)沖突報(bào)錯(cuò)，新塊名字也是如此，不能與其他塊同名，就好比如果班里有兩個(gè)學(xué)生名字一樣，那老師點(diǎn)名提問的時(shí)候就有可能出現(xiàn)兩個(gè)同學(xué)同時(shí)起立的尷尬。
?在值輸入中還可以添加域(field)，比如加入最簡(jiǎn)單的文本域，即可在輸入中提示對(duì)應(yīng)的文本，域中的下拉選擇框可設(shè)置文本的對(duì)齊方式。
?這些設(shè)置完畢，選擇新塊的輸入方式，擴(kuò)展式和嵌入式：
?有了輸入之后，別的塊就可以很容易的通過凹槽加入到新塊了，但是，這時(shí)另外一個(gè)值得考慮的問題又出現(xiàn)了，怎樣將新增塊加入到其他的塊之中呢？我們有五種選擇：
?看完值輸入之后，再一起來看一下另一個(gè)常用的輸入類型，聲明輸入(statement input)，它通常用作條件控制和循環(huán)控制。
?使用值輸入和聲明輸入，可以很容易的設(shè)計(jì)出編程中常用的條件語句和循環(huán)語句：
?任務(wù)一：自己動(dòng)手定義一個(gè)新塊，并描述它的功能。
?塊由其名稱引用，因此要?jiǎng)?chuàng)建的每個(gè)塊都必須具有唯一的名稱。 用戶界面強(qiáng)制執(zhí)行此操作，并在您“保存”新塊或“更新”現(xiàn)有塊時(shí)清除。
?您可以在先前保存的塊之間切換，或通過單擊庫按鈕創(chuàng)建新的空塊。更改現(xiàn)有塊的名稱是快速創(chuàng)建具有類似定義的多個(gè)塊的另一種方法。
?塊被保存到瀏覽器的本地存儲(chǔ)，清除瀏覽器的本地存儲(chǔ)將刪除您的塊。 要無限期保存塊，您必須下載庫。 您的塊庫將下載為可導(dǎo)入的XML文件，以將您的塊庫設(shè)置為下載文件時(shí)的狀態(tài)。請(qǐng)注意，導(dǎo)入塊庫將替換當(dāng)前的庫，因此您可能需要先備份導(dǎo)出。
?導(dǎo)入和導(dǎo)出功能也是維護(hù)和共享不同組自定義塊的推薦方式。
?如果你設(shè)計(jì)了塊，并且想要在應(yīng)用程序中使用它們的時(shí)候，可以在塊導(dǎo)出器重完成塊定義和生成器的導(dǎo)出。
?存儲(chǔ)在塊庫中的每個(gè)塊都將顯示在塊選擇器中。 單擊塊以選擇或取消選擇要導(dǎo)出的塊。 如果要選擇庫中的所有塊，請(qǐng)使用“選擇”→“所有存儲(chǔ)在塊庫”選項(xiàng)。 如果使用“工作區(qū)出廠”選項(xiàng)卡構(gòu)建了工具箱或配置了工作區(qū)，則還可以通過單擊“選擇”→“在工作區(qū)工廠中使用”選擇所有使用的塊。
?導(dǎo)出設(shè)置允許您選擇要定位的生成語言，以及是否需要所選塊的定義。 選擇這些文件后，點(diǎn)擊“導(dǎo)出”即可下載文件。
?工作區(qū)工廠可以方便地配置工具箱和工作區(qū)中的默認(rèn)塊組。 您可以使用“工具箱”和“工作區(qū)”按鈕在編輯工具箱和起始工作區(qū)之間切換。
(1)構(gòu)建工具箱?此選項(xiàng)卡有助于構(gòu)建工具箱的XML，該材料假定使用者熟悉工具箱的功能，如果您在此處要編輯工具箱的XML時(shí)，可以通過單擊“加載到編輯”加載它。(2)沒有類別的工具箱?如果您有幾個(gè)塊，它們沒有任何類別，想要顯示它們的時(shí)候，只需將它們拖動(dòng)到工作區(qū)中，您將看到您的塊出現(xiàn)在工具箱的預(yù)覽中。
(3)有類別工具箱?如果你想要顯示塊類別，點(diǎn)擊“+”按鈕，并選擇下拉項(xiàng)目為新類別。 這將向您的類別列表中添加一個(gè)類別，您可以選擇和編輯。 選擇“標(biāo)準(zhǔn)類別”以添加單個(gè)標(biāo)準(zhǔn)塊類別（邏輯，循環(huán)等）或“標(biāo)準(zhǔn)工具箱”以添加所有標(biāo)準(zhǔn)塊類別。 使用箭頭按鈕重新排序類別。
?要更改所選類別名稱或顏色，請(qǐng)使用“編輯類別”下拉菜單。 將塊拖動(dòng)到工作區(qū)中將將其添加到所選類別。
(4)選擇工作區(qū)選項(xiàng)?為配置選項(xiàng)設(shè)置不同的值，并在預(yù)覽區(qū)域中查看結(jié)果。 啟用網(wǎng)格或縮放會(huì)顯示更多配置選項(xiàng)。 此外，切換到使用類別通常需要更復(fù)雜的工作空間; 當(dāng)您添加第一個(gè)類別時(shí)，會(huì)自動(dòng)添加垃圾桶和滾動(dòng)條。
(5)將預(yù)加載塊添加到工作區(qū)?這是可選的，但如果要在工作空間中顯示一組塊，則可能需要:?a當(dāng)應(yīng)用程序加載時(shí)顯示
?b當(dāng)觸發(fā)事件（提高級(jí)別，單擊幫助按鈕等）時(shí)顯示
?將塊拖動(dòng)到編輯空間中，可以在預(yù)覽區(qū)中查看它們。 您可以創(chuàng)建塊組，禁用塊，并在選擇某些塊時(shí)創(chuàng)建陰影塊。
(6)導(dǎo)出?工作區(qū)工廠提供以下導(dǎo)出選項(xiàng)：
?◎Starter Code：生成html和javascript以注入您的自定義Blockly工作區(qū)。
?◎工具箱生成XML以指定您的工具箱。
?◎工作區(qū)塊生成可以加載到工作區(qū)中的XML。
(7)更多創(chuàng)建自定義塊的信息，可參考Google Blockly:
https://developers.google.com/blockly/guides/create-custom-blocks/overview
?在之前的學(xué)習(xí)中，我們通過使用Blockly，學(xué)習(xí)一些基礎(chǔ)程序設(shè)計(jì)中的經(jīng)典的例子，并通過Blockly的可視化代碼編輯器，進(jìn)行了編程的實(shí)踐練習(xí),我們所接觸和使用的這些，并不是Blockly設(shè)計(jì)的初衷。Blockly是一個(gè)庫，它為Web和Android應(yīng)用程序添加了一個(gè)可視化代碼編輯器，Blockly編輯器使用互鎖的圖形塊來表示代碼概念，如變量，邏輯表達(dá)式，循環(huán)等，它允許用戶應(yīng)用編程原則，而不必?fù)?dān)心語法或命令行上閃爍的光標(biāo)。
?每個(gè)人不可能精通甚至熟悉每一種語言，但有時(shí)候，在學(xué)習(xí)、工作中又可能會(huì)用到所未接觸過的語言，如果我們沒有額外的時(shí)間且精力，尤其當(dāng)這種語言再極少使用時(shí)，我們可能不樂意去花時(shí)間和精力去學(xué)習(xí)，但又不得不用，于是經(jīng)常陷入兩難。針對(duì)這一常見現(xiàn)象，我們就可以使用Blockly作為代碼生成工具。
(1)假如現(xiàn)在我們需要一個(gè)判斷平年閏年的Python代碼的小例子，但我們之前又沒接觸過Python，我們又不想學(xué)習(xí)Python，那么就可以打開Blockly，在編輯區(qū)拖動(dòng)塊來編寫:
拖動(dòng)完成，驗(yàn)證無誤，點(diǎn)擊Python選項(xiàng)卡，復(fù)制代碼至你的Python環(huán)境中，即可直接運(yùn)行。
Python環(huán)境中的運(yùn)行結(jié)果：
(2)假如現(xiàn)在需要一個(gè)JavaScript的執(zhí)行腳本，而且我們對(duì)JavaScript也有所了解，我們也可以嘗試在Blockly中進(jìn)行編程開發(fā)，比如這個(gè)猜數(shù)字的小游戲：
上面是程序的主體部分，包括循環(huán)、提示和中斷。
在程序之前，創(chuàng)建了三個(gè)變量并進(jìn)行了初始化:
?步長(zhǎng):用于計(jì)數(shù)，針對(duì)猜的次數(shù)進(jìn)行不同的提示。
?Target：存放隨機(jī)生成的目標(biāo)數(shù)，與所猜數(shù)Number進(jìn)行比較。
Flag：開關(guān)變量，用于標(biāo)記是否猜對(duì)，從而決定是否提示下方內(nèi)容。
同樣，驗(yàn)證無誤后，點(diǎn)擊JavaScript選項(xiàng)卡，復(fù)制js代碼并保存。
將保存后的js代碼導(dǎo)入到html文件中測(cè)試。
當(dāng)然，也可以把猜數(shù)字小游戲的Python代碼導(dǎo)出，同樣可執(zhí)行。
注意:
◎ Python代碼的導(dǎo)出執(zhí)行，當(dāng)程序涉及輸入且輸入的是數(shù)字時(shí)，需要使用int()，將輸入的字符串型“數(shù)字”強(qiáng)制類型轉(zhuǎn)換成整型。
如果不進(jìn)行強(qiáng)制類型轉(zhuǎn)換，執(zhí)行腳本時(shí)可能會(huì)報(bào)錯(cuò)，即使不報(bào)錯(cuò)，結(jié)果也可能不正確。但這一問題在JavaScript導(dǎo)出代碼中不存在，兼容性良好。
◎?qū)τ贘avaScript代碼的測(cè)試，可以導(dǎo)入到html中，在瀏覽器中執(zhí)行，測(cè)試效果與Blockly中效果相同。html代碼如下：
本條注意事項(xiàng)專門針對(duì)沒有JavaScript基礎(chǔ)，但是對(duì)Blockly代碼生成工具又感興趣，想親手測(cè)試驗(yàn)證的讀者。?關(guān)于Blockly作為代碼生成工具的使用，我們這里只舉了兩個(gè)基礎(chǔ)的，有代表性的例子，當(dāng)然如果你學(xué)有余力或者對(duì)所生成的目標(biāo)代碼十分熟悉，可以自行嘗試更加有趣、更加復(fù)雜的例子，如果你覺得這并不能滿足你的需求，那么可以嘗試自己動(dòng)手定義你想要的塊，生成代碼的格式、類型和種類。
?隨著Blockly逐漸的完善，它被越來越多的人所熟知，同時(shí)，憑借它可視化編程，良好的可擴(kuò)展性等特點(diǎn)，很多的開發(fā)者利用Blockly進(jìn)行二次開發(fā),因此衍生出許多優(yōu)秀的產(chǎn)品和工具。
?前面曾提到過，Blockly的初衷是針對(duì)開發(fā)人員設(shè)計(jì)的，它是一個(gè)針對(duì)有經(jīng)驗(yàn)的開發(fā)人員的復(fù)雜庫。從用戶的角度來看，Blockly是一種直觀，可視化的構(gòu)建代碼的方法。從開發(fā)人員的角度來看，Blockly本質(zhì)上是一個(gè)包含正確語法、生成代碼的文本框， Blockly可以導(dǎo)出多種語言，例如JavaScript，Python，PHP，Lua，Dart等，下面是對(duì)Blockly進(jìn)行二次開發(fā)的步驟：
a.集成塊編輯器。 Blockly編輯器包括用于存儲(chǔ)塊類型的工具箱和用于排列塊的工作空間。
b.創(chuàng)建應(yīng)用程序的塊。 一旦你的應(yīng)用程序中有Blockly，你就需要?jiǎng)?chuàng)建塊供用戶編碼，然后將它們添加到您的Blockly工具箱。
c.構(gòu)建應(yīng)用程序的其余部分。 本身，Blockly只是一種生成代碼的方法, 你的應(yīng)用程序的核心在于如何處理該代碼。
?可能單純的文字描述比較抽象，難以理解，以FreDuino為例，它是基于Blockly二次開發(fā)而成的一個(gè)遠(yuǎn)程硬件控制平臺(tái)。
a.集成塊編輯器，在工具箱里增添了與硬件外設(shè)進(jìn)行交互的編碼塊。
b.創(chuàng)建應(yīng)用程序塊，實(shí)現(xiàn)了Blockly塊與硬件控制代碼之間的轉(zhuǎn)換。
c.在構(gòu)建應(yīng)用程序部分，通過與硬件外設(shè)建立通信，實(shí)現(xiàn)代碼的上傳，進(jìn)而完成與硬件的交互。
?FreDuino就是通過上述三個(gè)步驟而誕生的，實(shí)現(xiàn)了對(duì)硬件外設(shè)的遠(yuǎn)程可視化控制。
?1. 寫一個(gè)判斷素?cái)?shù)的函數(shù)，在主函數(shù)輸入一個(gè)整數(shù)，輸出是否是素?cái)?shù)。
?2. 設(shè)計(jì)定義一個(gè)自己的工具塊。
?3. 編寫函數(shù)，給出年、月、日，計(jì)算該日是該年的第n天，并嘗試將其導(dǎo)出的代碼在其他語言環(huán)境中調(diào)試運(yùn)行。
聯(lián)系客服
