架构设计：如何设计一个兼容 React/Vue/jQuery 的通用表单填充 SDK？
摘要：企业级 SDK 开发难点解析。本文深入探讨 AutoForm SDK 的 Loader + Core 双层架构设计，以及如何解决多框架兼容性问题。
痛点分析
在做 AutoForm（智能表单填充工具）时，我们面临的挑战非常典型：
- 宿主环境复杂：客户的系统可能是 React 18，也可能是 Vue 2，甚至是 10 年前的 jQuery + iframe 嵌套。
- 性能要求苛刻：SDK 不能阻塞宿主页面的加载，体积必须极小。
- 功能复杂：需要集成 AI 对话、DOM 录制 (rrweb)、操作模拟等重型逻辑。
架构方案：Loader + Core 双层设计
为了平衡“功能强大”和“体积小巧”，我们采用了 微内核 + 动态加载 的架构。
1. Loader 层（极简入口）
- 体积：< 5KB (Gzip)
- 职责：
- 环境嗅探（判断当前 URL 是否有已录制的脚本）。
- 渲染 UI 占位符（悬浮球）。
- 配置初始化。
- 技术栈：原生 Web Component，无任何第三方依赖。
2. Core 层（全功能引擎）
- 体积：按需加载
- 职责：
- DOM 分析器：生成唯一的 CSS 选择器和 XPath。
- 操作模拟器：基于
@testing-library/user-event模拟真实用户行为。 - AI 客户端：与后端 LLM 进行流式对话。
- 加载时机：仅当用户点击悬浮球时，Loader 才会通过
import()动态拉取 Core 代码。
关键技术点：React/Vue 受控组件的“破局”
在 React 中，直接修改 input.value 是无效的，因为 React 的状态管理机制会忽略 DOM 的直接变更。
解决方案：
我们需要模拟完整的事件链，并“欺骗” React 认为这是用户输入的。
// 核心代码片段
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
function changeValue(input, value) {
// 1. 调用原生 setter，绕过 React 的拦截
nativeInputValueSetter.call(input, value);
// 2. 触发 input 事件，通知 React 更新状态
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);
}
通过这种方式，AutoForm 成功实现了对 React 受控组件的完美支持。
结语
开发通用 SDK 是一项极具挑战的工作，需要对浏览器底层原理和各大框架机制有深入理解。
AutoForm 通过双层架构和底层事件模拟，成功实现了“一次集成，到处运行”的目标。
👉 官网地址：51bpms.com
