CN114579160A - 前端组件在线更新方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及计算机领域，公开了一种前端组件在线更新方法、装置、设备及存储介质，该方法包括：获取在线更新工具、预配置文件以及初始框架项目，根据在线更新工具、预配置文件以及初始框架项目搭建支持在线更新的目标框架项目，预配置文件包括在线更新组件的地址以及在线更新文件的地址，在线更新文件用于更新在线更新组件；根据在线更新组件的地址获取目标框架项目中对应的在线更新组件，并根据在线更新文件的地址获取对应的在线更新文件；获取在线更新组件的组件名称，根据组件名称从在线更新文件中定位更新内容，根据更新内容对在线更新组件进行在线更新。通过上述方式，本发明能够提高更新效率，缩小测试范围，减轻开发人员的工作量。

Description

前端组件在线更新方法、装置、设备及存储介质

技术领域

本发明涉及计算机领域，特别是涉及一种前端组件在线更新方法、装置、设备及存储介质。

背景技术

目前前端领域内，主要流行vue和react两种框架，这两种框架都是采用组件化的思想进行页面逻辑的开发。组件化开发带来的好处非常多，比如可以实现小范围功能抽取复用、实现业务逻辑与通用功能的区隔，使得项目代码得以更好的管理和维护。但是通过框架实现的组件化开发，是需要按照框架规定的语法规范下进行开发才可以实现，开发完成后，还需要通过框架提供的脚手架构建工具，进行构建编译成原生的js代码，才可以真正的在浏览器中运行起来，并且编译出来的代码，相当于原生js编写的代码，是混淆的且经过了哈希值的编译，无法直接读懂和随意修改部分代码直接发布上线。这就造成了代码无法在线小范围进行更新操作。小范围的更新指的是：在项目的所有文件中，只修改几个文件，并直接发布这几个修改的文件，不会涉及到整个项目的重新打包构建，以减少修改代码带来的影响范围以及测试需要测试的部分。但是当使用了框架开发以后，即便是更改一个页面文字，都需要重新将整体代码重新打包构建，由于构建代码过程中，有可能会受到构建环境如node版本的影响、以及有些未涉及改动的文件也可能会改变文件名后缀的hash值，所以涉及到所有页面资源要重新发布。这不仅增加了发布的风险范围、测试覆盖的内容，还导致了用户发布前打开过页面的缓存失效(浏览器会自动缓存页面上请求的图片、css、js等资源，但是如果页面文件修改，缓存就会失效，用户需重新拉取所有资源，加载页面速度会变慢，流量消耗也会增加)。目前业内对于使用框架并进行小范围发布这个问题，并没有很好的解决方案。

发明内容

本发明提供一种前端组件在线更新方法、装置、设备及存储介质，能够提高更新效率，缩小测试范围，减轻开发人员的工作量。

为解决上述技术问题，本发明采用的一个技术方案是：提供一种前端组件在线更新方法，包括：

获取在线更新工具、预配置文件以及初始框架项目，根据所述在线更新工具、所述预配置文件以及所述初始框架项目搭建支持在线更新的目标框架项目，所述预配置文件包括在线更新组件的地址以及在线更新文件的地址，所述在线更新文件用于更新所述在线更新组件；

根据所述在线更新组件的地址获取所述目标框架项目中对应的所述在线更新组件，并根据所述在线更新文件的地址获取对应的所述在线更新文件；

获取所述在线更新组件的组件名称，根据所述组件名称从所述在线更新文件中定位更新内容，根据所述更新内容对所述在线更新组件进行在线更新。

根据本发明的一个实施例，所述获取在线更新工具、预配置文件以及初始框架项目，根据所述在线更新工具、所述预配置文件以及所述初始框架项目搭建支持在线更新的目标框架项目包括：

将所述在线更新工具添加到所述初始框架项目中，获得集成有在线更新功能的中间框架项目；

将所述预配置文件集成于所述中间框架项目中，搭建具有组件在线更新功能的目标框架项目，所述目标框架项目包括支持在线更新的所述在线更新组件。

根据本发明的一个实施例，所述根据所述在线更新组件的地址获取所述目标框架项目中对应的所述在线更新组件，并根据所述在线更新文件的地址获取对应的所述在线更新文件包括：

根据所述在线更新组件的地址生成获取组件请求，发送所述获取组件请求并获取对应的所述在线更新组件；

根据所述在线更新文件的地址生成获取文件请求，发送所述获取文件请求并获取对应的所述在线更新文件。

根据本发明的一个实施例，所述根据所述在线更新文件的地址生成获取文件请求，发送所述获取文件请求并获取对应的所述在线更新文件还包括：

在生成所述获取文件请求之后以及发送所述获取文件请求之前，检测本地是否缓存有与所述获取文件请求对应的所述在线更新文件；

若本地缓存有所述在线更新文件，则记录当前时间并获取所述在线更新文件缓存至本地的缓存时间，根据所述当前时间与所述缓存时间判断是否发送所述获取文件请求。

根据本发明的一个实施例，所述根据所述当前时间与所述缓存时间判断是否发送所述获取文件请求还包括：

计算所述当前时间与所述缓存时间的差值；

将所述差值与预设缓存等待时间进行对比；

若所述差值大于所述预设缓存时间，则发起所述获取文件请求；

若所述差值不大于所述预设缓存时间，则调用与所述获取文件请求对应的所述在线更新文件，并停止发起所述获取文件请求。

根据本发明的一个实施例，所述检测本地是否缓存有与所述获取文件请求对应的所述在线更新文件之后，还包括：

若本地未缓存有所述在线更新文件，则发送所述获取文件请求，并获取对应的所述在线更新文件，将所述在线更新文件缓存至本地并记录缓存时间。

根据本发明的一个实施例，所述获取所述在线更新组件的组件名称，根据所述组件名称从所述在线更新文件中定位更新内容，根据所述更新内容对所述在线更新组件进行在线更新包括：

获取组件名称，根据所述组件名称确定更新类型；

若所述更新类型为页面模块，根据所述组件名称从所述预配置文件中获取更新位置标签，根据所述标签获取ID标识，根据ID标识从所述在线更新文件中匹配对应的配置内容，根据所述配置内容对所述在线更新组件进行在线更新；

若所述更新类型为逻辑模块，根据所述组件名称从所述预配置文件中获取逻辑方法，根据所述逻辑方法从所述在线更新文件中匹配对应的更新内容，根据更新内容对所述在线更新组件进行在线更新。

为解决上述技术问题，本发明采用的另一个技术方案是：提供一种前端组件在线更新装置，包括：

搭建模块，用于获取在线更新工具、预配置文件以及初始框架项目，根据所述在线更新工具、所述预配置文件以及所述初始框架项目搭建支持在线更新的目标框架项目，所述预配置文件包括在线更新组件的地址以及在线更新文件的地址，所述在线更新文件用于更新所述在线更新组件；

获取模块，用于根据所述在线更新组件的地址获取所述目标框架项目中对应的所述在线更新组件，并根据所述在线更新文件的地址获取对应的所述在线更新文件；

更新模块，用于获取所述在线更新组件的组件名称，根据所述组件名称从所述在线更新文件中定位更新内容，根据所述更新内容对所述在线更新组件进行在线更新。

为解决上述技术问题，本发明采用的再一个技术方案是：提供一种计算机设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述的前端组件在线更新方法。

为解决上述技术问题，本发明采用的再一个技术方案是：提供一种计算机存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述前端组件在线更新方法。

本发明的有益效果是：通过搭建支持在线配置化更新的框架项目，实现项目代码的在线更新操作，在获取到在线更新组件和在线更新文件之后，根据组件名称从在线更新文件中定位更新内容，根据更新内容对在线更新组件进行在线更新。更新内容无需重新打包发布，发布内容不受构建环境影响，提高了更新效率，缩小了测试范围，减轻了开发人员的工作量。

附图说明

图1是本发明一实施例的前端组件在线更新方法的流程示意图；

图2是本发明一实施例的前端组件在线更新方法中步骤S1的流程示意图；

图3是本发明一实施例的前端组件在线更新方法中步骤S2的流程示意图；

图4是本发明一实施例的前端组件在线更新方法中步骤S302的流程示意图；

图5是本发明一实施例的前端组件在线更新方法中步骤S3的流程示意图；

图6是本发明实施例的前端组件在线更新装置的结构示意图；

图7是本发明实施例的计算机设备的结构示意图；

图8是本发明实施例的计算机存储介质的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明中的术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”、“第三”的特征可以明示或者隐含地包括至少一个该特征。本发明的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。本发明实施例中所有方向性指示(诸如上、下、左、右、前、后……)仅用于解释在某一特定姿态(如附图所示)下各部件之间的相对位置关系、运动情况等，如果该特定姿态发生改变时，则该方向性指示也相应地随之改变。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本发明的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

图1是本发明一实施例的前端组件在线更新方法的流程示意图。需注意的是，若有实质上相同的结果，本发明的方法并不以图1所示的流程顺序为限。如图1所示，该方法包括步骤：

步骤S101：获取在线更新工具、预配置文件以及初始框架项目，根据在线更新工具、预配置文件以及初始框架项目搭建支持在线更新的目标框架项目，预配置文件包括在线更新组件的地址以及在线更新文件的地址。

在步骤S101中，本实施例的在线更新工具可以为文件包，集成有支持在线更新的功能。初始框架项目可以包括一个或若干个前端组件，例如vue组件。但这些前端组件不支持在线更新，目标框架项目可以包括一个或若干个前端组件，且目标框架项目中的前端组件与初始框架项目的前端组件一一对应，不同的是，目标框架项目中的前端组件支持在线更新。本实施例的在线更新文件用于更新在线更新组件，在线更新文件中包含有在线更新组件的更新内容。本实施例通过搭建支持在线更新的目标框架项目，当需要紧急发布部分修改内容时，可以实现只修改在线配置文件的方式，就能够实现项目代码的在线更新操作，更新内容不需要重新打包发布，不再受到构建环境的影响发布内容。

在一种可实现的实施例中，请参见图2，步骤S1还包括：

步骤S201：将在线更新工具添加到初始框架项目中，获得集成有在线更新功能的中间框架项目。

本实施例在命令行定位初始框架项目的根目录之后，获取用户输入的获取在线更新工具的指令并执行指令，实现将在线更新工具添加到初始框架项目中，使初始框架项目具有在线更新的功能，形成中间框架项目。

步骤S202：将预配置文件集成于中间框架项目中，搭建具有组件在线更新功能的目标框架项目，目标框架项目包括支持在线更新的在线更新组件。

本实施例中，初始框架项目和中间框架项目均为原码开发，需要编译成能够运行的代码才能实现在线更新功能。将预配置文件集成于中间框架项目中可以理解为将中间框架项目和预配置文件进行打包，将预配置文件的内容赋予中间框架项目，使中间框架项目的前端组件支持在线更新，形成目标框架项目。一种实施例中，可以在命令行定位中间框架项目的根目录(即初始框架项目的根目录)，获取用户输入的构建指令并执行指令，实现搭建具有前端组件在线更新功能的目标框架项目。

初始框架项目、中间框架项目以及目标框架项目三者的区别在于：初始框架项目可以包括前端组件，但初始框架项目中的前端组件不具备在线更新功能。中间框架项目虽具备了在线更新功能，但并不明确哪些前端组件需要在线更新以及在线更新的具体内容；目标框架项目具备了指定前端组件的在线更新功能，并明确了在线更新的具体内容。

本实施例的预配置文件的内容包括需要在线配置化更新的在线更新组件的地址、在线更新文件的地址、在线更新文件的内容以及在线更新文件的预设缓存等待时间。

进一步地，在线更新文件的内容包括：

(1)每一个前端组件在线更新的开关。开关用于控制更新时间以及自动更新功能。当开关打开时，开启对应前端组件的在线更新功能，当开关关闭时，关闭对应前端组件的在线更新功能。一实施例中，需要在线更新时打开开关，请求在线更新文件，进行自动在线更新；如果请求的在线更新文件有损毁或文件过大，则关闭开关，不进行自动在线更新。请求的在线更新文件在损毁或文件过大的情况下，加载变慢，影响页面显示效果，通过开关能够实现精准控制自动更新。

(2)每一个前端组件在线更新所包含的页面模块内容，页面模块内容用于更新前端组件中的页面展示。页面模块内容可以包括前端组件的组件名称、更新位置标签、ID标识以及相关的更新内容。

(3)每一个前端组件在线更新所包含的逻辑模块内容，逻辑模块内容用于更新前端组件中的逻辑方法。逻辑模块内容可以包括组件名称、方法名和方法体。

步骤S102：根据在线更新组件的地址获取目标框架项目中对应的在线更新组件，并根据在线更新文件的地址获取对应的在线更新文件。

在步骤S102中，预配置文件记载有需要在线配置化更新的在线更新组件的地址、在线更新文件的地址、在线更新文件的内容以及在线更新文件的预设缓存等待时间。根据在线更新组件的地址能够确定需要在线配置化更新的前端组件，根据在线更新文件的地址能够确定在线更新文件的位置，并获取到对应的在线更新文件的内容。

在一种可实现的实施例中，请参见图3，步骤S2还包括：

步骤S301：根据在线更新组件的地址生成获取组件请求，发送获取组件请求并获取对应的在线更新组件。

本实施例获取组件请求的地址从预配置文件中获取，以前端组件为vue组件为例，需要在线配置化更新的vue组件带有“.vue”的标识，将预配置文件中所有带有“.vue”的标识的vue组件地址组成集合，vue组件地址可以以列表的形式存储，在获取vue组件时，通过遍历集合中的vue组件地址，获得每一个vue组件地址，并通过nodejs提供的fs模块方法，读取到对应的vue组件。

步骤S302：根据在线更新文件的地址生成获取文件请求，发送获取文件请求并获取对应的在线更新文件。

本实施例的在线更新文件包括所有前端组件所有可能更新的内容，因此，在线更新文件的内容比较大，请求时间比较长。在一种实施例中，在首次获取到新的在线更新文件时，可以将在线更新文件缓存在本地并记录缓存时间，在下一次请求相同的线更新文件时，直接从本地调用，无需从新获取，节约下载时间，提高请求处理效率。本实施例获取文件请求的在线更新文件的地址从预配置文件中获取。

在一种可实现的实施例中，请参见图4，步骤S302还包括：

步骤S401：在生成获取文件请求之后以及发送获取文件请求之前，检测本地是否缓存有与获取文件请求对应的在线更新文件。

步骤S402：若本地缓存有在线更新文件，则记录当前时间并获取在线更新文件缓存至本地的缓存时间，根据当前时间与缓存时间判断是否发送获取文件请求。

本实施例计算当前时间与缓存时间的差值；将差值与预设缓存等待时间进行对比；若差值大于预设缓存时间，则发起获取文件请求；若差值不大于预设缓存时间，则调用与获取文件请求对应的在线更新文件，并停止发起获取文件请求。

步骤S403：若本地未缓存有在线更新文件，则发送获取文件请求，并获取对应的在线更新文件，将在线更新文件缓存至本地并记录缓存时间。

本实施例的在线更新的文件采用了设置缓存的方式，可以避免相同的大型文件的重复请求，最大程度上保证了在线更新过程中不会影响对应页面的加载和执行性能，既做到了灵活更新，又保证了用户体验。

步骤S103：获取在线更新组件的组件名称，根据组件名称从在线更新文件中定位更新内容，根据更新内容对在线更新组件进行在线更新。

在步骤S103中，在线更新方式包括但不限于替换和新增等方式，可以对一个或多个前端组件进行更新，在同一个前端组件中可以进行全部内容或部分内容更新，因此，在线更新之前需要定位更新位置。在一种可实现的实施例中，前端组件包括页面模块和逻辑模块，可以对页面模块和/或逻辑模块的内容进行更新。在页面模块的更新中通过ID标识进行定位，在逻辑模块的更新中，通过方法名和方法体进行定位。在另一种可实现的实施例中，根据在线更新组件的组件名称从在线更新文件中匹配对应的更新内容，根据更新内容对在线更新组件进行在线更新。

在一种可实现的实施例中，请参见图5，步骤S3还包括：

步骤S501：获取组件名称，根据组件名称确定更新类型。

步骤S502：若更新类型为页面模块，根据组件名称从预配置文件中获取更新位置标签，根据标签获取ID标识，根据ID标识从在线更新文件中匹配对应的配置内容，根据配置内容对在线更新组件进行在线更新。

本实施例根据组件名称从在线更新文件中匹配到与组件名称对应的配置内容，然后在匹配的配置内容中找到与页面模块相关的在线更新内容。在线更新内容包括ID标识和对应的在线更新内容，以及是否更新标签内所有内容的标识。在内容匹配过程中，将在线更新文件中与在线更新组件具有相同的ID标识对应的在配置内容作为在线更新内容。

例如，假设当前组件名称为A.vue，标签名称为div1_p1，标签内容为“更新内容XXX”，若仅需要替换div1_p1标签的内容时，并则在线更新文件中配置内容如下：

(1)配置内容：A.vue:div1_p1:“更新内容XXX”；

(2)是否更新标签内所有内容：否。

则“更新内容XXX”，只会替换掉内容1，不会替换<span>子内容1</span><span>子内容2</span>。

又例如：假设当前组件名称为B.vue，标签名称为div1_p1，标签内容为“更新内容XXX”，如果不仅需要替换div1_p1标签的内容，还需要替换div1_p1标签包含的所有内容时，则在线更新文件中配置内容如下：

(1)配置内容：B.vue:div1_p1:“更新内容XXX”；

(2)是否更新标签内所有内容：是。

则“更新内容XXX”，会替换掉内容1，同时也会替换<span>子内容1</span><span>子内容2</span>。

进一步地，根据组件名称从预配置文件中获取更新位置标签，根据标签获取ID标识之前还包括：获取当前在线更新组件中的所有标签并按标签名称对标签进行层级分类，获得同层级标签，标签包括标签名称和标签内容；按照序号依次叠加的方式对同层级标签进行标号，根据标签名称和标号对同层级的每个标签设置ID标识；将ID标识与对应的标签进行关联映射并存储于预配置文件中。

标签名称例如div，ul，span等，一个在线更新组件中可以包括一个或多个div、ul或span，将具有相同标签名称的标签作为同层级标签。假设一个在线更新组件中包括三个div，则将这三个div认为是同层级标签。又例如，<div><p>内容1<span>子内容1</span><span>子内容2</span></p></div>,则为4个标签添加的ID标识分别为div1、div1_p1、div1_p1_span1、div1_p1_span2。

本实施例的在线更新工具能够智能的给各组件内模块添加唯一标识，不需要人工添加标识，或者通过人工方式编写选择器这种繁琐的方式查找到对应更新的标签，节省了开发者在线更新设置过程中的工作量，从而提高了工作效率。

步骤S503：若更新类型为逻辑模块，根据组件名称从预配置文件中获取逻辑方法，根据逻辑方法从在线更新文件中匹配对应的更新内容，根据更新内容对在线更新组件进行在线更新。

本实施例的逻辑方法通过方法名与方法体一一对应的方式编写而成，因此，逻辑模块的在线更新无需与页面模块的在线更新一样，通过ID标识匹配更新内容，只需在线更新文件的配置内容按照方法名与方法体一一对应的方式进行编写，如方法1:function(){方法1逻辑内容}，然后在在线更新组件进行替换或者新增即可。

本实施例根据组件名称从预配置文件中获取对应的逻辑方法，由于逻辑方法可能为一个或多个，因此，需要遍历所有逻辑方法，进行替换或新增的操作。

在一实施例中，以逻辑方法替换为例，根据组件名称从预配置文件中获取逻辑方法，然后在在线更新组件中查找是否包含相同的方法名，如果有，则说明逻辑方法为更新当前组件的逻辑方法的内容，从在线更新组件查找到对应的逻辑方法，使用在线更新文件中对应的逻辑方法进行替换即可。

在一实施例中，以逻辑方法新增为例，根据组件名称从预配置文件中获取逻辑方法，然后在在线更新组件查找是否包含相同的方法名，如果没有，则说明逻辑方法为新增逻辑方法。针对该在线更新组件对应的html中，生成一个script标签，该标签内容为该更新的逻辑方法，通过声明全局方法的方式，如function方法名{更新逻辑方法内容}，进行新增逻辑方法的申明，以保证组件在执行时可以正常访问到。

本发明实施例的前端组件在线更新方法通过搭建支持在线配置化更新的框架项目，实现项目代码的在线更新操作，更新内容无需重新打包发布，发布内容不受构建环境影响，提高了更新效率，缩小了测试范围，减轻了开发人员的工作量。

图6是本发明实施例的前端组件在线更新装置的结构示意图。如图6所示，该装置60包括获搭建模块61、获取模块62和更新模块63。

搭建模块61用于获取在线更新工具、预配置文件以及初始框架项目，根据在线更新工具、预配置文件以及初始框架项目搭建支持在线更新的目标框架项目，预配置文件包括在线更新组件的地址以及在线更新文件的地址，在线更新文件用于更新在线更新组件；

获取模块62用于根据在线更新组件的地址获取目标框架项目中对应的在线更新组件，并根据在线更新文件的地址获取对应的在线更新文件；

更新模块63用于获取在线更新组件的组件名称，根据组件名称从在线更新文件中定位更新内容，根据更新内容对在线更新组件进行在线更新。

请参阅图7，图7为本发明实施例的计算机设备的结构示意图。如图7所示，该计算机设备70包括处理器71及和处理器71耦接的存储器72。

存储器72存储有用于实现上述任一实施例所述的前端组件在线更新方法的程序指令。

处理器71用于执行存储器72存储的程序指令以在线更新前端组件。

其中，处理器71还可以称为CPU(Central Processing Unit，中央处理单元)。处理器71可能是一种集成电路芯片，具有信号的处理能力。处理器71还可以是通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

参阅图8，图8为本发明实施例的计算机存储介质的结构示意图。本发明实施例的计算机存储介质存储有能够实现上述所有方法的程序文件81，其中，该程序文件81可以以软件产品的形式存储在上述计算机存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施方式所述方法的全部或部分步骤。而前述的计算机存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、磁碟或者光盘等各种可以存储程序代码的介质，或者是计算机、服务器、手机、平板等终端设备。

在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上仅为本发明的实施方式，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种前端组件在线更新方法，其特征在于，包括：

获取在线更新工具、预配置文件以及初始框架项目，根据所述在线更新工具、所述预配置文件以及所述初始框架项目搭建支持在线更新的目标框架项目，所述预配置文件包括在线更新组件的地址以及在线更新文件的地址，所述在线更新文件用于更新所述在线更新组件；

根据所述在线更新组件的地址获取所述目标框架项目中对应的所述在线更新组件，并根据所述在线更新文件的地址获取对应的所述在线更新文件；

获取所述在线更新组件的组件名称，根据所述组件名称从所述在线更新文件中定位更新内容，根据所述更新内容对所述在线更新组件进行在线更新。

2.根据权利要求1所述的前端组件在线更新方法，其特征在于，所述获取在线更新工具、预配置文件以及初始框架项目，根据所述在线更新工具、所述预配置文件以及所述初始框架项目搭建支持在线更新的目标框架项目包括：

将所述在线更新工具添加到所述初始框架项目中，获得集成有在线更新功能的中间框架项目；

将所述预配置文件集成于所述中间框架项目中，搭建具有组件在线更新功能的目标框架项目，所述目标框架项目包括支持在线更新的所述在线更新组件。

3.根据权利要求1所述的前端组件在线更新方法，其特征在于，所述根据所述在线更新组件的地址获取所述目标框架项目中对应的所述在线更新组件，并根据所述在线更新文件的地址获取对应的所述在线更新文件包括：

根据所述在线更新组件的地址生成获取组件请求，发送所述获取组件请求并获取对应的所述在线更新组件；

根据所述在线更新文件的地址生成获取文件请求，发送所述获取文件请求并获取对应的所述在线更新文件。

4.根据权利要求3所述的前端组件在线更新方法，其特征在于，所述根据所述在线更新文件的地址生成获取文件请求，发送所述获取文件请求并获取对应的所述在线更新文件还包括：

在生成所述获取文件请求之后以及发送所述获取文件请求之前，检测本地是否缓存有与所述获取文件请求对应的所述在线更新文件；

若本地缓存有所述在线更新文件，则记录当前时间并获取所述在线更新文件缓存至本地的缓存时间，根据所述当前时间与所述缓存时间判断是否发送所述获取文件请求。

5.根据权利要求4所述的前端组件在线更新方法，其特征在于，所述根据所述当前时间与所述缓存时间判断是否发送所述获取文件请求还包括：

计算所述当前时间与所述缓存时间的差值；

将所述差值与预设缓存等待时间进行对比；

若所述差值大于所述预设缓存时间，则发起所述获取文件请求；

若所述差值不大于所述预设缓存时间，则调用与所述获取文件请求对应的所述在线更新文件，并停止发起所述获取文件请求。

6.根据权利要求4所述的前端组件在线更新方法，其特征在于，所述检测本地是否缓存有与所述获取文件请求对应的所述在线更新文件之后，还包括：

若本地未缓存有所述在线更新文件，则发送所述获取文件请求，并获取对应的所述在线更新文件，将所述在线更新文件缓存至本地并记录缓存时间。

7.根据权利要求1所述的前端组件在线更新方法，其特征在于，所述获取所述在线更新组件的组件名称，根据所述组件名称从所述在线更新文件中定位更新内容，根据所述更新内容对所述在线更新组件进行在线更新包括：

获取组件名称，根据所述组件名称确定更新类型；

若所述更新类型为页面模块，根据所述组件名称从所述预配置文件中获取更新位置标签，根据所述标签获取ID标识，根据ID标识从所述在线更新文件中匹配对应的配置内容，根据所述配置内容对所述在线更新组件进行在线更新；

若所述更新类型为逻辑模块，根据所述组件名称从所述预配置文件中获取逻辑方法，根据所述逻辑方法从所述在线更新文件中匹配对应的更新内容，根据更新内容对所述在线更新组件进行在线更新。

8.一种前端组件在线更新装置，其特征在于，包括：

搭建模块，用于获取在线更新工具、预配置文件以及初始框架项目，根据所述在线更新工具、所述预配置文件以及所述初始框架项目搭建支持在线更新的目标框架项目，所述预配置文件包括在线更新组件的地址以及在线更新文件的地址，所述在线更新文件用于更新所述在线更新组件；

获取模块，用于根据所述在线更新组件的地址获取所述目标框架项目中对应的所述在线更新组件，并根据所述在线更新文件的地址获取对应的所述在线更新文件；

更新模块，用于获取所述在线更新组件的组件名称，根据所述组件名称从所述在线更新文件中定位更新内容，根据所述更新内容对所述在线更新组件进行在线更新。

9.一种计算机设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1-7任一项所述的前端组件在线更新方法。

10.一种计算机存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述的前端组件在线更新方法。

Images