整體架構
Scratch3的界面功能劃分如下圖
Scratch的整體架構如下圖所示
scratch-gui: 是基于React的組件庫，組成了整個頁面，對于界面有定制化的在這個庫下進行
scratch-blocks：積木編程模塊，創建和生成積木塊區域和拖拽效果區域，需要定制化積木塊以及積木塊相關功能的在這個庫下進行
scratch-vm：虛擬機，管理狀態并執行業務邏輯，前端GUI的狀態及邏輯部分處理，需要定制化擴展組建在這個庫下進行
scratch-l10n：多語言環境，簡單描述所有的翻譯都在此庫
scratch-render：舞臺區渲染，在舞臺區域出現的基于WebGL的處理器，底層處理svg使用的是scratch-svg-renderer，同類的還有一個scratch-paint，用來處理造型畫圖，
scratch-storage：作品存盤加載
scratch-audio: 聲音處理
為什么要這么設計
-
從流程上來說，應該是用戶針對每一個角色/背景在積木區拖拽出一堆積木程式，然后加上角色/背景的初始化資料，可以轉化成固定的代表這個角色/背景影片的結構資料，然后用戶點擊運行，資料將被一個渲染引擎處理展示到舞臺上，形成影片，
從系統的復雜性來說，解耦非常由必要，那么按照流程劃分，至少有這么幾塊，基本操作UI層（即scratch-gui,可以包括角色/背景選擇，用戶的點擊按鈕等）、單角色/背景積木拼接并轉化為結構化資料(即scratch-blocks)、渲染引擎， -
就渲染來說，一般分成兩個部分：單幀渲染和渲染影片控制
就如同我們看視頻一樣，每一個視頻都是由很多幀組成的，每一幀的渲染應當是同一個處理，獨立出來即scrach-render，在Scratch中回控制幀的播放暫停等操作，需要由一個控制器來管理，即scratch-vm，
在Scratch的真實場景中，導致scratch-render重新繪制的情況很多，比如修改角色的大小，位置，顏色等等，這些狀態的變更管理都納入到scratch-vm中， -
多語言部分，對于整個系統來說，各個部分都可能需要，所以獨立為一個通用模塊比較好
-
Scratch代碼最侄訓生成程式代碼，需要有地方存盤和加載決議，而且這塊功能比較獨立，所以當都作為一個模塊是有必要的，
程式的存盤目前有兩種方案，
一種是將整個程式打包成一個壓縮檔案，里面包括了程式運行所需要的所有資源和資料結構，這種程式報可以下載下來，即使在離線的情況下，也可以本地載入運行，缺點是程式包可能會過大，而且多個程式可能共用同一個資源（比如一張圖片），但是每個程式包中都必須要有一份，上傳下載程式包都非常消耗帶寬，
另一個方案是所有資源都在服務器端保存，每次存盤只需存盤資料結構即可，資源全部使用url鏈接，程式包大大縮小，在程式載入時自動到遠程拉取資源，缺點是無法在沒有網路的情況下運行（無法保存/下載），
Scratch在設計之初是要做純前端的可視化編程系統，所以內置了所有資源的url，編程后可以下載完整的程式壓縮包，不用依靠后臺也能玩起來， -
聲音處理模塊獨立原因很簡單，不是必須功能，而且功能相對獨立，內部處理還復雜，獨立出來就對了
-
從結構層次來說，Scratch的結構相對扁平（不考慮服務端），就功能來看，系統由一個個獨立功能功能組成，比如scratch-blocks，該模塊實作了積木拼接代碼，實作代碼轉義為結構化資料的功能，完全可以獨立出來作為一個系統，這些一個個獨立的功能模塊需要一個粘合劑，將他們的資料和狀態串起來，這就是scratch-vm，
scratch-vm中保存著每一個角色/背景的初始化狀態，保存著每一個角色/背景的代碼邏輯（積木轉義而來），操控代碼的渲染邏輯，提供了大量的渲染控制api以及相關事件的鉤子函式，
可以說scratch-vm是整個系統的資料處理中心， -
Stage層是scratch-gui的共享資料層，里面保存著gui層的共享資料，
Stage層
和scratch-vm不同，scratch-vm管理的是代碼編程相關的狀態，直白來說就是管理讓用戶編輯的代碼積木跑起來；而Stage是管理網頁自身的資料，比如登錄態資料、頁面加載狀態、舞臺縮放展示、對話框訊息資料等等，
這其中有一個比較復雜的狀態：頁面加載狀態
這是由于這個龐大的前端專案要跑起來，需要加載的資料和處理型別比較多，比如加載一個作品，就可能出現通過作品id遠程加載，如果沒有id要加載默認模板，還可以通過本地上傳一個程式包載入；在用戶操作程序中，用戶可能手動保存，但是程式自身也會定時保存，
狀態的命名還是比較規范的，如果在這之間增加一寫狀態(比如，新增一個可以通過homeworkId獲取展示默認模板，必然要在FETCHING_NEW_DEFAULT狀態之上增加一個狀態)，則必須要對之前的狀態了如執掌才能修改，否則可能導致遺漏或狀態沖突.
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/73794.html
標籤：架構設計
上一篇：掌握這21個Java的核心技術點，漲薪5K起步，告別上班復制粘貼！
下一篇：新派系統Web前端架構