网站开发工具.枫子科技,网站地图提交给百度,公司运营方案模板,游戏开发 网站开发WebAssembly也叫浏览器字节码技术 这里就不过多的解释了网上很多介绍主要是让大家知道在js里面如何调用执行它#xff0c;我之前看WebAssemblyAPI时候反正是看得一脸懵逼也是为了大家能更快的入手这个比较新的技术吧这边写的一个dom是官方推荐的c/c编译的c代码1 int add (int …WebAssembly也叫浏览器字节码技术 这里就不过多的解释了网上很多介绍主要是让大家知道在js里面如何调用执行它我之前看WebAssemblyAPI时候反正是看得一脸懵逼也是为了大家能更快的入手这个比较新的技术吧这边写的一个dom是官方推荐的c/c编译的c代码1 int add (int x, inty) {2 return x y;3 }45 int square (intx) {6 return x *x;7 }属性c但是对字节码不熟悉的朋友可能会不理解为什么没有main函数这里主要是把这个c代码当成一个模块调用不需要它自己执行所以没有官方也有有main函数的能直接生成js和html但是太过雍于这种方式比较推荐也是让js能直接调用比较方便之后使用 emscripten进行编译 emcc math.c -Os -s WASM1 -s SIDE_MODULE1 -o math.wasm然后就有math.wasm文件了如果没装emscripten的话我博客里面有一篇是关于安装的有了math.wasm文件后就该用js调用它了新建math.html加入调用的方法如下1 2 3 4 5 6 7 Document8 9 10 1112 13 14 /**15 * param {String} path wasm 文件路径16 * param {Object} imports 传递到 wasm 代码中的变量17 */18 functionloadWebAssembly (path, imports{}) {19 returnfetch(path)//加载文件20 .then(responseresponse.arrayBuffer())//转成 ArrayBuffer21 .then(bufferWebAssembly.compile(buffer))22 .then(module{23 imports.envimports.env||{}2425 //开辟内存空间26 imports.env.memoryBaseimports.env.memoryBase|| 027 if(!imports.env.memory) {28 imports.env.memory newWebAssembly.Memory({ initial:256})29 }3031 //创建变量映射表32 imports.env.tableBaseimports.env.tableBase|| 033 if(!imports.env.table) {34 //在 MVP 版本中 element 只能是 anyfunc35 imports.env.table newWebAssembly.Table({ initial:0, element:anyfunc})36 }3738 //创建 WebAssembly 实例39 return newWebAssembly.Instance(module, imports)40 })41 }42 //调用43 loadWebAssembly(./math.wasm)44 .then(instance{45 const addinstance.exports._add//取出c里面的方法46 const squareinstance.exports._square//取出c里面的方法4748 console.log(10 20 , add(10,20))49 console.log(3*3 , square(3))50 console.log((2 5)*2 , square(add(2 5)))51 })5253 54 55
