Giter VIP home page Giter VIP logo

practice-wasm's Introduction

练习 wasm 项目

项目

├── src              # rust 所在目录
├── index.js         # web 脚本入口
├── Cargo.toml       # rust 项目配置文件
└── package.json     # web 项目配置文件

指令

对于 rust

# --target 标志用于指定要构建的目标平台
# wasm32-unknown-unknown 是指定了 WebAssembly 目标平台,
# 这告诉 Cargo 生成「适用于 WebAssembly 的二进制文件」,而不是生成本地平台的二进制文件
cargo build --target wasm32-unknown-unknown

当运行这个命令后,Cargo 会使用 Rust 编译器(Rustc)以及与 WebAssembly 相关的工具链,将 Rust 代码编译为 WebAssembly 格式的二进制文件。这个生成的 Wasm 文件可以在浏览器中运行,或与其他支持 WebAssembly 的环境一起使用。

对于 web

# 启动 dev 环境 localhost:8080
npm run serve

# 构建程序
npm run build

原理探析

在使用 cargo 和 wasm_bindgen 编译源代码时,会在 pkg 文件中「自动生成」以下文件:

  • wasm_rust_bg.js
  • wasm_rust_bg.wasm
  • wasm_rust_bg.wasm.d.ts
  • wasm_rust.js
  • wasm_rust.d.ts
  • package.json

wasm_rust_bg.js 文件是由 wasm-bindgen 自动生成的,它包含了用于将 DOM 和 JavaScript 函数导入到 Rust 中的 JavaScript 粘合代码。它还在生成的 WebAssembly 函数上向 JavaScript 公开了 API。

Rust WebAssembly 专注于将 WebAssembly 与现有的 JavaScript 应用程序集成在一起。为了实现这一目标,我们需要在 JavaScript 和 WebAssembly 函数之间「传递不同的值、对象或结构。这并不容易,因为需要协调两个不同系统的不同对象类型」。

当前 WebAssembly 仅支持「整数」和「浮点数」,不支持字符串。这意味着我们不能简单地将字符串传递给 WebAssembly 函数。要将字符串传递给 WebAssembly,我们需要「将字符串转换为数字」(请注意在 webpack.config.js 中指定的 TextEncoder API),将这些数字放入 WebAssembly 的内存空间中,最后「返回一个指向字符串的指针」给 WebAssembly 函数,以便在 JavaScript 中使用它。在最后,我们需要释放 WebAssembly 使用的字符串内存空间。

在 wasm_rust_bg.js 中可以找到一个 hello_world 函数,这正是自动执行的操作。hello_world 函数首先调用 passStringToWasm。这个函数在 WebAssembly 中「创建一些内存空间」,将我们的字符串转换为数字,将数字写入内存空间,并返回一个指向字符串的指针。然后将指针传递给 wasm.hello_world 来执行 JavaScript 的 alert。最后,wasm.__wbindgen_free 释放了内存。

practice-wasm's People

Contributors

xiezongchen avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.