AS 不就是 AnyScript 嘛,那我可太擅长了

前言

接之前提到的主管让我调研在浏览器 WebAssembly 里跑加解密过程的问题,这里记录一下自己学习使用 AS 编译 wasm 文件并实现前端调用的小 demo 的过程。

为什么选 AssemblyScript

主管说他了解了一下,wasm 文件可以在浏览器的一个隔离环境里运行,很适合做加解密(真的吗?这个隔离环境真没办法写脚本扒出来吗?😦)。然后呢,他们一群"老叔叔"都是 Javaer,也没了解到有 Java 编译成 .wasm文件的解决方案。好巧不巧他又找到了 AssemblyScript,说是类似 TypeScript 的语法,好嘛,我这个天天写 AnyScript 的不搁这呢吗,AnyScript 也是 AS !正好我刚搞完之前布置给我的 qiankun 问题闲了下来,一个 Markdown 文件就甩到消息列表里了:1、了解一下 AssemblyScript;2、写个 HelloWorld demo;3、前端调用;4、看看能不能实现加解密(找找有没有现成的类似 crypto-js 加密库)。

了解 AssemblyScript

介绍 | AssemblyScript 中文网 (nodejs.cn)

Introduction | The AssemblyScript Book

​ 官网介绍:它与 TypeScript 类似,但对于 WebAssembly 类型 ,由于 提前 编译 严格类型化 代码有一些限制,但也有一些源自 WebAssembly 功能集的添加。 虽然并非所有 TypeScript 都能得到支持,但它与 JavaScript 的密切关系使其成为已经习惯为 Web 编写代码的开发者的熟悉选择,并且还具有与现有 Web 平台概念无缝集成的潜力,以产生精益和平均的结果 WebAssembly 模块。

简单了解完,就是我们可以写 ts 文件,然后通过编译器用二进制编译为 wasm 文件,但是它写的 ts 并不等同于我们平时写的 ts ,不能把已有的 ts 程序编译成 wasm 文件。

Aseembly 启动!

  1. 在 cmd 输入以下命令

    bash 复制代码
    npm init
    npm install --save-dev assemblyscript
    npx asinit .

    跟着官网的指南,新建了一个项目,生成的项目如下:

  1. 然后我们把 index.ts 中内容修改为:

    ts 复制代码
    export function hello(): string {
      return "Hello World";
    }
  2. 运行 npm run asbuild

    在 build/ 目录中生成了以下文件:


到这里已经编译出了我们需要的 wasm 文件,然后我发现这里还生成了一个 js 文件,然后分析了一下 release.js 和项目 index.html 中的已有代码,发现 AssemblyScript 的编译器贴心的帮我把如何调用 wasm 文件的 js 文件一起编译好了 👍👍,这个功能实在是太赞了(PS:因为我在后期尝试使用 TinyGo 编译 wasm 文件时,需要自己写一些 js 代码调用),这样我们完全可以在需要调用的地方,导入 release.js 中 export 出的函数。

  1. 将 release.wasm 和 release.js 文件拷贝到前端工程中,在页面中直接 import 我们的 release.js 文件。
  1. 启动前端项目,查看效果(tailwind + daisyui 真的香)

Bingo,成功在 React 项目中调用了 wasm 文件👻。

Later ...

现在该写加密算法了! 然后我熟练地 npm i @types/crypto-js ;import CryptoJS from "crypto-js";用 AES 算法写了个 encode 和 decode 算法;npm run asbuild 😎。

报错!啊对,我写的不是原来的 TypeScript,原来的工具库不能用!快去 Github 搜搜!

结果没有一个能全部提供满足我们使用的一系列对称加密、非对称加密、摘要算法的😫。

AssemblyScript 官方仓库也有相关的 issue,看大佬的回复要使用 AssemblyScript 的主机绑定?并不知道这个主机绑定是啥意思,看文档也是云里雾里,可能是在 WebAssembly 里直接套娃运行 JavaScript?那考虑性能的话用我之前写的 Golang 更合适吧 ...... (然后我又去试了一下 TinyGo ,难度有点大,最后还是放弃了)

最后

没办法,找主管汇报吧!

"AS我了解了!是 AssemblyScript ,不是 AnyScript !Demo写出来了!Hello啥我都能给你返回出来,我还抄了个简单的 encode 和 decode 方法😙,加解密也能写!"

"老大,你不会觉得我能写出来 AssemblyScript 的 crypto-as 吧😧"

相关推荐
小新1104 分钟前
从零开始 Vue.js
前端·javascript·vue.js
naildingding26 分钟前
Vue基础核心
前端·vue.js
弱鸡前端28 分钟前
纯前端实现pdf从生成到下载
前端
明月_清风35 分钟前
TanStack + Cloudflare 边缘实战:从 0 到 1 构建全栈应用
前端·全栈
东风破_35 分钟前
你天天用的 Python dict,90% 的人没搞懂这三个坑
前端
前端Hardy38 分钟前
21.8 万周下载!这个 React 表格组件,10 行代码就能跑起来
前端·javascript·后端
lichenyang45340 分钟前
# 鸿蒙 ArkTS 聊天 Demo 功能复盘:真实 SSE、多轮会话、暂停输出、历史记录与防崩溃修复 > 项目:`harmony-chat-demo`
前端
陈_杨43 分钟前
鸿蒙APP开发-带你走进胶片录的拍摄记录管理
前端·javascript
陈_杨1 小时前
鸿蒙APP开发-带你走进胶片录的相机控制
前端·javascript
陈_杨1 小时前
鸿蒙APP开发-带你走进节流战的Canvas图表
前端·javascript