Rust WebAssembly (WASM) 是一種用于在現代Web瀏覽器中運行高性能代碼的技術。它允許你使用Rust編程語言編寫Web應用程序，并將其編譯為可在瀏覽器中運行的二進制格式。與JavaScript（JS）進行交互是WebAssembly的一個常見應用場景。
要在Rust WebAssembly中與JavaScript進行交互，你需要使用wasm-bindgen和wasm-pack這兩個庫。下面是詳細的步驟：
確保你已經安裝了Rust編程語言的工具鏈，包括rustc編譯器、cargo包管理器和wasm32-unknown-unknown目標。如果沒有，請訪問Rust官網并按照說明進行安裝。
使用cargo創建一個新的Rust項目：
cargo new --lib my_wasm_project
cd my_wasm_project
在Cargo.toml文件中添加wasm-bindgen和wasm-pack作為依賴庫：
[package]
name = "my_wasm_project"
version = "0.1.0"
authors = ["Your Name <your.email@example.com>"]
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
wasm-pack = "0.3"
在src/lib.rs文件中編寫Rust代碼，并使用wasm-bindgen庫定義與JavaScript交互的函數。例如：
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
#[wasm_bindgen]
pub fn greet(name: &str) {
console::log(&format!("Hello, {}!", name));
}
使用wasm-pack庫將Rust代碼編譯為WebAssembly模塊：
wasm-pack build --target web
這將在pkg/目錄下生成一個名為my_wasm_project_bg.wasm的WebAssembly模塊文件和一個名為index.js的JavaScript綁定文件。
創建一個名為index.html的文件，并在其中引入WebAssembly模塊和JavaScript綁定文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rust WebAssembly Example</title>
</head>
<body>
<script src="./pkg/index.js"></script>
<script>
// 初始化WebAssembly模塊
const wasmInstance = await WebAssembly.instantiateStreaming(fetch('./pkg/my_wasm_project_bg.wasm'));
// 獲取Rust函數導出
const { add, greet } = wasmInstance.instance.exports;
// 調用Rust函數
const sum = add(1, 2);
console.log(`1 + 2 = ${sum}`);
greet("World");
</script>
</body>
</html>
使用一個支持WebAssembly的現代Web瀏覽器打開index.html文件。你應該能看到控制臺輸出1 + 2 = 3和Hello, World!。
這就是使用Rust WebAssembly與JavaScript進行交互的基本方法。你可以根據需要編寫更復雜的Rust代碼，并使用wasm-bindgen庫定義更多的與JavaScript交互的函數。
