---

一、现实痛点：前端逻辑复用的边界

作为前端开发者，我们经常面临一个典型的场景：

同一个「核心逻辑」要在多个端运行：

• H5 页面；
• 微信 / 支付宝小程序；
• Electron 桌面；
• Node CLI 工具。

例如：表单验证模块、数据加密模块、数字签名模块。
逻辑复杂度高、需要安全性、还要在多个 JS 运行时复用。

---

二、Rust 的切入点：逻辑层的唯一真相源

Rust 具有独特优势：

• 编译到 WebAssembly（wasm），可在浏览器、Node、小程序 WebView 等运行；
• 类型系统与 TS 天然契合；
• 性能优异、可封装算法逻辑、安全不可篡改。

因此我们可以构建一个模式：

统一逻辑层 (Rust)
 ├── 校验算法 validate()
 ├── 加密算法 encrypt()
 ├── 解密算法 decrypt()
 └── 输出 wasm → npm 模块

---

三、项目结构设计

shared-core/
├─ src/
│  ├─ lib.rs
│  ├─ crypto.rs
│  └─ validator.rs
├─ Cargo.toml
└─ pkg/

Cargo.toml

[package]
name = "shared-core"
version = "0.1.0"
edition = "2021"
license = "MIT"
description = "Cross-platform logic core written in Rust"
repository = "https://github.com/yourname/shared-core"

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

[dependencies]
wasm-bindgen = "0.2"
regex = "1.10"
aes = "0.8"
block-modes = "0.9"
base64 = "0.22"

---

四、Rust 实现核心逻辑

validator.rs

use regex::Regex;

pub fn validate_email(email: &str) -> bool {
    Regex::new(r"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
        .unwrap()
        .is_match(email)
}

pub fn validate_password(pwd: &str) -> bool {
    let len_ok = pwd.len() >= 8;
    let has_num = Regex::new(r"\d").unwrap().is_match(pwd);
    let has_upper = Regex::new(r"[A-Z]").unwrap().is_match(pwd);
    len_ok && has_num && has_upper
}

crypto.rs

use aes::Aes128;
use block_modes::{BlockMode, Cbc};
use block_modes::block_padding::Pkcs7;
use base64::{encode, decode};

type Aes128Cbc = Cbc<Aes128, Pkcs7>;

pub fn encrypt(data: &str, key: &str, iv: &str) -> String {
    let cipher = Aes128Cbc::new_from_slices(key.as_bytes(), iv.as_bytes()).unwrap();
    let ciphertext = cipher.encrypt_vec(data.as_bytes());
    encode(ciphertext)
}

pub fn decrypt(ciphertext_b64: &str, key: &str, iv: &str) -> String {
    let cipher = Aes128Cbc::new_from_slices(key.as_bytes(), iv.as_bytes()).unwrap();
    let decoded = decode(ciphertext_b64).unwrap();
    let decrypted = cipher.decrypt_vec(&decoded).unwrap();
    String::from_utf8(decrypted).unwrap()
}

lib.rs

use wasm_bindgen::prelude::*;

mod crypto;
mod validator;

#[wasm_bindgen]
pub fn validate_email(email: &str) -> bool {
    validator::validate_email(email)
}

#[wasm_bindgen]
pub fn validate_password(pwd: &str) -> bool {
    validator::validate_password(pwd)
}

#[wasm_bindgen]
pub fn encrypt(data: &str, key: &str, iv: &str) -> String {
    crypto::encrypt(data, key, iv)
}

#[wasm_bindgen]
pub fn decrypt(data: &str, key: &str, iv: &str) -> String {
    crypto::decrypt(data, key, iv)
}

---

五、构建与导出

rustup target add wasm32-unknown-unknown
cargo install wasm-pack
wasm-pack build --target bundler

输出：

pkg/
├─ shared_core_bg.wasm
├─ shared_core.js
├─ shared_core.d.ts

---

六、前端使用（以 Vue / TS 为例）

import init, { validate_email, encrypt, decrypt } from "@yourorg/shared-core";

(async () => {
  await init();
  console.log(validate_email("test@aiple.cn"));

  const key = "1234567890123456";
  const iv = "abcdefghijklmnop";

  const enc = encrypt("Hello Rust!", key, iv);
  console.log("加密后:", enc);

  const dec = decrypt(enc, key, iv);
  console.log("解密后:", dec);
})();

---

七、小程序与 Electron

小程序 WebView:

<script type="module">
  import init, { validate_email } from "./pkg/shared_core.js";
  await init();
  console.log(validate_email("hello@wechat.com"));
</script>

Electron / Node:

import init, { validate_password } from "@yourorg/shared-core/node";

(async () => {
  await init();
  console.log(validate_password("Abc12345"));
})();

---

八、收益与安全性

对比项	JS 多端实现	Rust + WASM
实现一致性	容易偏差	单一逻辑源
性能	中	高
安全性	弱	强
维护成本	高	低
类型系统	TS-only	Rust → d.ts

Rust 模块的编译产物不可逆、跨平台复用、安全性强，适用于企业级前端组件逻辑抽象。

---

九、结语

Rust 让逻辑层拥有了“系统语言的稳定性”与“前端生态的开放性”。
无论你来自 Web、小程序还是桌面端，Rust 都能成为那个“唯一真相源（SSOT）”。

写一次逻辑，用于所有端。
让安全与性能，成为组件作者的默认能力。