Web前端开发网

web.fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 文章投稿
  • 关于我们
资源分类
AI智能酷站推荐招聘/兼职框架/库模块/管理移动端UI框架Web-UI框架Js插件CSS相关在线工具建站资源 更多
网站收录 / 问题反馈

asm-dom

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

asm-dom
网站地址:https://mbasso.github.io/asm-dom
GitHub:https://github.com/mbasso/asm-dom
描述信息:一个极小的WebAssembly虚拟DOM专注于性能
访问官网
GitHub

用于构建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;
};


仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://web.fly63.com/nav/2152

更多»
热门资源
Vue
Vue.js是一套构建用户界面的渐进式JavaScript框架
官网
GitHub
react
Facebook开发的一款高效、灵活、声明式设计的JS库
官网
GitHub
AngularJS
Google推出有条理,可维护,易编程的MVVM框架
官网
GitHub
backbone
提供:模型、集合、视图,开发重量级的javascript应用的框架
官网
GitHub
jquery
一个快速、简洁的JavaScript代码库
官网
GitHub
zepto.js
一个轻量级的针对现代高级浏览器的JavaScript库
官网
GitHub
Ember
JavaScript MVC框架,它用来创建复杂的Web应用程序,消除了样板
官网
GitHub
nw.js
轻量级桌面应用开发的捷径
官网
GitHub
socket.io
一个WebSocket库,包括了客户端的js和服务器端的nodejs
官网
GitHub
nuxt.js
基于 Vue.js 的轻量级、服务端渲染 (SSR) 应用框架
官网
GitHub
Next.js
实现react的服务端渲染的框架
官网
GitHub
Electron
基于Chromium 和 Node.js, 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
官网
GitHub
类似于asm-dom的资源
Choo
一个有趣、超强的前端框架
官网
GitHub
HooX
一个基于 hook 的轻量级的 React 状态管理工具
点击进入
GitHub
quicklink
用于加快后续页面加载速度
点击进入
GitHub
Underscore.js
一个JavaScript实用库,提供了一整套函数式编程的实用功能
官网
GitHub
single-spa
于前端微服务化的JavaScript前端解决方案
官网
GitHub
relay
基于React的数据驱动框架
官网
GitHub
react-sortable-hoc
能将任意列表转换为可拖动排序的 React 高阶组件
官网
GitHub
Electrobun
基于 TypeScript 构建的跨平台桌面应用框架
官网
GitHub
目录

手机扫一扫预览

首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架

Copyright © 2018 Web前端开发网 All Rights Reserved. 分享编程学习资源(教程/框架/库)、在线工具、技术教程、内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。