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的更多相关文章

  1. [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 ...

  2. Understanding JavaScript Function Invocation and "this"

    Understanding JavaScript Function Invocation and "this" 11 Aug 2011 Over the years, I've s ...

  3. href="javascript:function()" 和onclick的区别

    href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...

  4. 关于<a href='javascript:function()'>

    <a href='javascript:function()'> 这样写是为了让这个链接不要链接到新页面转而执行一段js代码.和onclick能起到同样的效果,一般来说,如果要调用脚本还是 ...

  5. javascript function对象

    <html> <body> <script type="text/javascript"> Function.prototype.get_my_ ...

  6. JavaScript function函数种类(转)

    转自:http://www.cnblogs.com/polk6/p/3284839.html JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通 ...

  7. JavaScript function函数种类介绍

    JavaScript function函数种类介绍 本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 ? 1 2 3 function ShowName(name) {     ...

  8. 【转】onclick事件与href='javascript:function()'的区别

    href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...

  9. javascript:function 函数声明和函数表达式 详解

    函数声明(缩写为FD)是这样一种函数: 有一个特定的名称 在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中 在进入上下文阶段创建 影响 ...

随机推荐

  1. Python_编程题集_001_词法解析

    1.词法解析: 我的是名字是ths,今年18岁 语法分析后得到结果如下: 数字:18 中文:我的名字是 今年 岁 拼音:ths 符号:,. 请编写程序实现该词法分析功能 string模块解: impo ...

  2. 在 shell中, 我們可用 $0, $1, $2, $3 ... 這樣的变量分別提取命令行中变量

    代码: script_name parameter1 parameter2 parameter3 ...我們很容易就能猜出 $0 就是代表 shell script 名称(路径)本身,而 $1 就是其 ...

  3. Impala的分布式查询

    翻译自<Getting Started with Impala> 分布式查询 分布式查询是impala的核心.曾几何时,你需要研究并行计算,才能开始进行深奥而晦涩的操作.现在,有运行在Ha ...

  4. 算法学习记录-图——最短路径之Dijkstra算法

    在网图中,最短路径的概论: 两顶点之间经过的边上权值之和最少的路径,并且我们称路径上的第一个顶点是源点,最后一个顶点是终点. 维基百科上面的解释: 这个算法是通过为每个顶点 v 保留目前为止所找到的从 ...

  5. skkyk:题解 洛谷P3865 【【模板】ST表】

    我不会ST表 智推推到这个题 发现标签中居然有线段树..? 于是贸然来了一发线段树 众所周知,线段树的查询是log(n)的 题目中"请注意最大数据时限只有0.8s,数据强度不低,请务必保证你 ...

  6. vs进行C#编程中常用的几个快捷键

    (1)输入svm然后按Tab键会生成Main函数: (2)Ctrl +k+s 三个键一起按,会调出代码段:选中多行后,然后按以上三个快捷键,输入需要使用的代码段,按下Tab,代码段会自动包括选中代码. ...

  7. PHP读取xlsx Excel 文件

    <?php require_once 'simplexlsx.class.php'; if ( $xlsx = SimpleXLSX::parse('pricelist.xlsx') ) { p ...

  8. php(ajax)异步刷新(转)

    第一种方法,ajax实现:当然,ajax使用起来确实很简单就可以实现,但是里面的很多知识还是比较有点深的.我之前做页面时间自动刷新的功能就是用的ajax.完整代码是:1.getTime.php: 复制 ...

  9. 九度oj 题目1367:二叉搜索树的后序遍历序列

    题目描述: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 输入: 每个测试案例包括2行: 第一行为1个整数 ...

  10. mysql5.7.23版本安装教程

    亲身实践安装mysql,用时居然花费了三个小时,在有那么多教程的情况下,依然在不该花费时间的路上浪费了太多时间.希望这篇文章能够帮助大家少走弯路~~ 1.下载我下载的是64位. 2.解压下载之后,我选 ...