表单引擎的留白：把规则、依赖和渲染分开-北京尧图网络

表单配置里最难维护的常常不是字段多而是一条规则同时承担了计算、网络请求和界面切换。后来换一套组件库连优惠计算也跟着重写。所谓“留白”在这里是给各层明确的责任规则说明数据怎样变化依赖图决定计算顺序视图负责让人操作。WebMCP的声明式API尝试把HTML表单描述成Agent可理解的工具。这仍是提案与试验中的能力。它让一个老问题变得更突出表单的业务意义如果全藏在组件内部人和Agent都只能猜。从三行金额计算开始假设商品总价和优惠金额都是已经确认的整数分值。总价变化先计算优惠再计算应付。界面输入不能直接改应付金额应付也不应偷偷发起下一次请求。图中A→B→C表示一条无环计算依赖。底部回路是“用户修改状态后重新计算”的应用流程与计算图中的循环依赖是两回事。import assert from node:assert/strict; function calculate(input) { for (const key of [subtotal, discount]) { if (!Number.isSafeInteger(input[key]) || input[key] 0) throw new TypeError(amount must be non-negative integer cents); } const appliedDiscount Math.min(input.discount, input.subtotal); return Object.freeze({ subtotal: input.subtotal, appliedDiscount, payable: input.subtotal - appliedDiscount }); } function present(result) { return { payableText: (result.payable / 100).toFixed(2), warning: result.appliedDiscount 100 ? 优惠未达到示例额度 : }; } const state { subtotal: 12345, discount: 100 }; const result calculate(state); assert.equal(present(result).payableText, 122.45); assert.deepEqual(state, { subtotal: 12345, discount: 100 }); assert.equal(calculate({ subtotal: 50, discount: 100 }).payable, 0); assert.throws(() calculate({ subtotal: NaN, discount: 0 }), TypeError); console.log(headless form rule checks passed);规则函数不读DOM也不依赖当前语言展示函数把金额变成字符串。这个拆分不代表规则天然能够“100%跨端共享”税制、舍入方式、时区、权限和服务端定价仍可能让两端职责不同。前端计算只辅助预览最终金额应由交易后端确认。把扩展点放在变化真正发生的地方组件库差异放到渲染适配器异步联动交给带取消和版本判断的控制层业务规则保留输入输出契约。需要表达式时使用明确的领域语言及允许的操作不能用一个eval换取表面上的灵活。10月16日的WebMCP命令式API文档还描述了工具的生命周期与取消。这里可以借用同一个工程习惯作用域结束时解除注册任务取消时停止无用工作。这个原则有用但是否支持某个浏览器API仍需特性检测。本例在Node v26.3.0验证了金额边界、输入不变性和展示输出未运行组件库、浏览器表单或交易后端。它只是能单独检查的一小块规则并不是一套已经上线的表单平台。

表单引擎的留白：把规则、依赖和渲染分开

相关推荐

1024程序员节寄语：给代码留一份能复查的说明

工笔层染给生成式UI的启发：内容未齐，交互先别着急

text-to-cad 实战：从自然语言到 STEP/STL 模型全流程

更多资讯

Python AI五子棋实战：Minimax与Alpha-Beta剪枝实现解析

YOLO版本选型实战指南：从v1到v10的工程适配逻辑

AI行业动态追踪方法论：从日更简报中提炼技术选型与趋势判断

欧拉公式：数学之美与应用解析

基于YOLOv6与PaddleOCR的银行卡号识别系统开发

原神抽卡模拟器开发指南：概率模型、代码实现与验证

今日更新

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？