WASM-BINDGEN 搭起 Rust 與 JavaScript 的橋梁

隨著WebAssembly（以下簡稱WASM）的興起，各種高級語言都在探索如何將自己的生態系與現代Web技術結合在一起。在這樣的探索中，Rust語言憑借其安全性和效能成為了一個突出的選手。 wasm-bindgen 庫和命令列工具是Rust在這方面的關鍵成果之一，它大大簡化了Rust與JavaScript之間的相互操作。

什麽是 WASM-BINDGEN？

wasm-bindgen 是一個旨在促進Rust和JavaScript高級互操作的工具。它透過生成的程式碼層，讓兩種語言像本地呼叫一樣輕松交流。開發者可以直接從Rust呼叫JavaScript API，反之亦然，而不需要深入了解底層細節。對於開發者而言，這意味著他們可以專註於套用邏輯的實作，而不是被底層的復雜性所困擾。

wasm-bindgen的工作原理

wasm-bindgen 的核心功能是生成一層互操作程式碼，這一層程式碼能夠「轉譯」JavaScript和Rust之間的語意。它處理記憶體表示和呼叫語意上的差異，尤其是對於字串和物件等復雜數據型別。

Rust to JavaScript:

當從Rust呼叫JavaScript函式時， wasm-bindgen 負責將Rust數據型別轉換為JavaScript可以理解的型別。舉例來說，如果你有一個Rust函式返回一個字串， wasm-bindgen 將負責將這個Rust字串轉換為JavaScript字串。

#[wasm_bindgen]
extern"C" {
#[wasm_bindgen(js_namespace = console)]
fnlog(s: &str);
}
#[wasm_bindgen]
pubfngreet(name: &str) {
log(&format!("Hello, {}!", name));
}

上面的程式碼展示了如何透過 wasm-bindgen 將Rust函式暴露給JavaScript，並呼叫JavaScript的 console.log 函式。

JavaScript to Rust:

反過來， wasm-bindgen 也支持從JavaScript呼叫Rust程式碼。它能夠將JavaScript的數據型別轉換為Rust理解的型別，並處理可能發生的任何記憶體管理任務。

import * as wasm from"./pkg/your_wasm_package";
wasm.greet("World");

上面的JavaScript程式碼匯入了由 wasm-pack 打包的Rust計畫，並呼叫了一個Rust函式。

使用wasm-bindgen的步驟

1. 編寫Rust程式碼，並使用 #[wasm_bindgen] 標註需要暴露給JavaScript的函式。

2. 使用 wasm-pack build 構建計畫，生成WASM二進制檔和必要的JavaScript繫結。

3. 在Web計畫中匯入生成的JavaScript模組，並像呼叫本地JavaScript函式一樣使用Rust函式。

wasm-bindgen的高級特性

範例：Rust結構體與JavaScript物件的互操作

考慮這樣一個Rust結構體，我們希望在JavaScript中作為一個物件使用。

#[wasm_bindgen]
pubstructPoint {
x: u32,
y: u32,
}
#[wasm_bindgen]
impl Point {
pubfnnew(x: u32, y: u32) -> Point {
Point { x, y }
}
pubfnx(&self) -> u32 {
self.x
}
pubfny(&self) -> u32 {
self.y
}
pubfnmove_by(&mutself, dx: u32, dy: u32) {
self.x += dx;
self.y += dy;
}
}




在JavaScript中，使用這個結構體會像下面這樣：

import * as wasm from"./pkg/your_wasm_package";
const point = wasm.Point.new(10, 10);
console.log(point.x(), point.y()); // 輸出: 10 10
point.move_by(5, 7);
console.log(point.x(), point.y()); // 輸出: 15 17


透過上述的範例，我們可以看到 wasm-bindgen 的強大之處：輕松在Rust和JavaScript之間進行復雜型別的轉換和互操作。

結語

wasm-bindgen 是一把銳利的工具，它打破了傳統Web開發的邊界，將Rust的安全性和效能帶到了前端世界。隨著這項技術的成熟，無疑將會有更多的開發者受益，用以構建更高效、安全的Web套用。

WASM-BINDGEN不僅解決了記憶體管理和型別轉換的問題，還提供了一個便捷的介面來利用JavaScript的生態系，這為Rust在Web領域的套用帶來了新的可能性。隨著WASM的生態系不斷發展，Rust加上 wasm-bindgen 的組合將會在未來的Web開發中占據一席之地。

有了這樣深入且詳細的理解，希望能夠助您在使用 wasm-bindgen 進行WebAssembly開發時更加得心應手。

文章精選

點 擊 關 註 並 掃 碼 添 加 進 交 流 群

領 取 「Rust 語 言 」 學 習 資 料