WebAssembly - 程式結構

你好，有抱負的程式設計師們！我很高興能夠引導你們進入WebAssembly程式結構的迷人世界。作為你們鄰居的親切計算機科學老師，我會以即使是完全的初學者也能理解的方式來解析這些概念。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們一起踏上這次令人興奮的旅程吧！

值

讓我們從任何程式的基石開始：值。在WebAssembly中，值是我們工作的基本數據單位。把他們想像成食譜中的原料——它們是我們用來創造更複雜事物的基礎元素。

數值

WebAssembly支持四種主要的數值類型：

1. 整數（i32和i64）
2. 浮點數（f32和f64）

讓我們看一些例子：

(i32.const 42)    ;; 32位元整數，值為42
(i64.const 1000000000000)  ;; 64位元整數，值為1兆
(f32.const 3.14)  ;; 32位元浮點數（約等於π）
(f64.const 2.71828)  ;; 64位元浮點數（約等於e）

在這些例子中，我們正在創建不同類型的常量值。i32.const和i64.const指令創建整數常量，而f32.const和f64.const創建浮點數常量。

引用值

WebAssembly還有引用類型，用於引用更複雜的數據結構：

(ref.null func)   ;; 一個指向函數的空引用
(ref.null extern) ;; 一個指向外部對象的空引用

這些引用值在處理函數或外部資源時特別有用，但現在不必過於擔心——我們稍後會更深入地探討它們。

類型

現在我們理解了值，讓我們來談談類型。WebAssembly中的類型就像類別，告訴我們我們正在處理什麼類型的數據以及我們如何使用它。

值類型

WebAssembly有四種基本值類型：

類型	描述	示例
i32	32位元整數	(i32.const 42)
i64	64位元整數	(i64.const 1000000000000)
f32	32位元浮點數	(f32.const 3.14)
f64	64位元浮點數	(f64.const 2.71828)

函數類型

函數類型描述了函數的簽名——它接受什麼（參數）以及它返回什麼（結果）。這裡有一個例子：

(func (param i32 i32) (result i32)
local.get 0
local.get 1
i32.add)

這個函數接受兩個i32參數並返回一個i32結果。它將兩個參數相加。

引用類型

正如我們之前提到的，WebAssembly還有引用類型：

類型	描述
funcref	指向函數的引用
externref	指向外部對象的引用

這些用於更複雜的操作，但知道它們存在是好事！

指令

指令是WebAssembly程序的核心。它們告訴計算機如何對我們的值進行操作和操縱。讓我們看看一些常見的指令：

算術指令

(i32.add)   ;; 將兩個i32值相加
(i32.sub)   ;; 將兩個i32值相減
(i32.mul)   ;; 將兩個i32值相乘
(i32.div_s) ;; 將兩個i32值相除（有符號）

這些指令對i32值進行基本的算術運算。以下是一個更完整的例子：

(func $calculate (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add
local.get $b
i32.mul)

這個函數接受兩個參數，將它們相加，然後將結果與第二個參數相乘。讓我們分解一下：

1. local.get $a：獲取參數$a的值
2. local.get $b：獲取參數$b的值
3. i32.add：將這兩個值相加
4. local.get $b：再次獲取參數$b的值
5. i32.mul：將總和與$b相乘

控制流程指令

WebAssembly還有控制程序流程的指令：

(block ...)    ;; 定義一個指令塊
(loop ...)     ;; 定義一個循環
(if ... else ...) ;; 條件執行
(br ...)       ;; 跳轉到一個塊或循環
(return)       ;; 從函數返回

以下是一個使用循環計算數字階乘的函數示例：

(func $factorial (param $n i32) (result i32)
(local $result i32)
(local $i i32)
i32.const 1
local.set $result
i32.const 1
local.set $i
(loop $continue
local.get $i
local.get $n
i32.le_s
(if
(then
local.get $result
local.get $i
i32.mul
local.set $result
local.get $i
i32.const 1
i32.add
local.set $i
br $continue
)
)
)
local.get $result
)

這個函數可能看起來很複雜，但讓我們分解一下：

1. 我們將$result和$i初始化為1。
2. 我們開始標籤為$continue的循環。
3. 我們檢查$i是否小於或等於$n。
4. 如果是，我們將$result乘以$i，將$i增加1，並繼續循環。
5. 如果不是，我們退出循環並返回$result。

這個例子展示了如何使用控制流程指令來創建有複雜算法的WebAssembly程序。

總結來說，理解WebAssembly的程式結構——它的值、類型和指令——對於編寫高效且強大的WebAssembly代碼至關重要。隨著你們不斷進行學習，你們將會發現這項技術的更多迷人特點。記住，每個專家都曾經是初學者，所以如果起初覺得挑戰很大，不要氣餒。持續練習，保持好奇心，不久之後，你們將能夠輕鬆地編寫複雜的WebAssembly程序！

Credits: Image by storyset