CN115658019A - 一种面向未来的前端mvvm框架的设计方法、装置及计算机 - Google Patents

Abstract

本发明公开了本申请所提供的一种面向未来的前端mvvm框架的设计方法、装置及计算机，属于计算机技术领域；通过获取获取待执行的树形结构计算数据；根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；将所述树形结构的计算数据的任务量与预设任务量进行比较；若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。本申请所提供的技术方案，将大任务量的框架代码在web worker线程执行，从而给主线程减压，从而主线程的UI任务可以及时响应，给用户带来更好的体验。

Description

一种面向未来的前端mvvm框架的设计方法、装置及计算机

技术领域

本发明涉及计算机技术领域，特别地，涉及一种面向未来的前端MVVM框架的设计方法、装置及计算机。

背景技术

目前前端MVVM框架有react，vue，angluar，通过数据驱动视图，使开发者精力集中在数据上，淡化了UI层面的复杂操作和变化。因为javascript是单线程的缘故，导致框架代码和业务代码全部运行在主线程，此外主线程还要响应用户点击，动画等任务，这就造成了主线程压力过大，可能出现页面卡顿等现象。

目前前端三大框架都是javascript驱动，但javascript在浏览器端只能在主线程执行。业务复杂度高的情况下，可能就造成页面卡顿，体验变差等问题。虽然react框架做了任务分片化，把一次大的任务分多次在浏览器空闲时执行，但这只是治标不治本的做法，主线程任务太多时，没有空闲时间时，更新任务就得不到执行，同样造成页面卡顿现象。

发明内容

为了克服现有技术的不足，解决主线程任务量大造成页面卡顿和交互体验差的问题，为实现以上目的，本申请采用如下技术方案：

第一方面，本发明提供一种面向未来的前端mvvm框架的设计方法，包括以下步骤：

获取待执行的树形结构计算数据；

根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；

根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；

将所述树形结构的计算数据的任务量与预设任务量进行比较；

若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。

进一步地，还包括：

若所述树形结构的计算数据的任务量不大于所述预设任务量，则将所述待执行的树形数据分配至主线程执行。

进一步地，在将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行之后，还包括：

在浏览器的web worker线程完成所述待执行的树形结构业务数据后，得到执行结果数据；

将所述执行结果数据发送至主线程，所述主线程进行页面渲染。

第二方面，本发明提供一种面向未来的前端mvvm框架的装置，包括：

获取模块，用于获取获取待执行的树形结构计算数据；

第一判断模块，用于根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；

第二判断模块，用于根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；

比较模块，用于将所述树形结构的计算数据的任务量与预设任务量进行比较；

第一任务分配模块，用于若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。

进一步地，还包括：第二任务分配模块，用于若所述树形结构的计算数据的任务量不大于所述预设任务量，则将所述待执行的树形数据分配至主线程执行。

第三方面，本发明提供一种计算机，包括：

处理器和存储器，所述存储器用于存储指令，所述指令用于控制所述处理器执行根据第一方面中任一项所述的方法。

有益效果：

本申请技术方案提供一种面向未来的前端mvvm框架的设计方法，通过获取获取待执行的树形结构计算数据；根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；将所述树形结构的计算数据的任务量与预设任务量进行比较；若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。本申请所提供的技术方案，将大任务量的框架代码在浏览器的webworker线程执行，从而给主线程减压，从而主线程的UI任务可以及时响应，给用户带来更好的体验。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的现有技术中MVVM框架设计流程图。

图2是本发明一个实施例提供的一种面向未来的前端mvvm框架的设计方法流程示意图。

图3是本发明另一个实施例提供的一种面向未来的前端mvvm框架的设计方法流程示意图。

图4是本发明另一个实施例提供的一种面向未来的前端mvvm框架的装置结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面结合附图和实施例对本发明的技术方案进行详细的描述说明。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本申请所保护的范围。

针对目前主流框架的设计，都是基于javascript驱动。同时，因为浏览器单线程的设计思路，javascript任务和用户与页面交互的任务都运行在主线程。这就造成了主线程运行压力过大，可能造成页面渲染卡顿的现象，给用户带来很差的体验。

请参阅图1，图1是本发明实施例提供的现有技术中主流光甲设计流程图。如图1所示，目前的前端框架设计都是基于虚拟dom来实现的，每次数据变化都会生成新的虚拟dom树，通过比较新旧dom树来更新真实的页面dom。这样的设计就造成了主线程javascript任务量巨大，dom比较的过程是递归进行的，占用大量的内存资源，给主线程带来了巨量的任务。这期间对于用户的操作和javascript动画都会起到阻塞作用，因为javascript运行在单线程内。只要当该线程空闲时才会响应用户操作。如果主线程长时间被占用，则会造成页面交互卡顿的现象。

请参阅图2，图2是本发明实施例提供了一种面向未来的前端mvvm框架的设计方法流程示意图，如图2所示，包括以下步骤：

步骤S201、获取待执行的树形结构计算数据；

树形结构是一层次的嵌套结构。一个树形结构的外层和内层有相似的结构，所以这种结构多可以递归的表示。经典数据结构中的各种树状图是一种典型的树形结构：一颗树可以简单的表示为根，左子树，右子树。左子树和右子树又有自己的子树。

步骤S202、根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；

步骤S203、根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；

具体地，在本领域中有很多用于判断树形业务数据的任务量的算法。本申请利用现有算法来判断待执行的树形结构业务数据的任务量，本申请未对现有算法进行改进。

步骤S204、将所述树形结构的计算数据的任务量与预设任务量进行比较；

步骤S205、若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。

当任务耗时较多时，会阻塞主线程，整体工作过程就是页面的交互会造成数据的变化，数据变化又作用于框架，框架内部做各种任务的计算和处理，这部分的任务较重，所以放在web worker进程中进行，等处理结果生成之后，再返给主线程，主线程做简单的更新操作。从而减小主线程的任务量。

请参阅图3，图3是本发明另一个实施例提供的一种面向未来的前端mvvm框架的设计方法流程示意图。本发明的设计思想是，mvvm框架本质就是将数据和UI逻辑分离，使开发者仅关注数据的变化，业务代码就是开发者编写的操作数据的代码，这些代码放在主线程执行，计算出依赖的数据，数据计算比较快，慢的是根据业务数据生成页面的过程，这个计算量就比较大，所以可以把这部分计算放在web worker线程，这个比较的过程就是框架的代码。

可以理解为，本申请所提供的一种面向未来的前端mvvm框架的设计方法，通过获取获取待执行的树形结构计算数据；根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；将所述树形结构的计算数据的任务量与预设任务量进行比较；若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。本申请所提供的技术方案，将大任务量的框架代码在webworker线程执行，从而给主线程减压，从而主线程的UI任务可以及时响应，给用户带来更好的体验。

在一个实施例中，还包括：

若所述树形结构的计算数据的任务量不大于所述预设任务量，则将所述待执行的树形数据分配至主线程执行。

一些实施例中，在将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行之后，还包括：

在浏览器的web worker线程完成所述待执行的树形结构业务数据后，得到执行结果数据；

将所述执行结果数据发送至主线程，所述主线程进行页面渲染。

将待执行的树形结构业务数据分配至浏览器的web worker线程来执行。在webworker线程执行完任务之后，再发给主线程进行渲染页面，将大部分任务分发给webworker线程来完成，主线程就用更多的时间来响应用户的操作和动画的渲染，从而解决主线程任务过多造成主线程卡顿的问题。

请参阅图4，图4是本申请一个实施例中一种面向未来的前端mvvm框架的装置，如图4所示，包括：

获取模块401，用于获取获取待执行的树形结构计算数据；

第一判断模块402，用于根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；

第二判断模块403，用于根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；

比较模块404，用于将所述树形结构的计算数据的任务量与预设任务量进行比较；

第一任务分配模块405，用于若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。

一些实施例中，还包括：第二任务分配模块，用于若所述树形结构的计算数据的任务量不大于所述预设任务量，则将所述待执行的树形数据分配至主线程执行。

本申请还提供一种计算机，包括：

处理器和存储器，所述存储器用于存储指令，所述指令用于控制所述处理器执行面向未来的前端mvvm框架的设计方法中任一项所述的方法。

可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。

需要说明的是，在本申请的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本申请的描述中，除非另有说明，“多个”的含义是指至少两个。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。

应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (6)

1.一种面向未来的前端mvvm框架的设计方法，其特征在于，包括以下步骤：

获取待执行的树形结构计算数据；

根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；

根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；

将所述树形结构的计算数据的任务量与预设任务量进行比较；

若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。

2.根据权利要求1所述的设计方法，其特征在于，还包括：

若所述树形结构的计算数据的任务量不大于所述预设任务量，则将所述待执行的树形数据分配至主线程执行。

3.根据权利要求1所述的设计方法，其特征在于，在将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行之后，还包括：

在浏览器的web worker线程完成所述待执行的树形结构业务数据后，得到执行结果数据；

将所述执行结果数据发送至主线程，所述主线程进行页面渲染。

4.一种面向未来的前端mvvm框架的装置，其特征在于，包括：

获取模块，用于获取获取待执行的树形结构计算数据；

第一判断模块，用于根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；

第二判断模块，用于根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；

比较模块，用于将所述树形结构的计算数据的任务量与预设任务量进行比较；

第一任务分配模块，用于若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。

5.根据权利要求4所述的装置，其特征在于，还包括：第二任务分配模块，用于若所述树形结构的计算数据的任务量不大于所述预设任务量，则将所述待执行的树形数据分配至主线程执行。

6.一种计算机，其特征在于，包括：

处理器和存储器，所述存储器用于存储指令，所述指令用于控制所述处理器执行根据权利要求1-3中任一项所述的方法。

Images