前提
根据2022.stateofjs.com/zh-Hans/fea… 给出的数据,webAssembly已经在全球的前端从业者中有比较广泛的认知度了,作为一个在处在这13%的选手,还是决定随大流从众一波。
流程
环境安装
windows环境需要安装
- git
- python2.7以上,作为emscripten的依赖
- CMake installer
// 拉取emscripten sdk的初始化模块
git clone https://github.com/juj/emsdk.git
cd emsdk
// 使用emsdk命令初始化emscripten环境 需要环境下有python支持
emsdk install latest
emsdk activate latest
emsdk_env.bat
如果emsdk install没有效果,可以参考这个issue
编译
这时候copy一段简单c++代码
#include <stdio.h>
int main(int argc, char ** argv) {
printf("Hello World\n");
}
在一个已经配置过 Emscripten 编译环境的终端窗口
中,进入刚刚保存 hello.c 文件的文件夹中,然后运行下列命令:
emcc hello.c -s WASM=1 -o hello.html
得到如下文件:
hello.wasm
二进制的 wasm 模块代码hello.js
一个包含了用来在原生 C 函数和 JavaScript/wasm 之间转换的胶水代码的 JavaScript 文件hello.html
一个用来加载,编译,实例化你的 wasm 代码并且将它输出在浏览器显示上的一个 HTML 文件
打开hello.html
,可以看到刚才的c++代码运行结果在html上展示了
编译成功。
结果查看
在vscode下载webAssembly插件查看生成的wasm文件,可以看到他的wat结构:
wat结构
这里分析一下wat的结构,wat是使用S- 表达式
编码
一个S-表达式
的执行步骤如下:
(print (* 2 (+ 3 4)))
(图片出自于航老师的课程)
那么来看一段基础的wat结构的代码
// wat文件
(module
//函数申明方式 func 函数名 (param 参数1 32位) (param 参数2 32位) (返回值 32位)
(func $add (param $lhs i32) (param $rhs i32) (result i32)
// get_local表示压栈,把$lhs压栈
get_local $lhs
// 把$rhs压栈
get_local $rhs
// 相加
i32.add)
// 导出add函数
(export "add" (func $add))
)
// js文件
fetchAndInstantiate('add.wasm').then(function(instance) {
console.log(instance.exports.add(1, 2)); // "3"
});
相当于实现了一个(a, b) => a + b 的功能。
详细的wat介绍可以看这里
原文链接:https://juejin.cn/post/7234103673343901751 作者:用户名未被占用