前言

最近我們已經見識了WebAssembly如何快速編譯、加速JS庫以及生成更小的二進制格式。我們甚至為Rust和JavaScript社區以及其他Web編程語言之間的更好的互操作性制定了高級規劃。正如前面一篇文章中提到的，我想深入了解一個特定組件的細節，wasm-bindgen。

今天WebAssembly標準只定義了四種類型：兩種整數類型和兩種浮點類型。然而，大多數情況下，JS和Rust開發人員正在使用更豐富的類型！ 例如，JS開發人員經常與互以添加或修改HTML節點相關的文檔交互，而Rust開發人員使用類似Result等類型進行錯誤處理，幾乎所有程序員都使用字符串。

被局限在僅使用由WebAssembly所提供的類型將會受到太多的限制，這就是wasm-bindgen出現的原因。

wasm-bindgen的目標是提供一個JS和Rust類型之間的橋接。它允許JS使用字符串調用Rust API，或Rust函數捕獲JS異常。

wasm-bindgen抹平了WebAssembly和JavaScript之間的阻抗失配，確保JavaScript可以高效地調用WebAssembly函數，并且無需boilerplate，同時WebAssembly可以對JavaScript函數執行相同的操作。

wasm-bindgen項目在其README文件中有更多描述。要入門，讓我們深入到一個使用wasm-bindgen的例子中，然后探索它還有提供了什么。

1、Hello World！

學習新工具的最好也是最經典的方法之一就是探索下用它來輸出“Hello, World!”。在這里，我們將探索一個這樣的例子――在頁面里彈出“Hello World！”提醒框。

這里的目標很簡單，我們想要定義一個Rust的函數，給定一個名字，它會在頁面上創建一個對話框，上面寫著Hello，$name！在JavaScript中，我們可以將這個函數定義為：

代碼

export function greet(name) {  alert(`Hello, ${name}!`);}

不過在這個例子里要注意的是，我們將把它用Rust編寫。這里已經發生了很多我們必須要處理的事情：

• JavaScript將會調用一個WebAssembly 模塊, 模塊名是 greetexport.
• Rust函數將一個字符串作為輸入參數，也就是我們要打招呼的名字。
• 在內部Rust會生成一個新的字符串，也就是傳入的名字。
• 最后Rust會調用JavaScript的 alert函數，以剛創建的字符串作為參數。

啟動第一步，我們創建一個新的Rust工程：

代碼

$ cargo new wasm-greet --lib 

這將初始化一個新的wasm-greet文件夾，我們的工作都在這里面完成。接下來我們要使用如下信息修改我們的Cargo.toml（在Rust里相當于package.json）：

代碼

[lib] crate-type = ["cdylib"]  [dependencies] wasm-bindgen = "0.2" 

我們先忽略[lib]節的內容，接下來的部分聲明了對wasm-bindgen的依賴。這里的依賴包含了我們使用wasm-bindgen需要的所有的支持包。

接下來，是時候編寫一些代碼了！我們使用下列內容替換了自動創建的src/lib.rs:

代碼

#![feature(proc_macro, wasm_custom_section, wasm_import_module)]extern crate wasm_bindgen;use wasm_bindgen::prelude::*;#[wasm_bindgen]extern {  fn alert(s: &str);}#[wasm_bindgen]pub fn greet(name: &str) {  alert(&format!("Hello, {}!", name));}

如果你不熟悉Rust，這可能看起來有點