Fatal编程技术网
  • dom/
  • 如何从WebAssembly文本格式访问DOM？

如何从WebAssembly文本格式访问DOM？

dom

如何从WebAssembly文本格式访问DOM？,dom,webassembly,Dom,Webassembly,这演示了如何从C程序访问WebAssembly中的DOM： #ifdef __EMSCRIPTEN__ #include <emscripten.h> #endif unsigned int EMSCRIPTEN_KEEPALIVE IncrementClickCountOnValue() { // Static variable that hold how many times this function was clicked static int clicks

这演示了如何从C程序访问WebAssembly中的DOM：

#ifdef __EMSCRIPTEN__
#include <emscripten.h>
#endif

unsigned int EMSCRIPTEN_KEEPALIVE IncrementClickCountOnValue()
{
    // Static variable that hold how many times this function was clicked
    static int clicks=0;

    // Modify the DOM, through a Javascript call provided by EM_ASM_, getElementById  is the DOM API used
    EM_ASM_( {document.getElementById("run").value='Webassembly click count: '+$0}, ++clicks );
    return 1;
}

\ifdef\uu EMSCRIPTEN__
#包括
#恩迪夫
unsigned int EMSCRIPTEN_KEEPALIVE IncrementClickCountOnValue（）
{
//静态变量，用于保存此函数被单击的次数
静态整数=0；
//修改DOM，通过EM_ASM_提供的Javascript调用，getElementById是使用的DOM API
EM_ASM_（{document.getElementById（“run”）.value='Webassembly click count:'+$0}，++clicks）；
返回1；
}
如果编译（
emcc dom.c-O1-s moduleize=1-s WASM=1-o dom.js
）并运行它（
emrun--no_browser--port 8080.
），它将按预期工作

没有C，I，我怎么能做同样的事情呢。E什么是
EM_ASM_389;（{document.getElementById（“run”）.value='Webassembly click count:'+$0}，++clicks）的等价物
在？

中，没有纯WebAssembly文本格式的等效项，因为WebAssembly环境不知道DOM（或任何浏览器API）的任何信息，也不知道如何操作它

WebAssembly可以做的是从其宿主环境（如浏览器）导入功能。然后，您可以通过提供导入的函数索引或名称，使用
call
指令从WebAssembly中调用这些函数

下面是一个在WebAssembly中递增静态（全局）的示例，然后根据计数更新DOM：

;; clicks.wat

(module

    ;; import the updateClickCount function from JavaScript land

    (import "button" "updateClickCount"
        (func $updateClickCount
            (param $x i32)
        )
    )

    ;; Define a mutable static i32 initialized at 0

    (global $count (mut i32) (i32.const 0))

    ;; Define and export a function to JS land

    (func (export "onClick")

        ;; Increment the global count

        get_global $count
        i32.const 1
        i32.add
        set_global $count

        ;; Push the count on the stack and call the imported function

        get_global $count
        call $updateClickCount
    )
)
这可能是加载和设置导入并连接到DOM的对应HTML/JS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clicks</title>
</head>
<body>

    <button id="click">CLICK ME</button>
    <p id="numclicks"></p>

    <script>

        // This is what we'll make available to wasm

        const imports = {
            button: {
                updateClickCount: (num) => document.getElementById('numclicks').innerHTML = num.toString()
            }
        };

        WebAssembly.instantiateStreaming(fetch('clicks.wasm'), imports)
            .then(obj => {

                const exports = obj.instance.exports;

                // When the button is clicked, call the function in wasm

              document.getElementById('click').addEventListener('click', () => {

                    exports.onClick();
                });

            }).catch((err) => console.error(err));
    </script>
</body>
</html>


咔哒声
点击我


//这就是我们将提供给wasm的内容
常量导入={
按钮：{
updateClickCount：（num）=>document.getElementById（'numclicks'）。innerHTML=num.toString（）
}
};
WebAssembly.InstanceStreaming（获取（'clicks.wasm'），导入）
.然后（obj=>{
const exports=obj.instance.exports；
//单击按钮时，调用wasm中的函数
document.getElementById（'click'）。addEventListener（'click'，（）=>{
exports.onClick（）；
});
}).catch（（err）=>console.error（err））；
WebAssembly studio示例（单击构建并运行）：