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

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

【技术实现步骤摘要】
一种面向未来的前端mvvm框架的设计方法、装置及计算机


[0001]本专利技术涉及计算机
，特别地，涉及一种面向未来的前端MVVM框架的设计方法、装置及计算机。

技术介绍

[0002]目前前端MVVM框架有react，vue，angluar，通过数据驱动视图，使开发者精力集中在数据上，淡化了UI层面的复杂操作和变化。因为javascript是单线程的缘故，导致框架代码和业务代码全部运行在主线程，此外主线程还要响应用户点击，动画等任务，这就造成了主线程压力过大，可能出现页面卡顿等现象。
[0003]目前前端三大框架都是javascript驱动，但javascript在浏览器端只能在主线程执行。业务复杂度高的情况下，可能就造成页面卡顿，体验变差等问题。虽然react框架做了任务分片化，把一次大的任务分多次在浏览器空闲时执行，但这只是治标不治本的做法，主线程任务太多时，没有空闲时间时，更新任务就得不到执行，同样造成页面卡顿现象。

技术实现思路

[0004]为了克服现有技术的不足，解决主线程任务量大造成页面卡顿和交互体验差的问题，为实现以上目的，本申请采用如下技术方案：
[0005]第一方面，本专利技术提供一种面向未来的前端mvvm框架的设计方法，包括以下步骤：
[0006]获取待执行的树形结构计算数据；
[0007]根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；
[0008]根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；
[0009]将所述树形结构的计算数据的任务量与预设任务量进行比较；
[0010]若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。
[0011]进一步地，还包括：
[0012]若所述树形结构的计算数据的任务量不大于所述预设任务量，则将所述待执行的树形数据分配至主线程执行。
[0013]进一步地，在将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行之后，还包括：
[0014]在浏览器的web worker线程完成所述待执行的树形结构业务数据后，得到执行结果数据；
[0015]将所述执行结果数据发送至主线程，所述主线程进行页面渲染。
[0016]第二方面，本专利技术提供一种面向未来的前端mvvm框架的装置，包括：
[0017]获取模块，用于获取获取待执行的树形结构计算数据；
[0018]第一判断模块，用于根据所述树形结构的计算数据判断所述树形结构的计算数据
的深度；
[0019]第二判断模块，用于根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；
[0020]比较模块，用于将所述树形结构的计算数据的任务量与预设任务量进行比较；
[0021]第一任务分配模块，用于若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。
[0022]进一步地，还包括：第二任务分配模块，用于若所述树形结构的计算数据的任务量不大于所述预设任务量，则将所述待执行的树形数据分配至主线程执行。
[0023]第三方面，本专利技术提供一种计算机，包括：
[0024]处理器和存储器，所述存储器用于存储指令，所述指令用于控制所述处理器执行根据第一方面中任一项所述的方法。
[0025]有益效果：
[0026]本申请技术方案提供一种面向未来的前端mvvm框架的设计方法，通过获取获取待执行的树形结构计算数据；根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；将所述树形结构的计算数据的任务量与预设任务量进行比较；若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。本申请所提供的技术方案，将大任务量的框架代码在浏览器的web worker线程执行，从而给主线程减压，从而主线程的UI任务可以及时响应，给用户带来更好的体验。
附图说明
[0027]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0028]图1是本专利技术实施例提供的现有技术中MVVM框架设计流程图。
[0029]图2是本专利技术一个实施例提供的一种面向未来的前端mvvm框架的设计方法流程示意图。
[0030]图3是本专利技术另一个实施例提供的一种面向未来的前端mvvm框架的设计方法流程示意图。
[0031]图4是本专利技术另一个实施例提供的一种面向未来的前端mvvm框架的装置结构示意图。
具体实施方式
[0032]为使本申请的目的、技术方案和优点更加清楚，下面结合附图和实施例对本专利技术的技术方案进行详细的描述说明。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本申请所保护的范围。
[0033]针对目前主流框架的设计，都是基于javascript驱动。同时，因为浏览器单线程的设计思路，javascript任务和用户与页面交互的任务都运行在主线程。这就造成了主线程运行压力过大，可能造成页面渲染卡顿的现象，给用户带来很差的体验。
[0034]请参阅图1，图1是本专利技术实施例提供的现有技术中主流光甲设计流程图。如图1所示，目前的前端框架设计都是基于虚拟dom来实现的，每次数据变化都会生成新的虚拟dom树，通过比较新旧dom树来更新真实的页面dom。这样的设计就造成了主线程javascript任务量巨大，dom比较的过程是递归进行的，占用大量的内存资源，给主线程带来了巨量的任务。这期间对于用户的操作和javascript动画都会起到阻塞作用，因为javascript运行在单线程内。只要当该线程空闲时才会响应用户操作。如果主线程长时间被占用，则会造成页面交互卡顿的现象。
[0035]请参阅图2，图2是本专利技术实施例提供了一种面向未来的前端mvvm框架的设计方法流程示意图，如图2所示，包括以下步骤：
[0036]步骤S201、获取待执行的树形结构计算数据；
[0037]树形结构是一层次的嵌套结构。一个树形结构的外层和内层有相似的结构，所以这种结构多可以递归的表示。经典数据结构中的各种树状图是一种典型的树形结构：一颗树可以简单的表示为根，左子树，右子树。左子树和右子树又有自己的子树。
[0038]步骤S202、根据所述树形结构的计算数据本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种面向未来的前端mvvm框架的设计方法，其特征在于，包括以下步骤：获取待执行的树形结构计算数据；根据所述树形结构的计算数据判断所述树形结构的计算数据的深度；根据所述树形结构的计算数据的深度，判断所述待执行的树形结构业务数据的任务量；将所述树形结构的计算数据的任务量与预设任务量进行比较；若所述树形结构的计算数据的任务量大于所述预设任务量，则将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行。2.根据权利要求1所述的设计方法，其特征在于，还包括：若所述树形结构的计算数据的任务量不大于所述预设任务量，则将所述待执行的树形数据分配至主线程执行。3.根据权利要求1所述的设计方法，其特征在于，在将所述待执行的树形结构业务数据分配至浏览器的web worker线程执行之后，还包括：在浏览器的web worker线程完成所述待执行的树形结构业务数据后，得到执行结果数据；将所述执行结果数据发送至主线程，所述主线程进行页面渲染。...

【专利技术属性】
技术研发人员：闫亚龙，
申请(专利权)人：上海中通吉网络技术有限公司，
类型：发明
国别省市：