Blockly
Blockly是一款由google開發(fā)的基于web的開源可視化編程編輯器，它的設(shè)計(jì)是為了解決編程的可視化在教育領(lǐng)域的應(yīng)用問題。同類編輯器還有Microsoft MakeCode镶殷、Scratch Blocks、Droplet龄坪、Snap等焙格。其中MakeCode是微軟開發(fā)基于開源項(xiàng)目PXT的編輯器瓮床，Micro:bit就是MakeCode的用戶之一芜茵。
特點(diǎn)
- 可導(dǎo)出叙量、多語言，Blockly可編譯輸出多種語言九串，包括JavaScript绞佩、Python、PHP猪钮、Dart品山。
- 可拓展，你可以很輕易地自定義block烤低。
- 強(qiáng)大的能力肘交，使用Blockly可以制作復(fù)雜的程序。
- 國際化扑馁，Blockly支持40+門語言涯呻。
- 客戶端化，不依賴遠(yuǎn)端或第三方資源檐蚜。
Scratch
Blockly僅提供編程可視化的Foundation魄懂，ToolBox較簡(jiǎn)單沿侈，主要由主要變量闯第、流程控制、數(shù)學(xué)計(jì)算缀拭、列表結(jié)構(gòu)組成咳短。
那么Scratch能做什么填帽？
先看看Scratch的ToolBox提供了什么：
- Move 移動(dòng)
- Display 外觀
- Audio 聲音
- Event (框架)事件
- SysEvent 系統(tǒng)事件
- Control 流程控制
- Math 數(shù)學(xué)計(jì)算
- Variables 自定義變量
- Custom Block 自定義積木
另外，Scratch還提供有圖像咙好、音頻導(dǎo)入和編輯功能篡腌，以及實(shí)時(shí)預(yù)覽界面。所以勾效，Scratch可以理解為一款基于可視化積木編程的簡(jiǎn)單的游戲編輯器嘹悼。
?Scratch功能強(qiáng)大，一應(yīng)俱全层宫，同時(shí)開源杨伙，通過二次開發(fā) Scratch-GUI可快速構(gòu)建自己的Scratch應(yīng)用或集成到已有項(xiàng)目中。
Scratch Blocks 是基于Blockly開發(fā)的一個(gè)圖形化js庫萌腿。
Scratch VM 是一個(gè)運(yùn)行 Scratch Blocks 代碼塊的引擎庫限匣。
Scratch Audio 是用來解析聲音、播放聲音的庫毁菱。
Scratch Link 通過 WebSocket 使 Scratch 硬件擴(kuò)展可以和硬件設(shè)備通訊米死。
scratch-gui
安裝
git clone https://github.com/LLK/scratch-gui.git --depth=1
cd scratch-gui
npm install
構(gòu)建運(yùn)行
BUILD_MODE=dist npm run build
npm start
open "http://localhost:8601/" 或 start chrome http://localhost:8601/
技術(shù)棧
- react + redux
- webpack（打包工具）
src目錄結(jié)構(gòu)
- components: 所有基礎(chǔ)react組件，包括相對(duì)應(yīng)的jsx贮庞、css以及依賴的svg資源
>? jsx是react提供的文件格式峦筒，在js文件特性的基礎(chǔ)上支持html標(biāo)簽的寫法。舉個(gè)栗子:
export default class JsxComponent extends React.Component {
? ? constructor(props) {
? ? ? ? super(props);
? ? }
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div className = {classname} >
? ? ? ? );
? ? }
}
- containers: 高級(jí)組件窗慎，封裝基礎(chǔ)組件（component）的容器勘天，并負(fù)責(zé)處理部分業(yè)務(wù)邏輯
- css: 全局樣式配置
- lib: 依賴庫，包括全局資源assets捉邢，js工具庫脯丝，以及高級(jí)組件hoc（組件包裹器）
> hoc 全稱 a higher-order component ，本質(zhì)是一個(gè)方法伏伐，用來包裹（或者叫修飾）react組件宠进。舉個(gè)栗子:
export default CompHoc = function (WrappedComponent, localesOnly) {
? ? return class CompStateWrapper extends React.Component {
? ? ? ? render() {
? ? ? ? ? ? return (
? ? ? ? ? ? ? ? <WrappedComponent
? ? ? ? ? ? ? ? ? ? {...componentProps}
? ? ? ? ? ? ? ? />
? ? ? ? ? ? );
? ? ? ? };
? ? }
}
- playground: 示例，有block-only（僅積木）藐翎、player（舞臺(tái)）材蹬、render-gui（完整）三種示例
- reducers: 所有reducer以及initial state
- index.js: 打包入口
總結(jié)
? ? 這篇文章大多內(nèi)容摘錄自官方文檔，旨在記錄和督促自己吝镣，更進(jìn)一步得學(xué)習(xí)堤器。加油，打工人末贾！
