一种自定义组件的加载方法、装置、电子设备和存储介质与流程

1.本申请涉及浏览器技术领域，特别涉及一种自定义组件的加载方法、装置、电子设备和计算机可读存储介质。


背景技术：

2.随着业务差异化增多，采用动态表单可以解决重复开发及逻辑堆叠的问题。随着动态化表单系统运行过程中业务方接入的越来越多，一些功能特殊的自定义组件插件式加载(将组件作为系统的插件进行加载，自定义表单加载了该组件之后就能直接将该组件用在表单页面上)的需求开始出现并慢慢变得强烈。
3.相关技术中当在内置组件中加入新增组件时，表单系统需要重新执行开发组件并测试发布的过程，会产生以下问题：一是这部分自定义组件可能在某些页面并不需要，但是一旦内置了该组件，不管页面有没有用到，资源都会被加载，浪费系统资源，加载效率低；二是只要是修改了系统，就有可能引发系统的其他问题，影响系统的稳定性。


技术实现要素：

4.本申请的目的是提供一种自定义组件的加载方法，能够节省系统资源的占用，提高加载效率和表单系统的灵活性。其具体方案如下：
5.第一方面，本申请公开了一种自定义组件的加载方法，包括：
6.当接收到调用目标自定义组件的请求时，在当前页面创建script标签；
7.将所述目标自定义组件的静态资源所在链接写入所述script标签；
8.将写入所述链接的script标签插入当前页面，所述当前页面所在浏览器根据所述链接加载对应的静态资源，得到所述目标自定义组件。
9.可选的，在将所述目标自定义组件的静态资源所在链接写入所述script标签之前，还包括：
10.按照amd格式或umd格式，对所述目标自定义组件的代码模块进行打包，形成所述静态资源。
11.可选的，所述当前页面所在浏览器根据所述链接加载对应的静态资源，得到所述目标自定义组件，包括：
12.所述当前页面所在浏览器根据所述链接加载对应的静态资源；
13.当所述静态资源被执行时，利用define方法执行拦截所述静态资源被执行的操作，并将所述静态资源存储于指定位置，得到所述静态资源对应的目标自定义组件。
14.可选的，利用define方法执行拦截所述静态资源被执行的操作之后，还包括：
15.将所述目标自定义组件的依赖注入所述当前页面，以使当所述目标自定义组件被执行时，将所述依赖分配给所述目标自定义组件。
16.第二方面，本申请公开了一种自定义组件的加载装置，包括：
17.创建模块，用于当接收到调用目标自定义组件的请求时，在当前页面创建script
标签；
18.写入模块，用于将所述目标自定义组件的静态资源所在链接写入所述script标签；
19.加载模块，用于将写入所述链接的script标签插入当前页面，所述当前页面所在浏览器根据所述链接加载对应的静态资源，得到所述目标自定义组件。
20.可选的，还包括：
21.打包模块，用于按照amd格式或umd格式，对所述目标自定义组件的代码模块进行打包，形成所述静态资源。
22.可选的，所述加载模块，包括：
23.加载单元，用于所述当前页面所在浏览器根据所述链接加载对应的静态资源；
24.拦截单元，用于利用define方法执行拦截所述静态资源被执行的操作，并将所述静态资源存储于指定位置，以得到所述静态资源对应的目标自定义组件。
25.可选的，还包括：
26.注入模块，用于将所述目标自定义组件的依赖注入所述当前页面，以使当所述目标自定义组件被执行时，将所述依赖分配给所述目标自定义组件。
27.第三方面，本申请公开了一种电子设备，包括：
28.存储器，用于存储计算机程序；
29.处理器，用于执行所述计算机程序时实现如上述自定义组件的加载方法的步骤。
30.第四方面，本申请公开了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述自定义组件的加载方法的步骤。
31.本申请提供一种自定义组件的加载方法，包括：当接收到调用目标自定义组件的请求时，在当前页面创建script标签；将所述目标自定义组件的静态资源所在链接写入所述script标签；将写入所述链接的script标签插入当前页面，所述当前页面所在浏览器根据所述链接加载对应的静态资源，得到所述目标自定义组件。
32.可见，本申请当接收到调用目标自定义组件的请求时，通过创建script标签，将目标自定义组件的静态资源的链接写入script标签中，再把写入后的script标签插入当前页面，就会触发当前页面所在浏览器根据script标签中链接加载目标自定义组件的静态资源，也就得到目标自定义组件。即本申请只在需要调用目标自定义组件时，才加载获取目标自定义组件，节省了系统资源的占用，提高了加载效率，避免了相关技术中将目标自定义组件加入表单系统的内置组件中，导致无需该目标自定义组件也要加载到系统中，导致加载效率低，且占用系统内存的缺点，有效提高了表单系统的灵活性。本申请同时还提供了一种自定义组件的加载装置、一种电子设备和计算机可读存储介质，具有上述有益效果，在此不再赘述。
附图说明
33.为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据
提供的附图获得其他的附图。
34.图1为本申请实施例所提供的一种自定义组件的加载方法的流程图；
35.图2为本申请实施例所提供的一种具体的动态表单系统的示意图；
36.图3为本申请实施例所提供的加载器工作的流程示意图；
37.图4为本申请实施例提供的一种自定义组件的加载装置的结构示意图。
具体实施方式
38.为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
39.动态表单在使用过程中会有一些特殊组件的需求。这些特殊组件想要做成可以单独发布，注册即可使用就需要一套自定义组件的插件式加载方案。相关技术中采用webpack懒加载，也就是webpack的拆包按需加载功能，其主要使用import方法进行静态资源的异步加载，具体使用方法为，代码中采用如下方式引入需要被拆包的文件：
[0040][0041]
报错信息，这样webpack在打包时会将modulea单独拆分出来作为一个js文件，项目在执行到这段代码的时候才动态加载这部分js资源。但是如果直接使用import方法加载远程资源，webpack打包过程会直接报错，不满足需求。
[0042]
还有采用的是现有浏览器支持的dynamic import，其浏览器兼容性问题难以满足要求，ie浏览器完全不支持并且有同域名的限制。使用方法同webpack懒加载一样：
[0043]
import('http://static.cai
‑
inc.com/modulea.js').then((modulea)＝>{
[0044]
modulea.add(1,2)；//3
[0045]
})
[0046]
还有require.js amd规范，在该方法中，module a是动态插件，要使用动态插件则需要配置好插件的路径，然后使用require进行引用。这需要我们引用require.js到现有项目中，在项目的html中定义一个script标签并设置data
‑
main＝"scripts/main"作为入口文件。但是react项目也有一个入口，这会导致出现两个入口，两者用法并不能很好的并存，因此不能直接使用require.js方法。相关代码如下：
[0047][0048][0049]
基于上述技术问题，本实施例提供一种自定义组件的加载方法，节省了系统资源的占用，提高了加载效率，具体请参考图1，图1为本申请实施例所提供的一种自定义组件的加载方法的流程图，具体包括：
[0050]
s101、当接收到调用目标自定义组件的请求时，在当前页面创建script标签。
[0051]
可以理解的是，动态表单可通过拖拽配置的网页信息填写表单，由于表单随着配置变化而变化，所以称为动态表单。自定义组件是动态表单中未内置支持的表单组件，须通过新开发并注册进该系统中使用的一种组件。本实施例中将用户所需的自定义组件称为目标自定义组件。本实施例并不限定目标自定义组件的具体类型，可根据实际需求进行选择，例如，可以是“金额输入组件”。本实施例也不限定目标自定义组件的数量，可以是2个，可以是3个，可根据用户的实际需求进行设定。本实施例中当接收到调用目标自定义组件的请求时，在当前页面创建script标签，可以理解的是，script标签中既可包含脚本语句，也可以通过src属性指向外部脚本文件。本申请中利用script标签中的src属性指向目标自定义组件的静态资源所在链接。
[0052]
s102、将目标自定义组件的静态资源所在链接写入script标签。
[0053]
可以理解的是，本实施例中的静态资源即为目标自定义组件的资源文件，本实施例通过将目标自定义组件的静态资源所在链接写入script标签中，也就是利用script标签指向目标自定义组件的静态资源所在位置。在一种具体的实施例中，在将目标自定义组件的静态资源所在链接写入script标签之前，还可以包括：
[0054]
按照amd格式或umd格式，对目标自定义组件的代码模块进行打包，形成静态资源。
[0055]
即本实施例中目标自定义组件的具体格式，可以是amd格式或umd格式。其中，amd格式的模块打包是一种前端技术模块打包方式，可以按照约定方式对代码进行模块化打包，被打包后的代码会作为一个函数，并作为参数传入define方法中。umd格式的模块打包与amd格式原理类似，umd格式打包是一种兼容多种打包规范的打包方式。
[0056]
s103、将写入链接的script标签插入当前页面，当前页面所在浏览器根据链接加载对应的静态资源，得到目标自定义组件。
[0057]
本实施例中将写入链接的script标签插入当前页面后，就会触发当前页面所在浏览器根据链接加载对应的静态资源，得到目标自定义组件。本实施例中当根据链接加载静态资源到当前页面时，可以直接被执行或不执行存储于指定位置，以备后续使用。
[0058]
在一种具体的实施例中，当前页面所在浏览器根据链接加载对应的静态资源，得到目标自定义组件，可以包括：
[0059]
当前页面所在浏览器根据链接加载对应的静态资源；
[0060]
当静态资源被执行时，利用define方法执行拦截静态资源被执行的操作，并将静态资源存储于指定位置，得到静态资源对应的目标自定义组件。
[0061]
即本实施例中若当前页面所在浏览器根据链接加载静态资源后，利用define方法拦截静态资源被执行的过程，并将静态资源存储于指定位置，可以便于后续使用该目标自定义组件时，快速在指定位置获取该目标自定义组件进行使用。
[0062]
在一种具体的实施例中，为了减少开发人员重复复制依赖代码工作，利用define方法执行拦截静态资源被执行的操作之后，还可以包括：
[0063]
将目标自定义组件的依赖注入当前页面，以使当目标自定义组件被执行时，将依赖分配给目标自定义组件。
[0064]
可以理解的是，自定义的define方法的作用是将依赖模块注入自定义组件中。本实施例中在利用define方法执行拦截静态资源被执行的操作之后，将目标自定义组件的依赖注入当前页面，可以提高目标自定义组件渲染的效率，避免了目标自定义组件为多个时，在代码编辑过程中将依赖对象代码复制多次到对应的目标自定义组件，导致进行多次重复工作，降低了动态表单生成效率的缺点，以使目标自定义组件被执行时，将依赖直接分配给目标自定义组件，有效减少了重复复制粘贴工作。
[0065]
基于上述技术方案，本实施例当接收到调用目标自定义组件的请求时，通过创建script标签，将目标自定义组件的静态资源的链接写入script标签中，再把写入后的script标签插入当前页面，就会触发当前页面所在浏览器根据script标签中链接加载目标自定义组件的静态资源，也就得到目标自定义组件。即本申请只在需要调用目标自定义组件时，才加载获取目标自定义组件，节省了系统资源的占用，提高了加载效率。
[0066]
以下提供一种具体的实施例，利用amd格式的打包规范特性及自定义的define方法，结合静态资源加载方案解决了组件插件式加载、依赖注入并储存备用的问题。图2为一
种具体的动态表单系统的示意图，左侧中内部有很多的内置组件，比如：输入框，选择框，日期选择框等。动态表单可以任意组合这些组件从而形成一个表单页面。右侧包括加载器和自定义组件a。若要新增加一个内置组件没有的组件，比如“金额输入组件”，相关技术中直接将该组件添加至内置组件中，会引发不需要加载该组件时，也会加载到系统资源，导致浪费系统资源，以及影响系统稳定的问题。因此，本实施例中自定义组件的加载方法如下，图3为加载器工作的流程示意图。
[0067]
1、采用amd格式的模块打包方式来对目标自定义组件a进行模块打包；2、采用插入script标签的方式来引入目标自定义组件a对应的静态资源；
[0068]
3、利用amd格式的模块打包方案的特性，在window全局变量下定义define方法拦截加载进来的组件a被执行的过程，并储存到指定位置备用，步骤3和上述步骤2的代码如下；
[0069]
4、当系统渲染时，使用指定位置的目标自定义组件a。
[0070]
[0071][0072]
调用方式：
[0073][0074]
下面对本申请实施例提供的一种自定义组件的加载装置进行介绍，下文描述的自定义组件的加载装置与上文描述的自定义组件的加载方法可相互对应参照，相关模块均设置于中，参考图4，图4为本申请实施例所提供的一种自定义组件的加载装置的结构示意图，包括：
[0075]
在一些具体的实施例中，具体包括：
[0076]
创建模块401，用于当接收到调用目标自定义组件的请求时，在当前页面创建script标签；
[0077]
写入模块402，用于将目标自定义组件的静态资源所在链接写入script标签；
[0078]
加载模块403，用于将写入链接的script标签插入当前页面，当前页面所在浏览器根据链接加载对应的静态资源，得到目标自定义组件。
[0079]
在一些具体的实施例中，还包括：
[0080]
打包模块，用于按照amd格式或umd格式，对目标自定义组件的代码模块进行打包，形成静态资源。
[0081]
在一些具体的实施例中，加载模块403，包括：
[0082]
加载单元，用于当前页面所在浏览器根据链接加载对应的静态资源；
[0083]
拦截单元，用于利用define方法执行拦截静态资源被执行的操作，并将静态资源存储于指定位置，以得到静态资源对应的目标自定义组件。
[0084]
在一些具体的实施例中，还包括：
[0085]
注入模块，用于将目标自定义组件的依赖注入当前页面，以使当目标自定义组件被执行时，将依赖分配给目标自定义组件。
[0086]
由于自定义组件的加载装置部分的实施例与自定义组件的加载方法部分的实施例相互对应，因此自定义组件的加载装置部分的实施例请参见自定义组件的加载方法部分的实施例的描述，这里暂不赘述。
[0087]
下面对本申请实施例提供的一种电子设备进行介绍，下文描述的电子设备与上文描述的自定义组件的加载方法可相互对应参照。
[0088]
本申请还公开一种电子设备，包括：
[0089]
存储器，用于存储计算机程序；
[0090]
处理器，用于执行计算机程序时实现如上述自定义组件的加载方法的步骤。
[0091]
由于电子设备部分的实施例与自定义组件的加载方法部分的实施例相互对应，因此电子设备部分的实施例请参见自定义组件的加载方法部分的实施例的描述，这里暂不赘述。
[0092]
下面对本申请实施例提供的一种计算机可读存储介质进行介绍，下文描述的计算机可读存储介质与上文描述的自定义组件的加载方法可相互对应参照。
[0093]
本申请还公开一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现如上述自定义组件的加载方法的步骤。
[0094]
由于计算机可读存储介质部分的实施例与自定义组件的加载方法部分的实施例相互对应，因此计算机可读存储介质部分的实施例请参见自定义组件的加载方法部分的实施例的描述，这里暂不赘述。
[0095]
说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
[0096]
专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
[0097]
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执
行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd
‑
rom、或技术领域内所公知的任意其它形式的存储介质中。
[0098]
以上对本申请所提供的一种自定义组件的加载方法、装置、电子设备及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。