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 吧😧"

相关推荐
木斯佳1 小时前
前端八股文面经大全:bilibili生态技术方向二面 (2026-03-25)·面经深度解析
前端·ai·ssd·sse·rag
不会写DN1 小时前
Gin 日志体系详解
前端·javascript·gin
冬夜戏雪1 小时前
实习面经记录(十)
java·前端·javascript
爱学习的程序媛3 小时前
【Web前端】JavaScript设计模式全解析
前端·javascript·设计模式·web
小码哥_常3 小时前
从SharedPreferences到DataStore:Android存储进化之路
前端
老黑3 小时前
开源工具 AIDA:给 AI 辅助开发加一个数据采集层,让 AI 从错误中自动学习(Glama 3A 认证)
前端·react.js·ai·nodejs·cursor·vibe coding·claude code
jessecyj3 小时前
Spring boot整合quartz方法
java·前端·spring boot
苦瓜小生4 小时前
【前端】|【js手撕】经典高频面试题:手写实现function.call、apply、bind
java·前端·javascript
天若有情6734 小时前
前端HTML精讲03:页面性能优化+懒加载,搞定首屏加速
前端·性能优化·html
踩着两条虫4 小时前
AI驱动的Vue3应用开发平台深入探究(十):物料系统之内置组件库
android·前端·vue.js·人工智能·低代码·系统架构·rxjava