我正在参与「启航方案」

一. 前语

在上一篇文章《运用Rust和WebAssembly整花活儿(二)——DOM和类型转化》中，描述了运用Rust操作DOM，并完成Rust与JS类型转化的多种办法。

在开发 Web 应用程序时，运用 Rust 编写的 Wasm 模块能够供给更高的性能和更好的安全性。可是，为了与现有的 JavaScript 代码集成，有必要完成 Rust 与 JS 之间的交互。Rust 与 JS 交互的首要意图是将两种言语的优势结合起来，以完成更好的 Web 应用程序。

根据上一篇文章中，Rust与JS的类型转化的多种办法，本篇文章继续深化Rust与JS的交互。

首要，Rust与JS的类型转化，能够完成变量的传递，那么变量是要用在哪里呢？那必定是函数了！

所以，本篇文章来叙述一下Rust与JS的函数彼此调用，根据此，能够完成大量日常功用开发。

而且，还将会叙述一下，怎么导出Rust的struct给JS调用。

是的，没错，在JS调用Rust的struct！一开始看到这个功用的时候，我的脑子是有点迸裂的……

本篇文章中，将根据上一篇文章中创立的项目来继续开发。

源码：github.com/Kuari/hello…

二. 函数的彼此调用

1. JS调用Rust函数

其实，在本系列文章的榜首篇中，便是运用的JS调用Rust函数作为事例来演示的，这里仍然以此为例，首要讲一下关键。

首要，声明一个Rust函数：

use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

此处需求注意的关键如下：

引入wasm_bindgen
声明一个函数，运用pub声明
在函数上运用#[wasm_bindgen]宏来将Rust函数导出为WebAssembly模块的函数

接着，编译成wasm文件：

wasm-pack build --target web

然后，在JS中调用该函数：

<script type="module">
    import init, { add } from './pkg/hello_wasm.js';
    const run = async () => {
        await init();
        const result = add(1, 2);
        console.log(`the result from rust is: ${result}`);
    }
    run();
</script>

最终，启动http server，在浏览器的操控台中能够看到the result from rust is: 3，表明调用成功！

2. Rust调用JS函数

2.1 指定JS目标

在Rust中调用JS函数，需求进行指定JS目标，也便是说，得明晰告知Rust，这个JS函数是从JS哪儿拿来的用的。

首要在于下面两个办法：

js_namespace: 是一个可选的特点，用于指定一个JavaScript命名空间，其间包括将要在wasm模块中导出的函数。假如没有指定js_namespace，则一切的导出函数将被放置在大局命名空间下。
js_name: 是另一个可选特点，它用于指定JavaScript中的函数称号。假如没有指定js_name，则导出函数的称号将与Rust中的函数称号相同。

2.2 JS原生函数

关于一些JS原生函数，在Rust中，需求去寻找代替方案，比方咱们上一篇文章中讲的console.log()函数，是不是觉得好麻烦啊！

那么，你想直接在Rust中调用JS原生函数吗？！

此处，就以console.log()函数为例，直接在Rust中引入并调用，免除代替方案的烦恼。

首要，给出Rust代码：

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(message: &str);
}
#[wasm_bindgen]
pub fn call_js_func() {
    log("hello, javascript!");
}

如上代码中，call_js_func函数，顾名思义，此处是调用了js函数，并传入参数hello, javascript!。

那么，call_js_func函数上方的代码，咱们来一步步解析一下：

榜首行代码#[wasm_bindgen]是Rust的特点，它告知编译器将函数导出为WebAssembly模块
extern "C"是C言语调用约好，它告知Rust编译器将函数导出为C言语函数
#[wasm_bindgen(js_namespace = console)]告知编译器将函数绑定到JavaScript中的console目标
fn log(message: &str)是一个Rust函数，它承受一个字符串参数，并将其打印到JavaScript中的console目标中

此处与JS交互的关键是js_namespace。在Rust中，js_namespace是用于指定JavaScript命名空间的特点。在WebAssembly中，咱们能够经过它将函数绑定到JavaScript中的目标上。

在上述代码中，#[wasm_bindgen(js_namespace = console)]告知编译器将函数绑定到JavaScript中的console目标。这意味着在JS中运用console.log()函数来调用Rust中的log()函数。

因而，类似的原生函数，都能够运用该办法来完成调用。

最终，咱们在JS中调用下：

<script type="module">
    import init, { call_js_func } from './pkg/hello_wasm.js';
    const run = async () => {
        await init();
        call_js_func();
    }
    run();
</script>

能够在浏览器的操控台中看到hello, javascript!。妙啊！

其实关于console.log()而言，还有另一种调用办法，那便是运用js_namespace和js_name同时指定。

或许，你会问，这有什么不同吗？是的，这有些不同。

不知道你是否发现，当前这个事例中，指定了js_namespace为console，可是实在执行的函数是log()，那么这个log函数的指定，其实是体现在Rust中同样的函数名log。也便是说，该事例的log()便是console.log()中的log()。

咱们来换个姓名看看，将原来的log()换成log2()：

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log2(message: &str);
}
#[wasm_bindgen]
pub fn call_js_func() {
    log2("hello, javascript!")
}

然后编译后去操控台看看，就会看到报错：

TypeError: console.log2 is not a function

因而，当咱们运用js_namespace和js_name结合的办法，在此处是能够进行自界说函数名的。

看一下Rust代码：

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(message: &str);
    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_str(message: &str);
}
#[wasm_bindgen]
pub fn call_js_func() {
    log_str("hello, javascript!")
}

此处，从头界说了一个函数log_str，可是其指定了js_namespace = console和js_name = log，那么此处，就能够运用自界说的函数名。

直接编译后，在操控台看一下，能够直接看到正常输出：hello, javascript!。

总结一下，假如没有指定js_name，则 Rust 函数称号将用作 JS 函数称号。

2.3 自界说JS函数

在必定场景下，需求运用Rust调用JS函数，比方关于一些关于JS而言更有优势的场景——用JS操作DOM，用Rust核算。

首要，创立一个文件index.js，写入一个函数：

export function addIt(m, n) {
    return m + n;
};

当前的文件结构关系如下：

.
├── Cargo.lock
├── Cargo.toml
├── README.md
├── index.html
├── index.js
├── pkg
│ ├── README.md
│ ├── hello_wasm.d.ts
│ ├── hello_wasm.js
│ ├── hello_wasm_bg.wasm
│ ├── hello_wasm_bg.wasm.d.ts
│ └── package.json
├── src
│ └── lib.rs
└── target
    ├── CACHEDIR.TAG
    ├── debug
    ├── release
    └── wasm32-unknown-unknown

其间，index.js和lib.rs，以及hello_wasm_bg.wasm都是不在同一级别的，index.js都在其它两个文件的上一级。记住这个机构关系！

然后，在lib.rs中，指定函数：

#[wasm_bindgen(raw_module = "../index.js")]
extern "C" {
    fn addIt(m: i32, n: i32) -> i32;
}

其间，raw_module = "../index.js"的意思是，指定对应的index.js文件，我们应该清楚，此处指定的是刚刚创立的index.js。raw_module的效果便是用来指定js文件的。

这段代码在前端，能够等同于：

import { addIt } from '../index.js'

这样在前端都不用引入了，直接在Rust中引入了，感觉还有点美妙的。

接着，在Rust调用该函数：

#[wasm_bindgen]
pub fn call_js_func() -> i32 {
    addIt(1, 2)
}

最终，在前端调用，编译后，在浏览器的操控台中能够看到输出成果了！

总结一下，这里有几个注意点：

JS的函数有必要要export，否则将无法调用；
raw_module只能用来指定相对路径，而且，我们能够在浏览器的操控台中注意到，此处的../的相对路径，其实是以wasm文件而言的相对路径，这里必定要注意呀！

三. JS调用Rust的struct

现在，来点迸裂的，JS调用Rust的struct？！

JS中连struct都没有，这玩意儿导出来会是什么样，得怎样在JS中调用呢？！

首要，界说一个struct，而且声明几个办法：

#[wasm_bindgen]
pub struct User {
    name: String,
    age: u32
}
#[wasm_bindgen]
impl User {
    #[wasm_bindgen(constructor)]
    pub fn new(name: String, age: u32) -> User {
        User { name, age }
    }
    pub fn print_user(&self) {
        log(format!("name is : {}, age is : {}", self.name, self.age).as_str());
    }
    pub fn set_age(&mut self, age: u32) {
        self.age = age;
    }
}

此处，声明晰一个struct名为User，包括name和age两个字段，并声明晰new、print_user和set_age办法。

其间还有一个未见过的#[wasm_bindgen(constructor)]，constructor用于指示被绑定的函数实际上应该转化为调用 JavaScript 中的 new 运算符。或许你还不太明晰，继续看下去，你就会明白了。

接着，在JS中调用这个struct，和其办法：

<script type="module">
    function addIt2(m, n) {
        return m + n;
    };
    import init, { User } from './pkg/hello_wasm.js';
    const run = async () => {
        await init();
        const user = new User('kuari', 20);
        user.set_age(21);
        user.print_user();
    }
    run();
</script>

能够看到，这里的用法就很了解了！

大概想一下，在Rust中要怎么调用？也便是直接new一个——User::new('kuari', 20)。

此处在JS中，也是如此，先new一个！

然后很自然地调用struct的办法。

编译后，打开浏览器，能够在操控台看到输出：name is : kuari, age is : 21。

其实，或许我们会很好奇，起码我对错常好奇的，Rust的struct在JS中到底是一个怎样的存在呢？

这里直接增加一个console.log(user)，就能够在输出看到。那么到底在JS中是一个怎样的存在呢？请各位着手打印一下看看吧！:P

四. 总结

本篇文章中，首要叙述了Rust与JS的交互，体现在Rust与JS的彼此调用，这是建立在上一篇文章中类型转化的基础上的。

Rust与JS的函数彼此调用的学习本钱还是较大的，而且对比Go写wasm，Rust的颗粒度对错常细的，几乎能够说是为所欲为了。

比较迸裂的便是Rust的struct导出给JS用，这关于Rust与JS的交互而言，还对错常棒的体会。

使用Rust和WebAssembly整花活儿(三)——Rust与JS交互

一. 前语

二. 函数的彼此调用

1. JS调用Rust函数

2. Rust调用JS函数

2.1 指定JS目标

2.2 JS原生函数

2.3 自界说JS函数

三. JS调用Rust的struct

四. 总结

作者信息

使用Rust和WebAssembly整花活儿(三)——Rust与JS交互

一. 前语

二. 函数的彼此调用

1. JS调用Rust函数

2. Rust调用JS函数

2.1 指定JS目标

2.2 JS原生函数

2.3 自界说JS函数

三. JS调用Rust的struct

四. 总结

相关文章

Go sync.Once：简约而不简单的并发利器

Remix 路由模块输出对象 handle

这两周我到底在做什么？理解唤醒词

浅谈Hook

作者信息