[JavaScript知识库] Rust + Wasm 实现浏览器格式化 JSON

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Rust + Wasm 实现浏览器格式化 JSON -> 正文阅读

[JavaScript知识库]Rust + Wasm 实现浏览器格式化 JSON

效果链接 https://tothis.github.io/format/

源码 & 更多 Rust 使用合集 https://github.com/tothis/rust-record

用到的库

wasm-bindgen
serde_json
anyhow

用到的工具

cargo install wasm-pack

Cargo.toml

[package]
name = "wasm-bindgen-record"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
anyhow = "1.0"
wasm-bindgen = "0.2"
serde_json = "1.0"

src/lib.rs

use anyhow::Result;
use serde_json::{from_str, to_string_pretty, Value};
use wasm_bindgen::prelude::{JsValue, wasm_bindgen};

#[wasm_bindgen]
extern {
    fn alert(s: &str);

    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

#[wasm_bindgen]
pub fn format(s: &str) -> JsValue {
    JsValue::from(pretty(s).unwrap())
}

fn pretty(s: &str) -> Result<String> {
    Ok(to_string_pretty(&from_str::<Value>(s)?)?)
}

#[wasm_bindgen(start)]
pub fn start() {
    log("Wasm");
}

#[test]
fn test() -> Result<()> {
    assert_eq!(pretty(r#"{"key":"value"}"#)?, r#"{
  "key": "value"
}"#);
    Ok(())
}

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html, body {
            height: 100%;
        }

        textarea {
            width: 100%;
            height: 50%;
        }

        button {
            width: 20%;
            height: 10%;
            font-size: 2rem;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
<textarea>{"key":"value"}</textarea>
<button>format</button>
<script>
    const button = document.querySelector('button')
    const textarea = document.querySelector('textarea')
    import('./pkg/wasm_bindgen_record.js').then(async wasm => {
        await wasm.default()
        button.onclick = () => textarea.value = wasm.format(textarea.value)
    })
</script>
</body>
</html>