WebAssembly入門筆記[1]：與JavaScript的交互

前一陣子利用Balazor開發了一個NuGet站點，對WebAssembly進行了初步的瞭解，覺得挺有意思。在接下來的一系列文章中，我們將通過實例演示的方式介紹WebAssembly的一些基本概念和編程模式。首先我們先來說說什麼是WebAssembly，它主要幫助我們解決什麼問題。

本文演示實例下載：app1 app2 

一、概述
二、WebAssembly程序(app.wat)
三、編譯生成app.wasm
四、JavaScript程序
五、跑起來看看
六、調用導出函數

一、概述

WebAssembly可以視爲一種採用精簡的”二進制格式”的“低等級”、“類彙編”語言。目前主流的瀏覽器均提供了對WebAssembly的支持，雖然WebAssembly的執行性能（它能夠提供near-native的執行性能）是JavaScript無法比擬的，但是在表達能力和靈活性還是不如JavaScript，所以WebAssembly的出現並不是要取代JavaScript，而是作爲JavaScript的“助手”，兩者配合，各自發揮自身的優勢，進而開發出更高質量的Web應用。

與其說WebAssembly像彙編，不如說它更像MSIL，因爲它不是面向開發者的高級語言，而是高級語言的“編譯目標”。雖然.NET 的運行時CLR不能直接執行C#、VB.NET和F#這樣的高級語言編寫的代碼，而執行執行MSIL指令，但是我們可以將前者編譯成後者。與之類似，我們也可以使用C、C++、C#、Rust和AssemblyScript（面向WebAssembly的TypeScript）作爲開發語言，然後將代碼編譯成WebAssembly。

與彙編一樣，雖然WebAssembly採用的是單純的二進制格式，但是可以轉換成文本形式。不僅如此，我們還可以按照這樣的文本格式來編寫程序（在接下來的內容中，我們提供的WebAssembly程序均採用這樣的編寫方式），並利用相應的工具將其編程成WebAssembly。WebAssembly文本採用一種名爲S-expression的樹形結構，我們定義的內容都存在與一個具體的“節點”中，每個節點通過小括號包裹起來，子節點直接內嵌於父節點中。由於模塊是WebAssembly的基本部署和加載單元，所以module總是它們的根節點，如下所示的就是一個合法的最簡單的WebAssembly程序。

(module)

爲了讓大家對WebAssembly文本的S-expression有一個大致的瞭解，我們採用這樣的形勢定義了一個進行整數加法運算的add函數。如下面的代碼片段所示，我們定義的函數通過內嵌於module節點的(func)節點表示。它具有一些子節點，其中(export "add") 表示將這個函數以名稱“add”進行導出，這意味着加載此模塊的JavaScript應用可以直接調用此函數。額外三個節點(param $x i32) (param $y i32) (result i32)定義了函數的簽名，揭示了此函數包含兩個Int32(i32)的輸入參數，返回值（結果）的類型也是Int32(i32)。爲了提供可讀性，同時也方面傳參方面，我們將參數進行了命名($x和$y)

(module
  (func (export "add") (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.add)
)

值得一提的是，WebAssembly僅僅支持4種數據類型，分別是32和64位的整數（i32和i64）和浮點數（f32和f64），連我們最常使用的字符串類型都支持。由於字符串本質上就是一組字符序列，而一個字符本質上是採用某種編碼的一段字節序列，所以WebAssembly中針對字符串的處理需要自行解決編解碼的工作，所以直接以S-expression文本的形式編寫WebAssembly程序並不容易。

上面說WebAssembly更像MSIL，還因爲執行WebAssembly的VM是一個“堆棧機（Stack Machine）”,意味着它採用“壓棧”的方式傳遞參數。而彙編面向的是真正的機器語言，是“堆棧機（Stack Machine）”和“寄存器機（Register Machine）”的結合，不僅參數傳遞可以採用堆棧，也可以採用寄存器。這一點可以從add函數的實現看出來，由於最終需要執行i32.add指令，我們需要在這之前調用local.get指令將兩個參數壓入棧中。i32.add執行後的結果也將入棧，併成爲函數返回值。

在對WebAssembly以及基於S-expression的文本形式有了基本瞭解之後，我們通過一個簡單的例子來演示一下一個WebAssembly程序大體上如何編寫，我們着重關注JavaScript應用和WebAssembly之間的功能交互。我們創建一個空的目錄，並創建兩個文本文件app.wat和index.html，前者代表以S-expression文本形式編寫的WebAssembly程序，後者是一個空的HTML頁面，我們利用它提供的JavaScript程序加載並執行編譯後的WebAssembly模塊。

二、WebAssembly程序(app.wat)

如下所示的是app.wat的內容，看起來很長，好在我們現在對S-expression有了基本的瞭解，所以理解起來沒有什麼問題。模塊的第一個節點(func $print (import "js" "print") (param $op1 i32) (param $op2 i32) (param $op i32) (param $result i32))同樣是定義了一個函數，我們將其命名爲$print， 子節點(import "js" "print") 表明該函數是從作爲宿主的Javascript應用中導入的，具體的路徑爲js->print。如果導入的Javascript對象通過變量imports表示，意味着imports.js.print表示的就是這個導入的對象。至於其餘的四個節點(param $op1 i32) (param $op2 i32) (param $op i32) (param $result i32))同樣是提供了函數的簽名：個i32類型的參數，分別表示第一個操作數、第二個操作數、操作符（1，2，3，4分別代表加、減、乘、除）和執行結果。由於這個函數僅僅打印運算表達式，所以沒有返回值。

(module
  ;; import js func print (op1, op2, op, result)  
  (func $print (import "js" "print") (param $op1 i32) (param $op2 i32) (param $op i32) (param $result i32))
  ;; int32 add (int32 x, int32 y)
  (func $add (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.add)
  ;; int32 sub(int32 x, int32 y)
  (func $sub (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.sub)

  ;; int32 mul(int32 x, int32 y)
  (func $mul (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.mul)

   ;; int32 div(int32 x, int32 y)
   (func $div (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.div_u)

   (func $main
    ;; call print(1, 2, add(1,2), 1)
    i32.const 1
    i32.const 2
    i32.const 1

    i32.const 1
    i32.const 2
    call $add
    call $print

    ;; call print(1, 2, sub(1,2), 2)
    i32.const 1
    i32.const 2
    i32.const 2

    i32.const 1
    i32.const 2
    call $sub
    call $print

    ;; call print(1, 2, mul(1,2), 3)
    i32.const 1
    i32.const 2
    i32.const 3

    i32.const 1
    i32.const 2
    call $mul
    call $print

    ;; call print(1, 2, div(1,2), 4)
    i32.const 1
    i32.const 2
    i32.const 4

    i32.const 1
    i32.const 2
    call $div
    call $print
   )

   (start $main)
)

接下來我們定義了四個進行加、減、乘和除運算的函數add、sub、mul和div，它們與上面定義的add函數類似，不過由於缺少了（export “{funcname}”）節點，所以它們僅僅是四個內部函數而已。接下來，我們定義了一個$main函數，它會傳入相同的參數（1、2）調用上述4個函數，並調用導入的print方法將包含結果的運算表達式打印出來。雖然命名爲$main，但是它也僅僅是一個普通的函數而已，所以我們需要利用(start $main)節點將其作爲入口函數，這樣它就會在加載的時候自動執行了。

三、編譯生成app.wasm

以文本形式編寫的WebAssembly程序需要編譯成二進制模塊才能被加載執行，這裏我們使用的wat2wasm這個工具，這個工具可以從這裏下載。除了將wat文件轉化成wasm文件的wat2wasm，下載包裏還包含了其他一些有用的工具，比如進行反向操作的wasm2wat。上面編寫的app.wat文件利用如下的命令就可以編譯生成WebAssembly目標文件app.wasm。

wat2wasm app.wat -o app.wasm

四、JavaScript程序

如下所示的就是index.html文件的內容，我們着重關注其提供的JavaScript代碼。我們首先定義被WebAssembly導入的用來輸出運行表達式的函數print，然後按照導入路徑js.print將其封裝到一個導入對象中（{"js":{"print":print}}）。我們調用WebAssembly.instantiateStreaming函數以異步方式加載app.wasm模塊，並創建對應的實例。具體下載app.wasm模塊通過第一個參數提供的Promise（fetch("app.wasm")）完成，第二個參數代表導入對象。

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script>
        var url="app.wasm";
        var print = (op1, op2, op, result) => {
            switch (op) {
                case 1:
                    console.log(`${op1} + ${op2} = ${result}`);
                    break;
                case 2:
                    console.log(`${op1} - ${op2} = ${result}`);
                    break;
                case 3:
                    console.log(`${op1} * ${op2} = ${result}`);
                    break;
                case 4:
                    console.log(`${op1} / ${op2} = ${result}`);
                    break;
                default:
                    console.log("invalid operator.");
}
        };
        WebAssembly.instantiateStreaming(fetch("app.wasm"), {"js":{"print":print}});
    </script>
</body>
</html>

五、跑起來看看

我們採用相應的方式將當前目錄發佈爲本地web站點，比如執行Python命令（python -m http.server），然後我們利用瀏覽器訪問此站點的默認文件index.html，瀏覽器的控制檯輸出就會看到WebAssembly模塊初始化輸出的四個運算表達式。

六、調用導出函數

上面我們演示了WebAssembly模塊在初始化的時候調用導入的JavaScript函數，現在我們來演示JavaScript應用如何調用從WebAssembly導出的函數，爲此我們將app.wat的代碼改寫成如下的形式，僅僅保留4個導出的函數add、sub、mul和div。

(module
  (func (export "add") (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.add)

  (func (export "sub")  (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.sub)

  (func (export "mul")  (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.mul)

   (func (export "div")  (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.div_u)
)

index.html中的Javascript代碼也做了如下的修改：我們在調用WebAssembly.instantiateStreaming函數成功加載WebAssembly模塊並創建對應模塊實例後，利用返回結果的instance屬性得到這個模塊實例。模塊導出的成員都保存在該實例的exports屬性返回的集合中，爲此我們從中提取出導出的四個返回，並利用它們完成對應的運算後，調用console.log函數將包含結果的運算表達式輸出到控制檯上。由於WebAssembly模塊不在需要調用導入的函數，所以調用instantiateStreaming函數的時候不需要在指定導入對象。

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script>
        var url="app.wasm";
        WebAssembly
            .instantiateStreaming(fetch("app.wasm"))
            .then(result => {
                var exports = result.instance.exports;

                var result = exports.add(1,2);
                console.log(`1 + 2 = ${result}`);

                result = exports.sub(1,2);
                console.log(`1 - 2 = ${result}`);

                result = exports.mul(1,2);
                console.log(`1 * 2 = ${result}`);

                result = exports.div(1,2);
                console.log(`1 / 2 = ${result}`);
            });
    </script>
</body>
</html>

程序運行之後，瀏覽器的控制檯上依然會輸出相同的結果。