WebAssembly - 使用 Rust 進行開發
WebAssembly 和 Rust 的介紹
你好，未來的程序员們！今天，我們將踏入一個讓網絡瀏覽器變成強大的高性能應用程序運行平台的令人興奮的世界。想像一下，能夠直接在瀏覽器中玩複雜的 3D 遊戲或運行先進的數據分析工具。這就是 WebAssembly 的魔力，我們將學習如何使用 Rust 編程語言來挖掘這種力量。
當我第一次接觸 WebAssembly 時，我覺得自己發現了網頁開發的一個隱藏超能力。這就像發現你可靠的自行車突然可以變成一艘火箭！讓我們一起踏上這個令人興奮的旅程。
WebAssembly 是什麼？
WebAssembly，通常縮寫為 Wasm，是一種為了在網絡瀏覽器中高效執行而設計的二進制指令格式。它就像瀏覽器能夠理解和運行得非常快的秘密代碼。把它看作是你網頁應用的涡轮增压！
為什麼選擇 Rust 開發 WebAssembly？
Rust 是一種既強大又安全的編程語言。它就像一輛配備最新安全功能的跑車。Rust 的獨特特點使其成為 WebAssembly 開發的絕佳選擇：
- 無需垃圾回收的內存安全
- 高性能
- 小型二進制文件
- 與 JavaScript 的輕鬆集成
設置開發環境
在我們開始編程之前，我們需要準備我們的工作空間。這就像在畫一幅傑作之前，先設置你的美術工作室。
安裝 Rust
首先，讓我們安裝 Rust。打開你的終端並運行以下命令：
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh這個命令下載並安裝 Rust。這就像種下一粒種子，將長成我們強大的編程樹！
安裝 wasm-pack
接下來，我們將安裝 wasm-pack，一個幫助我們構建和操作 WebAssembly 的工具：
cargo install wasm-pack把 wasm-pack 想像成你可靠的助手，總是準備好幫助你將 Rust 代碼打包為網絡版本。
你的第一個 Rust 和 WebAssembly 專案
現在，讓我們創建我們的第一個專案。我們會從簡單開始，創建一個加兩個數字的函數。
創建專案
在終端中運行以下命令：
cargo new --lib wasm-add
cd wasm-add這會創建一個新的 Rust 库專案。這就像打開一本新的筆記本，準備好我們的編程冒險！
寫入 Rust 代碼
打開 src/lib.rs 並將其內容替換為：
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}讓我們分解一下：
-
use wasm_bindgen::prelude::*;導入必要的 WebAssembly 绑定。 -
#[wasm_bindgen]就像一個魔法咒語，讓我們的函數能夠從 JavaScript 訪問。 -
pub fn add(a: i32, b: i32) -> i32定義了我們的函數，它接受兩個整數並返回它們的和。
為 WebAssembly 構建
現在，讓我們將我們的 Rust 代碼轉換為 WebAssembly。運行以下命令：
wasm-pack build --target web這個命令就像一個神奇的烤箱，將我們的 Rust 代碼烘焙成瀏覽器可以享用的 WebAssembly 甜點！
在網頁中使用你的 WebAssembly 模塊
現在到了令人興奮的部分——在真實的網頁中使用我們的 WebAssembly 模塊！
創建 HTML 文件
在你的專案根目錄中創建一個名為 index.html 的文件，並添加以下內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Add</title>
</head>
<body>
<script type="module">
import init, { add } from './pkg/wasm_add.js';
async function run() {
await init();
const result = add(5, 7);
document.body.textContent = `5 + 7 = ${result}`;
}
run();
</script>
</body>
</html>這個 HTML 文件就像一個舞台，我們的 WebAssembly 明星將在這裡表演！
運行你的網頁
要查看你的創作，你需要一個本地網頁服務器。如果你安裝了 Python，可以使用以下命令：
python -m http.server然後在瀏覽器中訪問 http://localhost:8000。你應該會在頁面上看到 "5 + 7 = 12"。恭喜你！你剛好在瀏覽器中運行了 Rust 代碼！
高級主題
現在我們已經開始了腳步，讓我們更深入地研究 WebAssembly 和 Rust 的世界。
字符串操作
在 WebAssembly 中使用字符串要複雜一些。讓我們創建一個用來向用戶問候的函數：
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}在 JavaScript 中，我們這樣使用它：
const greeting = greet("WebAssembly");
console.log(greeting); // 輸出：Hello, WebAssembly!內存管理
Rust 的一個超能力就是它的內存管理。當使用 WebAssembly 時，我們需要特別小心。以下是一個創建並返回數組的函數：
#[wasm_bindgen]
pub fn create_array(size: usize) -> Vec<i32> {
let mut v = Vec::with_capacity(size);
for i in 0..size {
v.push(i as i32);
}
v
}這個函數是安全的，因為 Rust 的所有權系統確保了即使從 JavaScript 使用時，內存也能被正確管理！
結論
恭喜你踏入 WebAssembly 和 Rust 的世界！我們已經介紹了很多內容，從設置環境到創建和使用 WebAssembly 模塊。記住，就像學習任何新技能一樣，熟練來自練習。所以請持續編程，持續實驗，最重要的是，享受樂趣！
當我們結束時，我會想到著名計算機科學家 Grace Hopper 的一句話："語言中最危險的短語是'我們一直這樣做'。" WebAssembly 和 Rust 代表了對網頁開發的新思維方式。擁抱這種變化，你將在編程旅程中打開一個充滿可能性的世界。
祝編程愉快，願你的 WebAssembly 冒險充滿興奮和發現！
| 方法 | 描述 |
|---|---|
wasm_bindgen::prelude::* |
導入必要的 WebAssembly 绑定 |
#[wasm_bindgen] |
標記函數為 WebAssembly 出口 |
wasm-pack build --target web |
為 WebAssembly 構建 Rust 代碼 |
import init, { functionName } from './pkg/module_name.js' |
在 JavaScript 中導入 WebAssembly 函數 |
await init() |
初始化 WebAssembly 模塊 |
Vec::with_capacity(size) |
創建具有預分配容量的數組 |
Credits: Image by storyset