Using WASM Fiddle, we show how to write a simple number logger function that calls a consoleLog function defined in JavaScript. We then download and run the same function in a local project.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?cvrmt

Demo Repo: https://github.com/guybedford/wasm-intro

Basiclly WASM is hard to debug, we still need Javascript to help, the way to do debugging is we pass Javascript Console.log function into WASM though "imports".
 
Defined a C code:
#include <math.h>

void consoleLog (float num);

float getSqrt (float num) {
consoleLog(num);
return sqrt(num);
}

Defined a function called "consoleLog".

After build to wasm:

(module
(type $FUNCSIG$vf (func (param f32)))
(type $FUNCSIG$ff (func (param f32) (result f32)))
(import "env" "consoleLog" (func $consoleLog (param f32)))
(table anyfunc)
(memory $ )
(export "memory" (memory $))
(export "getSqrt" (func $getSqrt))
(func $getSqrt (param $ f32) (result f32)
(call $consoleLog
(get_local $)
)
(f32.sqrt
(get_local $)
)
)
)

It's importing consoleLog from a module called environment.

This is just a default module namespace name for the externals of a C code compilation process.

Now on JS side, we need to pass the console.log function from "imports" param:

        function fetchAndInstantiateWasm(url, imports) {
return fetch(url)
.then((res) => {
if (res.ok) {
return res.arrayBuffer();
}
throw new Error('Unable to fetch WASM')
})
.then((bytes) => {
return WebAssembly.compile(bytes);
})
.then(module => {
return WebAssembly.instantiate(module, imports || {});
})
.then(instance => instance.exports);
} fetchAndInstantiateWasm('./program.wasm', {
env: {
consoleLog: (num) => console.log(num)
}
})
.then(m => {
window.getSqrt = m.getSqrt;
});

[WASM] Call a JavaScript Function from WebAssembly的更多相关文章

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

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

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

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

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

  4. javascript function对象

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

  5. Understanding JavaScript Function Invocation and "this"

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

  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. 42.cnpm不是内部命令的解决方案:配置环境变量

    转自:https://blog.csdn.net/u014540814/article/details/78777961

  2. 带你底层看Sqoop如何转换成MapReduce作业运行的(代码程序)

    补充 其实啊,我们知道,sqoop在运行的时候,最终会去转换成mapreduce作业,这个很简单,不多赘述.直接贴出来. 具体这些怎么运行的,见我如下这篇博客.这里只做一个引子. Sqoop Impo ...

  3. spark源码阅读

    根据spark2.2的编译顺序来确定源码阅读顺序,只阅读核心的基本部分. 1.common目录 ①Tags②Sketch③Networking④Shuffle Streaming Service⑤Un ...

  4. [BZOJ4555 TJOI2016 HEOI2016 求和]

    ​ 第一篇博客,请大家多多关照.(鞠躬 BZOJ4555 TJOI2016 HEOI2016 求和 题意: ​ 给定一个正整数\(n\)(\(1\leqq n \leqq100000\)),求: \[ ...

  5. 去除inline-block元素间距

  6. windows10系统window键失灵,没有反应

    今天键盘的的Window键(win键)按了没反应,某度一圈全是它的垃圾营销号文章,没卵用..最后在微软官方社区支持找到解决方案.也建议大家遇到系统问题到微软社区去寻求帮助,毕竟人家是专业. 解决办法 ...

  7. visualSVN+花生壳实现外网访问局域网内SVN

    使用SubVersion+TortoiseSVN局域网内访问SVN成功后,想从外网访问SVN,使用花生壳绑定路由器动态DNS,但是折腾半天没搞定,突然发现一个帖子http://hi.baidu.com ...

  8. js17---创建对象:构造函数式和原型组合模式、动态原型模式、稳妥构造函数式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. 可重入锁ReentrantLock--转载

    突然被问到什么是可重入锁?脑袋里闪过了n中概念,最终没有找到,从网上学习一下. 原文地址:https://www.ibm.com/developerworks/cn/java/j-jtp10264/ ...

  10. golang 建临时文件目录以及删除

    package main import ( "fmt" "os" "path/filepath" "strings" ) ...