WebAssembly - 動態鏈接

你好，有志於成為程序員的你！我很興奮能夠為你們揭開 WebAssembly 和動態鏈接的精彩世界。作為你們友好的鄰居計算機科學老師，我會盡我所能讓這次旅程充滿樂趣和啟發。我們一起來探索吧！

WebAssembly 和動態鏈接的介紹

WebAssembly，簡稱 Wasm，就像是一種秘密語言，讓你的網頁瀏覽器能夠運行超快速程序。想像它為你的網站裝上了一個加速器！現在，動態鏈接就像是給這些 Wasm 程序一個能夠在運行時結交新朋友和分享玩具的能力。酷不酷？

什麼是動態鏈接？

動態鏈接是一種程序在運行時與其他代碼或庫進行連接的方式，而不是從一開始就把所有東西打包在一起。這就像是在開始玩耍後還能夠為你的創作添加新的樂高積木！

使用引入和導出

在 WebAssembly 的世界中，引入和導出是我們的 Wasm 模塊與外部世界以及彼此之間進行通信的方式。讓我們用一些有趣的例子來解析這個概念！

導出：分享你的玩具

當一個 Wasm 模塊導出某個東西時，就像是在說：“嘿，我有一個很酷的函數（或變量），我想與其他人分享！”讓我們看看這是如何工作的：

(module
(func $greet (param $name i32) (result i32)
;; 函數體在這裡
)
(export "greet" (func $greet))
)

在這個例子中，我們創建了一個名為 greet 的函數，然後導出它，以便其他人可以使用。這就像把你的最愛玩具放在操場中央供所有人享用！

引入：向朋友借東西

引入是導出的反義詞。當一個 Wasm 模塊引入某個東西時，它是在說：“我需要使用別人有的那個很酷的東西！”這是它的樣子：

(module
(import "console" "log" (func $log (param i32)))

(func $sayHello
i32.const 42
call $log
)
)

在這段代碼中，我們從 console 模塊引入了一個 log 函數。這就像向朋友借他的超酷遙控車，因為你自己沒有！

實際範例：一個動態計算器

讓我們用一個更複雜的例子來把所有東西整合起來。我們將創建一個計算器，我們可以動態地添加新的操作！

首先，讓我們創建我們的主 Wasm 模塊：

(module
;; 引入我們的基本操作
(import "math" "add" (func $add (param i32 i32) (result i32)))
(import "math" "subtract" (func $subtract (param i32 i32) (result i32)))

;; 導出我們的計算器函數
(func $calculate (export "calculate") (param $op i32) (param $a i32) (param $b i32) (result i32)
(if (i32.eq (local.get $op) (i32.const 0))
(then
(call $add (local.get $a) (local.get $b))
)
(else
(if (i32.eq (local.get $op) (i32.const 1))
(then
(call $subtract (local.get $a) (local.get $b))
)
(else
(i32.const -1) ;; 未知的操作錯誤代碼
)
)
)
)
)
)

現在，讓我們看看如何在 JavaScript 中使用這個：

const mathModule = {
add: (a, b) => a + b,
subtract: (a, b) => a - b,
};

WebAssembly.instantiate(wasmBytes, { math: mathModule }).then(({ instance }) => {
const { calculate } = instance.exports;

console.log(calculate(0, 5, 3)); // 应該輸出 8 (5 + 3)
console.log(calculate(1, 10, 4)); // 应該輸出 6 (10 - 4)
});

在這個例子中，我們創建了一個動態計算器。Wasm 模塊引入了基本數學操作並導出了一個 calculate 函數。JavaScript 代碼為這些操作提供實現，然後使用導出的函數。

動態添加新操作

動態鏈接的美妙之處在於我們可以隨時添加新操作！讓我們說我們想要添加一個乘法操作：

mathModule.multiply = (a, b) => a * b;

// 現在我們可以更新我們的 Wasm 模塊以使用這個新操作
// （這需要重新編譯 Wasm 模塊以包含新的引入）

方法表

這是一個總結我們討論過的關鍵方法的表格：

方法	描述	示例
export	從 Wasm 模塊共享一個函數或變量	(export "greet" (func $greet))
import	從 Wasm 模塊外部借入一個函數或變量	(import "console" "log" (func $log (param i32)))
instantiate	創建一個新的 Wasm 模塊實例	WebAssembly.instantiate(wasmBytes, importObject)

結論

WebAssembly 和動態鏈接為創建快速、靈活的網絡應用程序打開了無限的可能性。通過理解導出和引入，你可以創建有模塊性、可重用的代碼，這些代碼可以根據你的需求進行適應和成長。

記住，學習編程就像學習一門新語言或樂器 - 它需要練習和耐心。不要害怕嘗試和犯錯誤。我們都是這樣學習和成長的！

繼續編程，保持好奇心，最重要的是，在你們的 WebAssembly 冒險中玩得開心和樂趣！

Credits: Image by storyset