[发明专利]一种表单依赖关系管理和表单精准渲染方法和系统

说明书

本发明公开了一种表单依赖关系管理和表单精准渲染方法和系统，以提高表单渲染性能和开发效率。所述方法包括一种表单依赖关系管理和表单精准渲染方法：通过响应式编程方法实现变量监听和依赖关系自动收集；通过路径匹配语法实现多节点依赖定义；通过声明式语法复用基础组件快速定义表单。该方法的特点在于：在数据模型层面解决了包含复杂依赖关系的表单的渲染性能问题，并且大幅简化了表单开发的接口定义方式，从而降低了表单在性能优化和功能复用方面的开发代价，提升了表单开发效率。

技术领域

本发明涉及一种表单依赖关系管理和表单精准渲染方法和系统，属于Web前端开发技术领域。

背景技术

网页表单(HTML Form，或 Web Form，以下简称表单)是由一类用于收集用户输入的控件组成的特殊组件，浏览器对表单组件的支持最早可追溯至1993年。时至今日，表单依然是用户与网页交互的重要入口，是 Web 前端开发生态中的重要一环。

前端开发的核心是浏览器提供的 DOM API，开发人员可以通过调用对应的 DOMAPI 来实现对页面元素的操纵。但是由于缺少模块化手段，DOM API面对大规模的表单项目是，开发效率受限。为了提升开发效率，当前在前端开发领域，基于框架进行模块化开发，已经成为了从业者的普遍共识，其中最早由Facebook(现已更名为 Meta) 公司发布并开源的React 框架是目前广泛应用的框架之一。

尽管应用 React 框架开发相较于直接使用 DOM API 已经大幅提升了开发效率，但是由于表单需要管理的变量规模日渐增长，变量间依赖关系日渐复杂，表单开发的难度也随之上升。开发人员往往需要投入大量的时间来实现这类复杂表单，还要花费额外的时间进行性能调优。

开源社区已经有相关工作贡献了一系列表单开发工具，例如：react-jsonchema-form、formik、react-final-form，这些工具通过提供各类变量管理的优化策略实现简化的开发接口，从而大幅提升了特定场景的表单开发效率。但是这些工具有些受限于其优化策略的缺陷对功能做出了妥协；而其他功能全面的工具在大规模表单场景下存在性能瓶颈，当变量规模增长到一定程度时会出现明显卡顿，影响交互。因此现有工具并不能有效地支持复杂表单。

发明内容

发明目的：为解决现有技术中存在的不足，改善表单渲染性能，提升表单开发效率，针对存在复杂变量间依赖关系的表单开发场景，提供一种表单依赖关系管理和表单精准渲染方法和系统，实现表单内变量间依赖关系的高效管理以及 UI 渲染性能的大幅提升。本方法以模型驱动开发思想为核心，应用响应式编程方法，实现变量间依赖关系的自动收集和回调注册(以下简称需要在变量变化时自动触发调用的函数为依赖函数)，并在此基础上结合路径系统实现多变量的依赖关系定义，最终对 React 框架进行适配，实现 UI 的精准渲染。

技术方案：一种表单依赖关系管理和表单精准渲染方法，通过响应式编程方法封装原始对象并拦截其访问接口以生成代理对象，在此基础上维护依赖函数调用栈实现对代理对象的变量监听和依赖关系自动收集，并对两类边界情况进行处理，包括结合待访问关键字集合对全属性依赖进行收集，以及使用设定关键字对内联型依赖关系进行收集，最终实现一对一依赖关系的管理，通过这一方法封装生成的代理对象称作响应式数据模型；在依赖关系自动收集机制的基础上，结合消息总线和路径匹配语法实现路径系统以支持多节点依赖关系的监听和回调方法触发，从而实现多对一依赖、一对多依赖的基本依赖关系模式；在基本依赖关系模式的基础上结合 React 框架封装响应式组件，拦截并重写 React渲染触发流程，实现数据模型内变量和基础组件的一对一绑定关系；最后，数据模型初始状态定义、依赖关系定义、基础组件定义共同组成表单定义，以生成页面 UI。

响应式数据模型路径系统和响应式组件，具体为：

响应式数据模型构建部分的步骤如下：