一种页面的组件显示方法、装置、电子设备及存储介质制造方法及图纸

本申请实施例提供一种页面的组件显示方法、装置、电子设备及存储介质，其中，该方法包括：在所述页面中创建html元素的可显示区域；获取需要显示的组件的轮廓坐标；根据所述轮廓坐标在所述可显示区域生成待显示组件；提取所述待显示组件的变化属性；根据所述变化属性在所述页面中显示所述待显示组件。实施本申请实施例，可以有效缓解页面卡顿现象的发生，避免出现应用中多组件重叠的状况，提高页面的使用感，缩短页面的加载时间，提高组件的加载效率。提高组件的加载效率。提高组件的加载效率。

【技术实现步骤摘要】
一种页面的组件显示方法、装置、电子设备及存储介质


[0001]本申请涉及前端
，具体而言，涉及一种页面的组件显示方法、装置、电子设备及计算机可读存储介质。

技术介绍

[0002]前端页面应用一旦发展到一定规模，会出现一些问题，常见的例如多个不同层级叠加起来构成一个应用的场景。
[0003]这样的场景会存在一些问题，例如：两个不同层级的应用A，B(A通过定位浮在B上，A的层级比B高)，当B里面其中一个组件需要显示在主界面上，例如需要调用B里面的一个弹窗组件C，如果A在相同位置有元素，就会产生遮挡问题。因为B和C是一个整体(层级是一样的)，如果提升层级的话，需要提升B整一个的层级，就会把相同位置的A遮挡。这导致前端页面出现卡顿，应用中的功能无法展示，甚至使应用无法使用。

技术实现思路

[0004]本申请实施例的目的在于提供一种页面的组件显示方法、装置、电子设备及计算机可读存储介质，可以有效缓解页面卡顿现象的发生，避免出现应用中多组件重叠的状况，提高页面的使用感，缩短页面的加载时间，提高组件的加载效率。
[0005]第一方面，本申请实施例提供了一种页面的组件显示方法，所述方法包括：
[0006]在所述页面中创建html元素的可显示区域；
[0007]获取需要显示的组件的轮廓坐标；
[0008]根据所述轮廓坐标在所述可显示区域生成待显示组件；
[0009]提取所述待显示组件的变化属性；
[0010]根据所述变化属性在所述页面中显示所述待显示组件。<br/>[0011]在上述实现过程中，在可显示区域创建待显示组件，并实时根据变化属性在页面中对待显示组件进行显示，可以有效缓解页面卡顿现象的发生，避免出现应用中多组件重叠的状况，提高页面的使用感，缩短页面的加载时间，提高组件的加载效率。
[0012]进一步地，所述根据所述轮廓坐标在所述可显示区域生成待显示组件的步骤，包括：
[0013]根据所述轮廓坐标在所述可显示区域拼接不规则路径；
[0014]根据所述不规则路径生成所述待显示组件。
[0015]在上述实现过程中，根据不规则路径生成待显示组件，保证待显示组件的准确性和完整性，不易出现误差。
[0016]进一步地，所述提取所述待显示组件的变化属性的步骤，包括：
[0017]创建所述待显示组件的观察者实例；
[0018]根据所述观察者实例监视所述待显示组件中目标节点的变动，得到变化属性。
[0019]在上述实现过程中，创建观察者实例，并根据观察者实例监视目标节点的变动，可
以提高加载待显示组件的速度，避免卡顿，减少冗余，提高应用效率。
[0020]进一步地，所述创建所述待显示组件的观察者实例的步骤，包括：
[0021]获取所述待显示组件的dom对象和组件ID；
[0022]根据所述dom对象和组件ID构建回调函数；
[0023]根据所述回调函数创建所述观察者实例。
[0024]在上述实现过程中，根据待显示组件的dom对象和组件ID构建回调函数，再根据回调函数创建观察者实例，使得观察者实例可以更好地监视待显示组件，提高待显示组件的的加载速度。
[0025]第二方面，本申请实施例还提供了一种页面的组件显示装置，所述装置包括：
[0026]创建模块，用于在所述页面中创建html元素的可显示区域；
[0027]获取模块，用于获取需要显示的组件的轮廓坐标；
[0028]生成模块，用于根据所述轮廓坐标在所述可显示区域生成待显示组件；
[0029]提取模块，用于提取所述待显示组件的变化属性；
[0030]显示模块，用于根据所述变化属性在所述页面中显示所述待显示组件。
[0031]在上述实现过程中，在可显示区域创建待显示组件，并实时根据变化属性在页面中对待显示组件进行显示，可以有效缓解页面卡顿现象的发生，避免出现应用中多组件重叠的状况，提高页面的使用感，缩短页面的加载时间，提高组件的加载效率。
[0032]进一步地，所述生成模块还包括：
[0033]根据所述轮廓坐标在所述可显示区域拼接不规则路径；
[0034]根据所述不规则路径生成所述待显示组件。
[0035]在上述实现过程中，根据不规则路径生成待显示组件，保证待显示组件的准确性和完整性，不易出现误差。
[0036]进一步地，所述提取模块还用于：
[0037]创建所述待显示组件的观察者实例；
[0038]根据所述观察者实例监视所述待显示组件中目标节点的变动，得到变化属性。
[0039]在上述实现过程中，创建观察者实例，并根据观察者实例监视目标节点的变动，可以提高加载待显示组件的速度，避免卡顿，减少冗余，提高应用效率。
[0040]进一步地，所述提取模块还用于：
[0041]获取所述待显示组件的dom对象和组件ID；
[0042]根据所述dom对象和组件ID构建回调函数；
[0043]根据所述回调函数创建所述观察者实例。
[0044]在上述实现过程中，根据待显示组件的dom对象和组件ID构建回调函数，再根据回调函数创建观察者实例，使得观察者实例可以更好地监视待显示组件，提高待显示组件的的加载速度。
[0045]第三方面，本申请实施例提供的一种电子设备，包括：存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如第一方面任一项所述的方法的步骤。
[0046]第四方面，本申请实施例提供的一种计算机可读存储介质，所述存储介质上存储有指令，当所述指令在计算机上运行时，使得所述计算机执行如第一方面任一项所述的方
法。
[0047]第五方面，本申请实施例提供的一种计算机程序产品，所述计算机程序产品在计算机上运行时，使得计算机执行如第一方面任一项所述的方法。
[0048]本公开的其他特征和优点将在随后的说明书中阐述，或者，部分特征和优点可以从说明书推知或毫无疑义地确定，或者通过实施本公开的上述技术即可得知。
[0049]并可依照说明书的内容予以实施，以下以本申请的较佳实施例并配合附图详细说明如后。
附图说明
[0050]为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
[0051]图1为本申请实施例提供的页面的组件显示方法的流程示意图；
[0052]图2为本申请实施例提供的页面的组件显示装置的结构组成示意图；
[0053]图3为本申请实施例提供的电子设备的结构组成示意图。
具体实施方式
[0054]下面将结合本申请实施例中的附图，对本申请本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面的组件显示方法，其特征在于，所述方法包括：在所述页面中创建html元素的可显示区域；获取需要显示的组件的轮廓坐标；根据所述轮廓坐标在所述可显示区域生成待显示组件；提取所述待显示组件的变化属性；根据所述变化属性在所述页面中显示所述待显示组件。2.根据权利要求1所述的页面的组件显示方法，其特征在于，所述根据所述轮廓坐标在所述可显示区域生成待显示组件的步骤，包括：根据所述轮廓坐标在所述可显示区域拼接不规则路径；根据所述不规则路径生成所述待显示组件。3.根据权利要求1所述的页面的组件显示方法，其特征在于，所述提取所述待显示组件的变化属性的步骤，包括：创建所述待显示组件的观察者实例；根据所述观察者实例监视所述待显示组件中目标节点的变动，得到变化属性。4.根据权利要求3所述的页面的组件显示方法，其特征在于，所述创建所述待显示组件的观察者实例的步骤，包括：获取所述待显示组件的dom对象和组件ID；根据所述dom对象和组件ID构建回调函数；根据所述回调函数创建所述观察者实例。5.一种页面的组件显示装置，其特征在于，所述装置包括：创建模块，用于在所述页面中创建html元素的可显示区域；获取模块，用于获取需要显示的组件的轮廓坐标；生成模块...

【专利技术属性】
技术研发人员：刘玉丹，朱启成，
申请(专利权)人：广东三维家信息科技有限公司，
类型：发明
国别省市：