一种将过程式计算渲染转换成响应式计算渲染的方法与流程

本技术涉及it与软件开发中的前端开发，特别涉及一种将过程式计算渲染转换成响应式计算渲染的方法。

背景技术：

1、传统的前端渲染计算均是基于过程式的计算然后进行渲染，这个过程式的渲染流程主要是包含以下几步：第一，建立初始状态。第二，使用一个算法进行计算，修改初始状态得到中间结果。第三，使用中间结果进行二次算法计算或多次算法计算，得到最终的状态结果。第四，使用最终结果进行渲染。这种过程式的计算渲染，优势在于业务逻辑比较清晰，计算的流程符合算法的设计也能保留计算复杂度的优势。但是劣势是在于前端交互和渲染的过程中，每次状态更新都需要全量重新计算渲染。

2、传统的过程式计算在每次状态更新时都需要进行全量重新计算和渲染，这可能导致性能开销较大。由于全量重新计算的需要，传统方法可能导致交互响应速度较慢。在现代的用户体验中，用户期望能够获得更快的反馈，而全量计算可能无法满足这一需求。随着应用逻辑的复杂性增加，过程式计算的代码可能变得难以维护和理解。特别是当涉及多次状态变更和复杂的数据流时，代码可能变得冗长且难以调试。传统方法对于异步更新的支持可能较差，难以处理异步数据加载、延迟更新等场景，影响了应用的灵活性和性能。

3、而现代的前端交互过程是使用响应式的机制，将视图和状态进行绑定，状态变更可以由底层机制更新到视图。相较于过程式的计算，可以支持懒计算和更新。这意味着如果某个依赖的状态改变，则只需要重新计算依赖该状态的状态和渲染即可，无需全量计算和渲染。如此在前端交互过程中能够体现优势，交互响应更快。

技术实现思路

1、本技术旨在至少在一定程度上解决相关技术中的技术问题之一。为此，本技术的一个目的在于提出一种将过程式计算渲染转换成响应式计算渲染的方法，能够简单快捷地将传统过程式计算渲染转换成响应式计算，以交付最好的用户体验。

2、本技术的一个方面提供了一种将过程式计算渲染转换成响应式计算渲染的方法，包括：

3、步骤s1：利用javascript运行时收集d3源码中需要使用的状态，得到状态表数据；

4、所述javascript运行时负责执行javascript代码，劫持对d3源码中状态的访问，从而收集所需的状态；

5、所述状态包括但不限于：每个节点的坐标和节点的大小，以及每个连线的坐标和连线的大小；

6、所述状态的收集是利用javascript运行时劫持javascript代码的property读取来收集所需的状态；

7、步骤s2：得到状态表数据后，结合js词法分析器并使用js词法替换器将状态转换成对应的响应式状态；

8、所述js词法分析器用于通过分析d3源码，找到状态在d3源码中的所有应用，为状态转换提供依据；

9、所述js词法替换器用于负责将一种状态转换成另一种状态，根据js词法分析器分析得到的信息，将从d3源码中提取的状态转换成响应式状态；

10、所述js词法替换器将状态转换成响应式状态时，底层使用原生的proxy或者defineproperty进行劫持；

11、所述结合js词法分析器并使用js词法替换器将状态转换成对应的响应式状态是指将普通的变量转换成响应式的变量，从而可以被响应式系统所监听和管理；

12、步骤s3：使用js词法分析器获得状态在d3源码中的所有应用，生成一个状态和响应式状态的映射表，使用计算转化器将d3源码中的状态转化为响应式状态；

13、所述计算转化器用于将一种状态转换为另一种状态；

14、所述使用js词法分析器获得状态在d3源码中的所有应用，生成一个状态和响应式状态的映射表，使用计算转化器将d3源码中的状态转化为响应式状态是指：利用js词法分析器对d3源码进行分析，识别出其中使用的状态，包括但不限于变量、属性、函数地词法分析，针对d3源码中js词法分析器获得的状态，生成一个映射表用于将每个状态与对应的响应式状态建立关联，利用映射表遍历d3源码，使用计算转化器将d3源码中的每个状态替换为对应的响应式状态；

15、步骤s4：使用计算转化器将对响应式状态的获取改成计算属性，多重计算时使用递归生成计算属性，同时将事件的监听和使用转化为侦听器和状态方法；

16、所述使用计算转化器将对响应式状态的获取改成计算属性，多重计算时使用递归生成计算属性，同时将事件的监听和使用转化为侦听器和状态方法是指：将原有的业务逻辑中直接获取状态值的操作改为使用计算属性，使得状态发生变化时自动触发计算，相应的计算属性会自动重新计算；如果涉及到n个状态的计算，则出现多重计算的情况，利用计算转化器递归地生成计算属性；根据业务逻辑中事件的使用情况，将事件的监听转化为侦听器的机制，将事件的使用转化为状态方法的调用；

17、所述侦听器是指一种用于监听特定数据变化并执行相应操作的机制；

18、所述状态方法是一种用于修改或操作状态的函数；

19、步骤s5：使用响应裁剪器分析侦听器的调用栈，当两个侦听器的调用栈相同时，对其中一个侦听器进行去重复，或者为每个调用栈生成唯一识别码，比较唯一识别码完成冗余计算；

20、所述响应裁剪器用于通过分析调用栈，去除重复的响应式计算；

21、所述调用栈是指：跟踪代码执行流的一种数据结构，记录当前执行上下文的函数调用情况；

22、所述使用响应裁剪器分析侦听器的调用栈，当两个侦听器的调用栈相同时，对其中一个侦听器进行去重复，或者为每个调用栈生成唯一识别码，比较唯一识别码完成冗余计算是指：通过分析侦听器的调用栈，比较不同的侦听器执行时的调用栈是否相同，当两个侦听器的调用栈相同时，说明它们监听了同一个状态的变化，会导致重复计算，因此对其中一个侦听器进行去重复；或者在执行侦听器之前，比较之前已经执行过的侦听器的唯一识别码，若发现唯一识别码相同，则说明已经处理过相同的侦听器，则跳过执行，避免重复计算。

23、本技术的一个方面提供了一种将过程式计算渲染转换成响应式计算渲染的系统，包括：

24、状态收集模块，用于利用javascript运行时收集d3源码中需要使用的状态，得到状态表数据；

25、状态转换模块，用于得到状态表数据后，结合js词法分析器并使用js词法替换器将状态转换成对应的响应式状态；

26、状态劫持模块，用于使用js词法分析器获得状态在d3源码中的所有应用，生成一个状态和响应式状态的映射表，使用计算转化器将d3源码中的状态转化为响应式状态；

27、响应式转换模块，用于使用计算转化器将对响应式状态的获取改成计算属性，多重计算时使用递归生成计算属性，同时将事件的监听和使用转化为侦听器和状态方法；

28、去冗余裁剪模块，用于使用响应裁剪器分析侦听器的调用栈，当两个侦听器的调用栈相同时，对其中一个侦听器进行去重复，或者为每个调用栈生成唯一识别码，比较唯一识别码完成冗余计算。

29、本技术的一个方面提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，以实现一种将过程式计算渲染转换成响应式计算渲染的方法中的步骤。

30、本技术的一个方面提供了一种可读存储介质，所述可读存储介质存储有计算机程序，所述计算机程序适于处理器进行加载，以执行一种将过程式计算渲染转换成响应式计算渲染的方法中的步骤。

31、本技术提出的一种将过程式计算渲染转换成响应式计算渲染的方法相对于现有技术，具备以下优点：

32、本技术提出的方法相比于主流的更新渲染方式，能够对前端频繁交互和更高的响应要求给出最佳的处理。传统过程式计算依赖全量计算，而现代的响应式计算需要对前端技术原理理解比较深刻。本技术提供的方法能够简单快捷地将传统过程式计算渲染转换成响应式计算，以交付最好的用户体验。