扫一扫分享
用于构建C ++ SPA的最小WebAssembly虚拟dom(单页面应用程序) ,您可以使用Emscripten在C ++中编写整个SPA并将其编译为WebAssembly(或asmjs作为后备),asm-dom将为您调用DOM api。
asm-dom是一个低级虚拟DOM库。 最初,asm-dom诞生于在一个不是游戏,VR,AR或图像/视频编辑的常见用例中测试WebAssembly强大功能的想法。asm-dom并非在ism中完全发展。与DOM的所有交互都是用Javascript编写的。这是一个很大的缺点,因为JS和WASM之间的绑定开销,在未来asm-dom将更加强大,无论如何结果是令人满意的。
例子
#include "asm-dom.hpp"
using namespace asmdom;
int main() {
Config config = Config();
init(config);
// asm-dom can be used with a JSX like syntax thanks to gccx
VNode* vnode = (
<div
onclick={[](emscripten::val e) -> bool {
emscripten::val::global("console").call<void>("log", emscripten::val("clicked"));
return true;
}}
>
<span style="font-weight: bold">This is bold</span>
and this is just normal text
<a href="/foo">I'll take you places!</a>
</div>
);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(
emscripten::val::global("document").call<emscripten::val>(
"getElementById",
std::string("root")
),
vnode
);
// without gccx
VNode* newVnode = h("div",
Data(
Callbacks {
{"onclick", [](emscripten::val e) -> bool {
emscripten::val::global("console").call<void>("log", emscripten::val("another click"));
return true;
}}
}
),
Children {
h("span",
Data(
Attrs {
{"style", "font-weight: normal; font-style: italic"}
}
),
std::string("This is now italic type")
),
h(" and this is just normal text", true),
h("a",
Data(
Attrs {
{"href", "/bar"}
}
),
std::string("I'll take you places!")
)
}
);
// Second `patch` invocation
patch(vnode, newVnode); // asm-dom efficiently updates the old view to the new state
return 0;
};
手机预览