欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

WebAssembly增強前端應(yīng)用技巧詳解

 更新時間：2023年02月20日 10:00:24   作者：PuffMeow  
這篇文章主要為大家介紹了WebAssembly增強前端應(yīng)用技巧示例詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

準備

此篇文章我們主要使用 Rust 來編寫我們的 WebAssembly 工具庫然后在 React 應(yīng)用進行使用。所以需要準備好下列的環(huán)境

  • Rust 開發(fā)環(huán)境(rustup、rustc、cargo 這些)
  • 前端開發(fā)環(huán)境(node、npm 這些)
  • wasm-pack (cargo install wasm-pack)

開始

開始前我們先要準備一個前端應(yīng)用，這里我們使用 create-react-app 來創(chuàng)建一個 React 項目。 如果沒有安裝 create-react-app ，先用 pnpm (npm / yarn 也行)全局安裝一下

npm install -g create-react-app

創(chuàng)建項目

使用 typescript 模板來創(chuàng)建項目，以獲得更好的類型提示。

create-react-app react-wasm --template typescript

進入到剛創(chuàng)建好的項目目錄中

cd react-wasm

創(chuàng)建好 react 項目之后，我們接下來使用 wasm-pack 創(chuàng)建一個 wasm 工具庫

wasm-pack new wasm-lib

創(chuàng)建完成后我們的目錄結(jié)構(gòu)是像下面這樣子的，

src 目錄主要編寫前端應(yīng)用代碼

wasm-lib/src 目錄主要編寫 rust wasm 代碼

wasm-lib/src/lib.rs 目錄下，這里就是我們可以進行編寫供前端調(diào)用的 WebAssembly 函數(shù)。這里默認寫好了一個 greet 函數(shù)，然后里面調(diào)用了 alert 彈框。接下來我們就去看看如何在前端中進行使用這個函數(shù)。

mod utils;
use wasm_bindgen::prelude::*;
// 當 `wee_alloc` 特性開啟的時候, 使用 `wee_alloc` 作為全局分配器
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet() {
    alert("Hello, wasm-lib!");
}

打包 wasm

在 package.json 文件中添加這一行代碼，然后我們就可以進行打包了。

項目根目錄中運行

npm run build:wasm

如果在 build 的過程卡住了，或者報錯了?？梢韵葧簳r把代碼優(yōu)化給關(guān)閉掉

在 wasm-lib 目錄下的 Cargo.toml 配置文件中關(guān)掉 wasm-opt

打包完成后就能看到項目根目錄中出現(xiàn)了一個 pkg 文件夾，這里面就是我們打包后的產(chǎn)物，前端可以進行調(diào)用我們用 Rust 編寫的函數(shù)。

前端調(diào)用

我們有兩種方式去調(diào)用 pkg 目錄下的 wasm 函數(shù)：

一種是將 pkg 作為一個 npm 包發(fā)布

cd wasm-lib
# 該命令可以把這個庫作為 npm 包發(fā)布到 npm 中，然后我們前端就正常的方式 npm install 就可以使用了
wasm-pack publish

另一種是先在本地進行引用，根目錄下安裝

npm install ./pkg

然后 package.json 的依賴中增加了我們的本地庫：

{
  "name": "react-wasm",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.2",
    "wasm-lib": "file:pkg", // ++++++++++++++++++++++++++++
    "web-vitals": "^2.1.4"
  },
  // ...
}

接下來就去我們的 App.tsx 中調(diào)用 greet 方法：

import React, { useEffect } from "react";
import init, { greet } from "wasm-lib";
import logo from "./logo.svg";
import "./App.css";
function App() {
  // +++++++++++++++++
  useEffect(() => {
    init().then(() => {
      greet();
    });
  }, []);
  return (
    <div className="App">
      ...
    </div>
  );
}
export default App;

然后開始運行我們的 react 應(yīng)用

npm run start

打開 localhost:3000 端口，可以看到我們調(diào)用 alert 方法成功咯~

使用 console.log

首先我們要安裝一下 web-sys 這個包，在 Cargo.toml 中加入

[dependencies]
wasm-bindgen = "0.2.63"
web-sys = { version = "0.3.57", features = ['console'] } # ++++++++

在這里我們開啟了 console 這個 feature， web-sys 還支持很多 feature，比如可以操作 DOM，調(diào)用前端原生 fetch API ， 操作 Canvas ， WebGL 等等等。

Rust：

mod utils;
use web_sys::console;
use wasm_bindgen::prelude::*;
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
pub fn test_log(val: JsValue) {
    console::log_2(&"從JS端接受到數(shù)據(jù)".into(), &val);
}

JS：

import React, { useEffect } from "react";
import init, { test_log } from "wasm-lib";
import logo from "./logo.svg";
import "./App.css";
function App() {
  useEffect(() => {
    init().then(() => {
      test_log({ a: 1, b: 2, c: 3 });
    });
  }, []);
  return (
    <div className="App">
      ...
    </div>
  );
}
export default App;

打印結(jié)果：

總結(jié)

像一些復(fù)雜的計算，我們可以使用 WebAssembly 來進行操作，比如上一篇。 WebAssembly 目前論開發(fā)效率來說個人感覺是不如原生 JS 的，稍微有點繁瑣，目前感覺它的應(yīng)用場景更多是在復(fù)雜性的計算領(lǐng)域，比如寫游戲、音視頻解析、加密解密、圖片解析等這種需要復(fù)雜計算的。這里只是提供一個基礎(chǔ)的小demo，讓大家對這個東西有一個感性的了解，更深入的東西就得后面用到的時候再去了解了。

最后這里放上 官方參考文檔

以上就是WebAssembly增強前端應(yīng)用技巧詳解的詳細內(nèi)容，更多關(guān)于WebAssembly增強前端應(yīng)用的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論