如何在 WebAssembly 中寫 “Hello World”？
通過這個分步教程，開始用人類可讀的文本編寫 WebAssembly。
WebAssembly 是一種字節(jié)碼格式，幾乎所有的瀏覽器 都可以將它編譯成其宿主操作系統(tǒng)的機器代碼。除了 JavaScript 和 WebGL 之外，WebAssembly 還滿足了將應(yīng)用移植到瀏覽器中以實現(xiàn)平臺獨立的需求。作為 C++ 和 Rust 的編譯目標(biāo)，WebAssembly 使 Web 瀏覽器能夠以接近原生的速度執(zhí)行代碼。
當(dāng)談?wù)?WebAssembly 應(yīng)用時，你必須區(qū)分三種狀態(tài)：
- 源碼（如 C++ 或 Rust）： 你有一個用兼容語言編寫的應(yīng)用，你想把它在瀏覽器中執(zhí)行。
- WebAssembly 字節(jié)碼： 你選擇 WebAssembly 字節(jié)碼作為編譯目標(biāo)。最后，你得到一個
.wasm文件。 - 機器碼（opcode）： 瀏覽器加載
.wasm文件，并將其編譯成主機系統(tǒng)的相應(yīng)機器碼。
WebAssembly 還有一種文本格式，用人類可讀的文本表示二進制格式。為了簡單起見，我將其稱為 WASM-text。WASM-text 可以比作高級匯編語言。當(dāng)然，你不會基于 WASM-text 來編寫一個完整的應(yīng)用，但了解它的底層工作原理是很好的（特別是對于調(diào)試和性能優(yōu)化）。
本文將指導(dǎo)你在 WASM-text 中創(chuàng)建經(jīng)典的 “Hello World” 程序。
創(chuàng)建 .wat 文件
WASM-text 文件通常以 .wat 結(jié)尾。第一步創(chuàng)建一個名為 helloworld.wat 的空文本文件，用你最喜歡的文本編輯器打開它，然后粘貼進去：
(module;; 從 JavaScript 命名空間導(dǎo)入(import "console" "log" (func $log (param i32 i32))) ;; 導(dǎo)入 log 函數(shù)(import "js" "mem" (memory 1)) ;; 導(dǎo)入 1 頁 內(nèi)存（64kb）;; 我們的模塊的數(shù)據(jù)段(data (i32.const 0) "Hello World from WebAssembly!");; 函數(shù)聲明：導(dǎo)出 helloWorld()，無參數(shù)(func (export "helloWorld")i32.const 0 ;; 傳遞偏移 0 到 logi32.const 29 ;; 傳遞長度 29 到 log（示例文本的字符串長度）call $log))
WASM-text 格式是基于 S 表達式的。為了實現(xiàn)交互，JavaScript 函數(shù)用 import 語句導(dǎo)入，WebAssembly 函數(shù)用 export 語句導(dǎo)出。在這個例子中，從 console 模塊中導(dǎo)入 log 函數(shù)，它需要兩個類型為 i32 的參數(shù)作為輸入，以及一頁內(nèi)存（64KB）來存儲字符串。
字符串將被寫入偏移量 為 0 的數(shù)據(jù)段。數(shù)據(jù)段是你的內(nèi)存的疊加投影，內(nèi)存是在 JavaScript 部分分配的。
函數(shù)用關(guān)鍵字 func 標(biāo)記。當(dāng)進入函數(shù)時，棧是空的。在調(diào)用另一個函數(shù)之前，函數(shù)參數(shù)會被壓入棧中（這里是偏移量和長度）（見 call $log）。當(dāng)一個函數(shù)返回一個 f32 類型時（例如），當(dāng)離開函數(shù)時，一個 f32 變量必須保留在棧中（但在本例中不是這樣）。
創(chuàng)建 .wasm 文件
WASM-text 和 WebAssembly 字節(jié)碼是 1:1 對應(yīng)的，這意味著你可以將 WASM-text 轉(zhuǎn)換成字節(jié)碼（反之亦然）。你已經(jīng)有了 WASM-text，現(xiàn)在將創(chuàng)建字節(jié)碼。
轉(zhuǎn)換可以通過 WebAssembly Binary Toolkit（WABT）來完成。從該鏈接克隆倉庫，并按照安裝說明進行安裝。
建立工具鏈后，打開控制臺并輸入以下內(nèi)容，將 WASM-text 轉(zhuǎn)換為字節(jié)碼：
wat2wasm helloworld.wat -o helloworld.wasm
你也可以用以下方法將字節(jié)碼轉(zhuǎn)換為 WASM-text：
wasm2wat helloworld.wasm -o helloworld_reverse.wat
一個從 .wasm 文件創(chuàng)建的 .wat 文件不包括任何函數(shù)或參數(shù)名稱。默認情況下，WebAssembly 用它們的索引來識別函數(shù)和參數(shù)。
編譯 .wasm 文件
目前，WebAssembly 只與 JavaScript 共存，所以你必須編寫一個簡短的腳本來加載和編譯 .wasm 文件并進行函數(shù)調(diào)用。你還需要在 WebAssembly 模塊中定義你要導(dǎo)入的函數(shù)。
創(chuàng)建一個空的文本文件，并將其命名為 helloworld.html，然后打開你喜歡的文本編輯器并粘貼進去：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Simple template</title></head><body><script>var memory = new WebAssembly.Memory({initial:1});function consoleLogString(offset, length) {var bytes = new Uint8Array(memory.buffer, offset, length);var string = new TextDecoder('utf8').decode(bytes);console.log(string);};var importObject = {console: {log: consoleLogString},js : {mem: memory}};WebAssembly.instantiateStreaming(fetch('helloworld.wasm'), importObject).then(obj => {obj.instance.exports.helloWorld();});</script></body></html>
WebAssembly.Memory(...) 方法返回一個大小為 64KB 的內(nèi)存頁。函數(shù) consoleLogString 根據(jù)長度和偏移量從該內(nèi)存頁讀取一個字符串。這兩個對象作為 importObject 的一部分傳遞給你的 WebAssembly 模塊。
在你運行這個例子之前，你可能必須允許 Firefox 從這個目錄中訪問文件，在地址欄輸入 about:config，并將 privacy.file_unique_origin 設(shè)置為 true：
Firefox setting
注意： 這樣做會使你容易受到 CVE-2019-11730 安全問題的影響。
現(xiàn)在，在 Firefox 中打開 helloworld.html，按下 Ctrl+K 打開開發(fā)者控制臺。
Debugger output
了解更多
這個 Hello World 的例子只是 MDN 的 了解 WebAssembly 文本格式 文檔中的教程之一。如果你想了解更多關(guān)于 WebAssembly 的知識以及它的工作原理，可以看看這些文檔。
