[Rust] Pass a JavaScript Function to WebAssembly and Invoke it from Rust
In some cases it’s useful to be able to invoke a JavaScript function inside Rust. This session showcases how this can be done, by passing along our JavaScript functions to the WebAssembly module instantiation.
First let's create a function in js:
const appendNumberToBody = (number) => {
const text = document.createTextNode(number);
document.body.appendChild(text);
}
Wrap this function into a single object which contains 'env':
const importObject = {
env: {
appendNumberToBody: appendNumberToBody
}
};
When we load wasm, we can pass in the object:
WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
It return a promise, we can run the exported function return by wasm inside the promise.
Now we are going to create a function in Rust:
extern {
fn appendNumberToBody(x: u32);
}
#[no_mangle]
pub extern fn run() {
unsafe { // we need to wrap with unsafe if getting the passed in value from third party
appendNumberToBody(42);
}
}
We exprot 'run' function, then we can invoke it inside promise:
WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
.then(wasmModule => {
wasmModule.instance.exports.run();
});
---------
Full code: Github
index.html:
<!DOCTYPE html>
<html>
<head>
<script> // pass the data from Js to Rust
const appendNumberToBody = (number) => {
const text = document.createTextNode(number);
document.body.appendChild(text);
} const importObject = {
env: {
appendNumberToBody: appendNumberToBody,
alert: alert
}
}; WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject)
.then(wasmModule => {
wasmModule.instance.exports.run();
});
</script>
<head>
<body></body>
<html>
lib.rs:
extern {
fn appendNumberToBody(x: u32);
fn alert(x: u32);
}
#[no_mangle]
pub extern fn run() {
unsafe {
appendNumberToBody(42);
alert(33)
}
}
[Rust] Pass a JavaScript Function to WebAssembly and Invoke it from Rust的更多相关文章
- [WASM] Call a JavaScript Function from WebAssembly
Using WASM Fiddle, we show how to write a simple number logger function that calls a consoleLog func ...
- Understanding JavaScript Function Invocation and "this"
Understanding JavaScript Function Invocation and "this" 11 Aug 2011 Over the years, I've s ...
- href="javascript:function()" 和onclick的区别
href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...
- 关于<a href='javascript:function()'>
<a href='javascript:function()'> 这样写是为了让这个链接不要链接到新页面转而执行一段js代码.和onclick能起到同样的效果,一般来说,如果要调用脚本还是 ...
- javascript function对象
<html> <body> <script type="text/javascript"> Function.prototype.get_my_ ...
- JavaScript function函数种类（转）
转自:http://www.cnblogs.com/polk6/p/3284839.html JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通 ...
- JavaScript function函数种类介绍
JavaScript function函数种类介绍 本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 ? 1 2 3 function ShowName(name) { ...
- 【转】onclick事件与href='javascript:function()'的区别
href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...
- javascript:function 函数声明和函数表达式 详解
函数声明(缩写为FD)是这样一种函数: 有一个特定的名称 在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中 在进入上下文阶段创建 影响 ...
随机推荐
- vue源码构建代码分析
这是xue源码学习记录,如有错误请指出,谢谢!相互学习相互进步. vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库(vue通过flow来检测数据类型 ...
- Pandas中loc，iloc与直接切片的区别
最近使用pandas,一直搞不清楚其中几种切片方法的区别,今天专门看了一下. 0. 把Series的行index或Dataframe的列名直接当做属性来索引. 如: s.index_name df.c ...
- 我的Python分析成长之路5
一.装饰器: 本质是函数,装饰其他函数,为其他函数添加附加功能. 原则: 1.不能修改被装饰函数的源代码. 2.不能修改被装饰函数的调用方式. 装饰器用到的知识: 1.函数即变量 (把函数体赋值给 ...
- web开发框架之DRF
RESTful架构解释: # Representational State Transfer 表现层状态转化 到底什么是RESTFul架构: 如果一个架构符合REST原则,就称它为RESTful架构. ...
- Android目录结构
|ABI-- 应用程序二进制接口(application binary interface,ABI) |-- Makefile |-- bionic (bionic C库) ...
- Ubuntu 清理卸载残留文件
dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg -P
- Flash生成HTML5动画方法
方法一:利用“swiffy”将Flash转换成HTML5动画. 首先,我们需要下载一款基于“Flash”程序的插件,名称为“swiffy”,这是一款由谷歌推出的一个Flash扩展,可以通过“Fla ...
- python的re模块常用方法
正则表达式模式 模式字符串使用特殊的语法来表示一个正则表达式: 字母和数字表示他们自身.一个正则表达式模式中的字母和数字匹配同样的字符串. 多数字母和数字前加一个反斜杠时会拥有不同的含义. 标点符号只 ...
- 面试准备——Zookeeper
转自https://www.cnblogs.com/shan1393/p/9479109.html 1. Zookeeper是什么框架 分布式的.开源的分布式应用程序协调服务,原本是Hadoop.HB ...
- 第一阶段Sprint 对其他团队评价
咱们的team 针对对“小学生网页四则运算”这个产品的评审,本人提出建议:1.第一阶段的产品Sprint不够好,无任务看板.无燃尽图.希望完善该产品的的Sprint,第二阶段的Sprint要认真写好. ...