Scratch底層架構源碼分析
內容描述
本書從谷歌Blockly技術開始講起,逐步深入到Scratch的技術生態,對Scratch中的核心技術做了深入分析和源碼講解。
通過閱讀本書,讀者不但可以系統地學習Scratch中的核心技術模塊,
而且還能深入理解Scratch底層代碼的實現和結構設計,為二次開發打下基礎。
本書共7章,涵蓋的主要內容有Blockly簡介、Scratch-blocks源碼分析、Scratch-vm源碼分析、
Scratch-render源碼分析、Scratch-storage源碼分析、Scratch-gui源碼分析,
以及Scratch-paint、Scratch-audio和Scratch-parser的簡單介紹及其關聯。
本書適合需要瞭解Scratch語言底層技術架構的開發人員和技術愛好者閱讀,尤其是需要做Scratch二次開發的程序員。
另外,本書還適合作為相關教學和研究人員的參考資料。
內容豐富:圍繞核心模塊,全面、系統地介紹Scratch技術生態的相關知識。
重點突出:圍繞代碼塊、虛擬機、渲染和存儲等核心技術多角度展開講解。
深入淺出:以簡單易懂的語言講解深層次的架構知識,降低學習難度。
實用性強:針對Scratch開發過程中的常見疑點和難點進行系統性講解。
目錄大綱
前言
本書知識結構導圖
第1章 開始Scratch之旅 1
1.1 Scratch概述 1
1.1.1 Scratch發展歷史 1
1.1.2 Scratch技術生態 2
1.1.3 Scratch使用現狀 2
1.1.4 Scratch源碼分析的意義 2
1.2 Webpack打包工具簡介 3
1.2.1 Webpack的核心概念 3
1.3 NPM包管理工具簡介 4
1.3.1 NPM的組成 4
1.3.2 NPM的使用場景 4
1.4 小結 5
第2章 Scratch-blocks:積木塊源碼分析 6
2.1 Scratch-blocks概述 6
2.1.1 Blockly技術簡介 6
2.1.2 Scratch-blocks與Blockly之間的關系 8
2.1.3 Scratch-blocks的作用 9
2.1.4 Scratch-blocks的分類 9
2.2 Scratch-blocks代碼結構與流程 9
2.2.1 Scratch-blocks代碼結構 10
2.2.2 Scratch-blocks代碼流程 12
2.3 Scratch-blocks核心代碼分析 14
2.3.1 blockly_uncompressed_vertical.js:垂直方向的非壓縮打包文件 14
2.3.2 options.js:配置工作區 17
2.3.3 inject.js:將Scratch-blocks註入頁面 19
2.3.4 workspace模塊:工作區 28
2.3.5 toolbox.js:工具箱 34
2.3.6 Flyout模塊:工具箱中的托盤 38
2.3.7 xml.js:XML讀寫器 46
2.3.8 event模塊:各模塊之間的通信 54
2.3.9 Field模塊:代碼塊上的域 63
2.3.10 blockly.js:Blockly的核心JS庫 75
2.3.11 connection模塊:代碼塊之間的連接 81
2.3.12 input.js:代碼塊上的輸入 94
2.3.13 mutator.js:代碼塊的變形器 97
2.3.14 extensions.js:代碼塊的擴展 102
2.3.15 block.js:定義一個代碼塊 105
2.4 小結 120
第3章 Scratch-vm:虛擬機源碼分析 121
3.1 Scratch-vm概述 121
3.1.1 Scratch-vm的職責 121
3.2 Scratch-vm代碼結構與流程 122
3.2.1 Scratch-vm代碼結構 122
3.2.2 Scratch-vm代碼流程 123
3.3 Scratch-vm核心代碼分析 129
3.3.1 virtual-machine.js:最外層的API定義 129
3.3.2 blocks模塊:代碼塊原語的實現 138
3.3.3 dispatch模塊:消息派發系統 151
3.3.4 engine模塊:虛擬機的引擎 155
3.3.5 serialization模塊:序列化與反序列化 188
3.3.6 sprite模塊:精靈的渲染 196
3.4 小結 199
第4章 Scratch-render:渲染引擎源碼分析 200
4.1 Scratch-render渲染技術概述 200
4.1.1 WebGL概述 200
4.1.2 canvas概述 201
4.1.3 twgl.js概述 201
4.1.4 Scratch-render概述 201
4.2 Scratch-render代碼結構與流程 202
4.2.1 Scratch-render代碼結構 202
4.2.2 Scratch-render代碼流程 203
4.3 Scratch-render核心代碼分析 211
4.3.1 twgl.js關鍵函數介紹 212
4.3.2 RenderWebGL.js:渲染引擎最外層API的定義 219
4.4 小結 227
第5章 Scratch-storage:資源存儲源碼分析 228
5.1 Scratch-storage概述 228
5.1.1 什麽是Scratch-storage 228
5.1.2 Scratch-storage的主要內容 229
5.2 Scratch-storage代碼結構與流程 229
5.2.1 Scratch-storage代碼結構 229
5.2.2 Scratch-storage代碼流程 230
5.3 Scratch-storage核心代碼分析 239
5.3.1 ProxyTool模塊:網絡代理工具 239
5.3.2 FetchTool模塊:基於Fetch的網絡工具 240
5.3.3 NetsTool模塊:基於Nets的網絡工具 241
5.3.4 FetchWorkerTool模塊:基於任務的網絡工具 241
5.4 小結 245
第6章 Scratch-gui:圖形化界面源碼分析 246
6.1 Scratch-gui概述 246
6.1.1 Scratch-gui所處的位置 246
6.1.2 Scratch-gui的主要內容 247
6.2 React技術棧概述 247
6.2.1 什麽是React 247
6.2.2 React關鍵技術 248
6.2.3 什麽是Redux 249
6.2.4 react-redux介紹 249
6.3 Scratch-gui代碼結構與流程 250
6.3.1 Scratch-gui代碼結構 250
6.3.2 Scratch-gui代碼流程 251
6.4 Scratch-gui核心代碼分析 261
6.5 小結 275
第7章 Scratch生態其他項目 276
7.1 Scratch-paint:繪圖編輯器 276
7.1.1 Scratch-paint目錄結構 276
7.1.2 Scratch-paint使用方法 277
7.2 Scratch-audio:音頻引擎 279
7.2.1 Scratch-audio目錄結構 280
7.2.2 Scratch-audio在Scratch-gui中的使用 280
7.3 Scratch-parser:解析驗證工具 283
7.3.1 Scratch-parser目錄結構 283
7.3.2 Scratch-parser在Scratch-vm中的使用 283
7.4 小結 284
作者介紹
孟燦
畢業於北京師範大學圖形圖像處理與模式識別實驗室,獲工學碩士學位。
曾經就職於國內外一線互聯網公司,有多年的互聯網行業開發和管理經驗,工作內容涉及算法、前端、後端等技術領域。
目前就職於核桃編程,從事Scratch教學研究和二次開發。