Label switching method and device, equipment, storage medium and product

Abstract

The invention provides a label switching method and device, equipment, a storage medium and a product, and belongs to the technical field of computers. The method comprises the following steps: in response to any label triggering operation in a Web application, obtaining a label identifier of a target label; whether the label identification of the target label exists or not is matched in a label list, and the label identification of any opened label is stored in the label list; when the label identification of the target label exists in the label list, updating a key of a content area component of a key-alive component to be the label identification of the target label, the key-alive component being used for caching a content area of a tab corresponding to any label; and according to the key of the content region component of the key-alive component, displaying the cached content region of the tab corresponding to the target tag in the target region. The invention aims to provide an efficient content area switching mode in a label switching process.

Description

Technical Field

[0001] The embodiments of the present application relate to the technical field of computers, and in particular, to a label switching method, device, equipment, storage medium and product. Background Art

[0002] With the vigorous development of computer technology and network technology, a large number of Web applications have begun to emerge, and responsive Web application development frameworks have emerged.

[0003] The core of the responsive Web development framework is to establish a virtual webpage DOM structure, use data hijacking and comparison algorithms to update the virtual DOM nodes, and finally render the virtual nodes at one time. Applying these Web development frameworks to develop Web applications will greatly improve development efficiency and optimize the development experience, but for some special scenarios, the framework still cannot meet the actual application needs.

[0004] The tab bar is associated with the content display area of ​​the current tab. When switching different tabs, the content area will display different content. The content of open tabs needs to be cached, and the content of closed tabs needs to be cleared and re-rendered when opened again. However, the related technology adopts the method of rendering long content areas and using CSS styles to display or hide the content areas. This solution is similar to the horizontal scrolling effect. The content areas of all open tabs are horizontally spliced. After clicking the tab, the horizontal scrolling distance is set according to the position, and the content area corresponding to the current tab is displayed in the visible area. However, the disadvantage of this method is that its essence is to render all content areas at the same time, visually control the display and invisibility, and also render the display area. When the number of open tabs is large, the resource consumption will increase significantly. Summary of the invention

[0005] The embodiments of the present application provide a tag switching method, apparatus, device, storage medium and product, aiming to provide an efficient content area switching method during the tag switching process.

[0006] In a first aspect, an embodiment of the present application provides a label switching method, the method comprising: In response to any tag triggering operation in the Web application, obtaining a tag identifier of a target tag; Matching whether there is a tag identifier of the target tag in a tag list, wherein the tag identifier of any opened tag is stored in the tag list; When the tag identifier of the target tag exists in the tag list, the key of the content area component of the keep-alive component is updated to the tag identifier of the target tag, wherein the keep-alive component is used to cache the content area of ​​the tab corresponding to any tag; According to the key of the content area component of the keep-alive component, the content area of ​​the tab corresponding to the target tag that has been cached is displayed in the target area.

[0007] Optionally, after matching whether there is a tag identifier of the target tag in the tag list, the method further includes: When the tag identifier of the target tag does not exist in the tag list, randomly generating a new tag identifier corresponding to the target tag according to the tag identifier of the target tag, and adding the new tag identifier corresponding to the target tag to the tag list; The content area of ​​the tab corresponding to the target tag is re-rendered and displayed in the target area, and the new tag identifier corresponding to the target tag is used as the key of the content area component of the keep-alive component, so as to cache the content area of ​​the tab corresponding to the target tag after rendering through the keep-alive component.

[0008] Optionally, randomly generating a new tag identifier corresponding to the target tag according to the tag identifier of the target tag includes: The tag identifier of the target tag is concatenated with a random number to generate a new tag identifier corresponding to the target tag.

[0009] Optionally, the method further comprises: In response to a tab closing operation corresponding to any tag in the Web application, close the tab corresponding to the tag and obtain a tag identifier corresponding to the tag; Delete the tag identifier corresponding to the tag in the tag list.

[0010] Optionally, matching whether a tag identifier of the target tag exists in the tag list includes: Call the tab click event processing function handleTabChange; Through the tab click event processing function handleTabChange, according to the tag identifier of the target tag, it is matched whether the tag identifier of the target tag exists in the tag list.

[0011] Optionally, the method further comprises: Initialize the tag identifier of the tag list that does not contain any tag; Or, in response to the initialization operation, a tag identifier of at least one tag is added to the tag list, wherein a content area of ​​a tab corresponding to any tag in the initialized tag list is displayed in the page of the initialized Web application.

[0012] In a second aspect, an embodiment of the present application provides a label switching device, the device comprising: An acquisition module, used for acquiring a tag identifier of a target tag in response to any tag triggering operation in a Web application; A matching module, used for matching whether there is a tag identifier of the target tag in a tag list, wherein the tag identifier of any opened tag is stored in the tag list; An update module, configured to update the key of the content area component of the keep-alive component to the tag identifier of the target tag when the tag identifier of the target tag exists in the tag list, wherein the keep-alive component is used to cache the content area of ​​the tab corresponding to any tag; The display module is used to display the content area of ​​the tab corresponding to the target tag that has been cached in the target area according to the key of the content area component of the keep-alive component.

[0013] In a third aspect, an embodiment of the present application provides a computer device, comprising: at least one processor, and a memory, wherein the memory stores a computer program that can be run on the processor, wherein when the processor executes the computer program, the label switching method described in the first aspect of the embodiment is performed.

[0014] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the label switching method described in the first aspect of the embodiment is implemented.

[0015] In a fifth aspect, an embodiment of the present application provides a computer program product, including a computer program / instruction, which, when executed by a processor, implements the label switching method described in the first aspect of the embodiment.

[0016] Beneficial effects: In response to any tag triggering operation in a Web application, a tag identifier of a target tag is obtained; a tag list is matched to see whether there is a tag identifier of the target tag, wherein the tag list stores the tag identifier of any opened tag; when the tag identifier of the target tag exists in the tag list, a key of a content area component of a keep-alive component is updated to the tag identifier of the target tag, wherein the keep-alive component is used to cache a content area of ​​a tab corresponding to any tag; and according to the key of the content area component of the keep-alive component, the content area of ​​the tab corresponding to the target tag that has been cached is displayed in a target area.

[0017] In the method, based on the component caching mechanism keep-alive component provided by the Web application framework, the content area of ​​the tab corresponding to any tag is cached, and a tag list is set to store the tag identifier of any opened tag; when responding to any tag triggering operation in the Web application, if the tag identifier of the target tag is matched in the tag list, it indicates that the target tag has been opened, that is, the content area of ​​the tab corresponding to the target tag has been cached in the keep-alive component, and it is only necessary to switch the content area of ​​the tab, and the key of the content area component of the keep-alive component is updated to the tag identifier of the target tag, so that the content area of ​​the tab corresponding to the cached target tag can be displayed in the target area; the method does not need to perform a large amount of invalid caching, and only needs to cache the content area of ​​the tab corresponding to the opened tag, and the switching of the content area of ​​the tab corresponding to the tag is more efficient. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the description of the embodiments of the present application will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0019] Figure 1 It is an application scenario diagram of tag management; Figure 2 is a flowchart of the steps of the tag switching method proposed in one embodiment of the present application; Figure 3 is a flowchart of the steps of a tag switching method provided by an embodiment of the present application; Figure 4 is a flow chart of a tag switching method proposed in an embodiment of the present application; Figure 5 It is a functional module diagram of a label switching device proposed in one embodiment of the present application; Figure 6 is a schematic diagram of a computer device provided by an embodiment of the present application; Figure 7 is a schematic diagram of a computer-readable storage medium proposed in an embodiment of the present application; Figure 8 It is a schematic diagram of a computer program product proposed in one embodiment of the present application. DETAILED DESCRIPTION

[0020] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0021] Web development framework: Web application frameworks help reduce the workload of common activities when developing web pages. For example, many frameworks provide database access interfaces, standard templates, and session management, which can improve the reusability of code.

[0022] DOM: Document Object Model is a standard programming interface for processing extensible markup languages.

[0023] keep-alive: A component built into the web framework that allows the included components to retain their state or avoid re-rendering, also known as component caching.

[0024] Comparison algorithm: After the virtual DOM tree changes, a DOM tree update patch is generated. The change difference between the new and old virtual DOM trees is compared, and the update patch is applied to the real DOM to complete the view update with the minimum cost.

[0025] With the vigorous development of computer technology and network technology, a large number of Web applications have begun to emerge, and responsive Web application development frameworks have emerged.

[0026] The core of the responsive Web development framework is to establish a virtual web page DOM structure, use data hijacking and comparison algorithms to update the virtual DOM nodes, and finally render the virtual nodes in one go. Applying the Web development framework to develop Web applications will greatly improve development efficiency and optimize the development experience. However, for some special scenarios, the framework still cannot meet the actual application needs.

[0027] Reference Figure 1 , shows an application scenario diagram of tag management, the tag bar of the Web application includes multiple tags, such as tag 1, tag 2 and tag 3, each tag is associated with the content display area of ​​the corresponding tab, such as tag 1 is associated with the content display area of ​​tab 1, tag 2 is associated with the content display area of ​​tab 2, and tag 3 is associated with the content display area of ​​tab 3. When switching tags, the content display area of ​​the corresponding tab will be displayed. The content display area of ​​the tab corresponding to the tag that is not closed before switching needs to be cached, and the content display area of ​​the tab corresponding to the closed tab needs to be cleared. If the content display area of ​​the tab corresponding to the closed tab is opened again, the content display area needs to be re-rendered.

[0028] The following two methods are mainly used in related technologies: Method 1: Render the long content area and use CSS style to show or hide the content display area. This solution is similar to the horizontal scrolling effect, and horizontally splices the content display areas of the tabs corresponding to all open tabs; when the tab is clicked, the horizontal scrolling distance is set according to the position, and the content area of ​​the tab corresponding to the current tab is displayed in the visible area; however, the disadvantage of this method is that its essence is to render the content display areas of all tabs at the same time, but only visually control the visibility of the content display area. When a large number of tabs are opened, the consumption of resources will increase significantly, which will be more obvious when the content area rendering is complex.

[0029] Method 2: It is a completely independent implementation, that is, caching the content display area of ​​the tab corresponding to the opened tab, and displaying the corresponding content display area when switching tabs. Although this method can avoid the problem of large-scale rendering of the content display area in the first solution, the implementation process is complicated and does not utilize the underlying mechanism of the existing responsive framework. It cannot be uniformly managed by the framework and is difficult to maintain.

[0030] Therefore, this embodiment provides a method for switching tags based on the underlying capabilities provided by the current Web development framework.

[0031] Reference Figure 2 , shows a flowchart of a tag switching method in an embodiment of the present application, and the method may specifically include the following steps: S101: In response to any tag triggering operation in a Web application, a tag identifier of a target tag is obtained.

[0032] A web application usually includes multiple tags. By clicking or triggering a tag, a tab corresponding to the tag is displayed in the web application. The tab has a corresponding content area.

[0033] For example, the label may be a login label. After clicking the login label, a page tab corresponding to the login label will pop up or be displayed in the Web application. The content area in the page tab may include options, input boxes, and other controls.

[0034] Each tag corresponds to a unique identifier as a tag identifier, that is, a tag ID. When a user triggers an operation on any tag in a Web application, the tag identifier of the target tag is obtained.

[0035] S102: Check whether there is a tag identifier of the target tag in a tag list, wherein the tag identifier of any opened tag is stored in the tag list.

[0036] Specifically, the tag list is an array, such as the tabList array, and any element in the array is a tag identifier corresponding to a tag. In the actual implementation process, any element in the array can include, in addition to the tag identifier, descriptive information of the tab corresponding to the tag, such as the name of the tab and other information; or the identifier of the tab corresponding to the tag can also be used in any element in the data, and there is a correspondence between the label and the corresponding tab, and one label corresponds to one tab one by one, so the label identifier and the corresponding tab identifier can be set to the same identifier, that is, both use the label identifier.

[0037] In a feasible implementation manner, the tag list may be initialized to not include a tag identifier of any tag, that is, after the Web application is initially opened, no tab corresponding to any tag is displayed in the Web application.

[0038] In another feasible implementation, in response to the initialization operation, a tag identifier of at least one tag can be added to the tag list, and the content area of ​​the tab corresponding to any tag in the initialized tag list is displayed in the page of the initialized Web application; for example, the tag list includes tag 1 and tag 3, then in the page of the initialized Web application, the content area of ​​the tab corresponding to tag 1 and the content area of ​​the tab corresponding to tag 3 will be displayed by default.

[0039] In the actual implementation process, in the process of matching whether there is a tag identifier of the target tag in the tag list, a tag click event processing function handleTabChange can be set. When responding to any tag trigger operation in the Web application and obtaining the tag identifier of the target tag, the tag click event processing function handleTabChange can be called.

[0040] Through the tab click event processing function handleTabChange, according to the tag identifier of the target tag, it is matched whether the tag identifier of the target tag exists in the tag list.

[0041] S103: When the tag identifier of the target tag exists in the tag list, the key of the content area component of the keep-alive component is updated to the tag identifier of the target tag, wherein the keep-alive component is used to cache the content area of ​​the tab corresponding to any tag; The keep-alive component is a component caching mechanism provided by the Web application framework. It is implemented in popular frameworks such as React and Vue. The keep-alive component can cache component content through the key attribute of its child components, and the child components will be re-rendered only when the key changes.

[0042] In the actual implementation process, the keep-alive component provided by the Web application framework can be used to wrap the content area of ​​the tab corresponding to the tag, so that the cache requirement of the content area can be guaranteed by utilizing the cache mechanism provided by keep-alive.

[0043] If the tag identifier of the target tag exists in the tag list, it indicates that the tab of the tag has been opened and only the tab needs to be switched. This may be because the user has opened other tags, and the content areas of the tabs corresponding to the other tags visually cover the content area of ​​the tab opened by the target tag, while the content area of ​​the tab corresponding to the opened target tag has been cached by the keep-alive component. At this time, if you want to open the target tag again, update the key of the content area component in the keep-alive component to the tag identifier of the target tag, and then the content area of ​​the tab that has been opened by the target tag can be visually displayed again.

[0044] S104: Displaying the cached content area of ​​the tab corresponding to the target tag in the target area according to the key of the content area component of the keep-alive component.

[0045] After updating the key of the content area component of the current keep-alive component to the tag identifier of the target tag, the content area of ​​the tab corresponding to the cached target tag can be displayed in the target area. The target area is related to the design process of the tab of the target tag. For example, if the tab corresponding to the target tag is set on the right side of the Web application interface during the design process, the content area of ​​the tab corresponding to the target tag will be displayed on the right side of the Web application interface.

[0046] In a feasible implementation manner, the method further includes: In response to a tab closing operation corresponding to any tag in the Web application, the tab corresponding to the tag is closed, and a tag identifier corresponding to the tag is obtained; and the tag identifier corresponding to the tag is deleted from the tag list.

[0047] If the tab of a tab is not visually covered by the tab corresponding to the triggered new tab, but the user chooses to close the tab of the tab, in addition to closing the tab of the tab, the tab identifier corresponding to the tab needs to be deleted in the tab list, that is, only the tab identifiers of the opened tabs are stored in the tab list.

[0048] Reference Figure 3 , shows a flowchart of the steps of the tag switching method provided in an embodiment of the present application. In a feasible implementation manner, the method includes: S201: In response to any tag triggering operation in a Web application, a tag identifier of a target tag is obtained.

[0049] S202: Check whether there is a tag identifier of the target tag in a tag list, wherein the tag identifier of any opened tag is stored in the tag list.

[0050] When responding to any tag trigger operation in a Web application, after obtaining the tag identifier of the target tag, the tag click event processing function handleTabChange is called. Through the tag click event processing function handleTabChange, according to the tag identifier of the target tag, it is matched whether there is the tag identifier of the target tag in the tag list.

[0051] S203: When the tag identifier of the target tag does not exist in the tag list, randomly generate a new tag identifier corresponding to the target tag according to the tag identifier of the target tag, and add the new tag identifier corresponding to the target tag to the tag list.

[0052] Specifically, if the tag identifier corresponding to the target tag is not in the tag list, it indicates that the target tag is not opened or has been closed, and is not an opened tag with a cached content area.

[0053] Assuming that the tag identifier of the target tag is identifier 1 and the target tag's tab has been opened before, the keep-alive component will cache the content area of ​​the tab corresponding to the target tag that has been opened, and the user's operations in the content area of ​​the tab corresponding to the target tag, such as inputting parameters added by the operation or selecting configurations by the operation, will also be cached. For example, the user enters parameter X in the setting input box of parameter 1 in the content area of ​​the tab corresponding to the target tag through an operation.

[0054] If the target tab is closed and the tab ID is still ID 1 when it is reopened, the comparison algorithm of the keep-alive component will match the content area of ​​the tab corresponding to the cached tab 1 by comparing the tab ID. That is, the content area of ​​the old tab that was cached before may be displayed for the reopened target tab. The content area of ​​the old tab will retain the user's historical operation traces. For example, in the content area of ​​the tab corresponding to the target tab that is reopened according to the tab ID 1, the setting input box of parameter 1 still has the input parameter X.

[0055] Therefore, in order to make the content area of ​​the tab corresponding to the reopened target tab a newly rendered clean tab, a new tab identifier can be generated for the target tab that does not exist in the tab list to avoid the problem of displaying the old content area of ​​the tab due to the second opening.

[0056] Specifically, when randomly generating a new label identifier corresponding to the target label based on the label identifier of the target label, the label identifier of the target label and a random number can be concatenated to generate the new label identifier corresponding to the target label; in other implementations, other methods can be used to generate a new label identifier for the target label, which is not limited in this embodiment.

[0057] S204: Re-render and display the content area of ​​the tab corresponding to the target tag in the target area, and use the new tag identifier corresponding to the target tag as the key of the content area component of the keep-alive component, so as to cache the content area of ​​the tab corresponding to the target tag after rendering through the keep-alive component.

[0058] When the tag identifier of the target tag does not exist in the tag list and a new tag identifier of the target tag is generated, the content area of ​​the tab corresponding to the target tag is rendered and displayed again in the target area, and the target area is still related to the design process of the tab of the target tag.

[0059] Then, the new tag identifier corresponding to the target tag is used as the key of the content area component of the keep-alive component, and the keep-alive component is continued to be used to cache the content area of ​​the tab corresponding to the target tag, so as to facilitate subsequent switching of the target tab without closing the target tag.

[0060] In a feasible implementation, taking label 1, label 2 and label 3 as an example, the method includes: Assume that after the preset Web application is initialized and started, the tab of label 1 is displayed by default, and the label list contains label identifier A of label 1. At this time, the key of the content area component in the keep-alive component is label identifier A of label 1, indicating that the content area of ​​the tab corresponding to label 1 has started to be cached. The cache includes the operations performed by the user on the tab of label 1, such as the parameters added by the input operation or the configuration selected by the selection operation.

[0061] When first responding to the trigger operation for tag 2 in the Web application, the following process is performed: First, the tag identifier B of tag 2 is obtained. After matching, the current tag list does not include the tag identifier B of tag 2, indicating that tag 2 is not opened or has been closed, and is not an opened tag with a cached content area.

[0062] Furthermore, a new label identifier corresponding to the target label is randomly generated according to the label identifier of the target label. For example, the label identifier B of label 2 and the random number X1 are concatenated to obtain a new label identifier BX1 of label 2.

[0063] Further, the new tag identifier BX1 of tag 2 is added to the tag list, which includes the tag identifier A of tag 1 and the new tag identifier BX1 of tag 2.

[0064] Furthermore, the content area of ​​the tab corresponding to tag 2 is re-rendered and displayed in the target area of ​​tag 2, and the new tag identifier BX1 corresponding to tag 2 is used as the key of the content area component of the keep-alive component, so that the content area of ​​the tab corresponding to the target tag after rendering is cached through the keep-alive component. The cache includes the operations performed by the user on the tab of tag 2, such as parameters added by input operations or configuration selected by selection operations.

[0065] At this time, if the trigger operation for tag 1 in the Web application is responded, the following process is performed: First, obtain the tag identifier A of tag 1. After matching, the current tag list includes the tag identifier A of tag 1, indicating that the tab of the tag has been opened and only the tab needs to be switched. Then, the key of the content area component in the keep-alive component is updated to the label identifier A of label 1, and the content area of ​​the tab corresponding to the cached label 1 will be displayed in the target area.

[0066] At this time, in response to the tab closing operation corresponding to label 1 in the Web application, the following process is performed: First, obtain the label identification A of label 1; Then, close the tab corresponding to the label; Finally, the tag identifier A of tag 1 is deleted from the tag list, and the current tag list only includes the new tag identifier BX1 of tag 2.

[0067] At this time, if the trigger operation for tag 3 in the Web application is responded, the following process is performed: First, the tag identifier C of tag 3 is obtained. After matching, the current tag list does not include the tag identifier C of tag 3, indicating that tag 3 is not opened or has been closed, and is not an opened tag with a cached content area.

[0068] Furthermore, a new label identifier corresponding to the target label is randomly generated according to the label identifier of the target label. For example, the label identifier C of label 3 and the random number X2 are concatenated to obtain a new label identifier CX2 of label 3.

[0069] Further, the new label identifier CX2 of label 3 is added to the label list, and the label list includes the new label identifier BX1 of label 2 and the new label identifier CX2 of label 3; Furthermore, the content area of ​​the tab corresponding to label 3 is re-rendered and displayed in the target area of ​​label 3, and the new label identifier CX2 corresponding to label 3 is used as the key of the content area component of the keep-alive component, so that the content area of ​​the tab corresponding to the target label after rendering is cached through the keep-alive component. The cache includes the operations performed by the user on the tab of label 3, such as the parameters added by the input operation or the configuration selected by the selection operation.

[0070] Reference Figure 4 , shows a flow chart of a tag switching method provided in an embodiment of the present application. In a feasible implementation manner, the method includes the following steps: S1: After starting the initialized Web application, detect any tag triggering operation in the Web application.

[0071] In this embodiment, after the initialized Web application is started, no tab of any tag is displayed, that is, the tag list does not contain the tag identifier of any tag.

[0072] S2: In response to any tag triggering operation in the Web application, obtain a tag identifier of a target tag.

[0073] S3: Determine whether the tag list contains the tag identifier of the target tag; When the tag list contains the tag identifier of the target tag, execute step S4; When the tag list does not contain the tag identifier of the target tag, execute step S5; S4: updating the key of the content area component of the keep-alive component to the tag identifier of the target tag, and displaying the cached content area of ​​the tab corresponding to the target tag in the target area.

[0074] S5: randomly generate a new tag identifier corresponding to the target tag, and add the new tag identifier corresponding to the target tag to the tag list.

[0075] S6: Re-rendering and displaying the content area of ​​the tab corresponding to the target tag in the target area, and using the new tag identifier corresponding to the target tag as the key of the content area component of the keep-alive component.

[0076] In this method, a keep-alive component based on a component cache mechanism provided by a Web application framework is used to cache the content area of ​​a tab corresponding to any tag, and a tag identifier of any opened tag is stored through a tag list.

[0077] When responding to any tag trigger operation in the Web application, if the tag identifier of the target tag is matched in the tag list, it indicates that the target tag has been opened, and the content area of ​​the tab corresponding to the target tag has been cached in the keep-alive component. It is only necessary to switch the content area of ​​the tab, and the key of the content area component of the keep-alive component is updated to the tag identifier of the target tag, so that the content area of ​​the tab corresponding to the cached target tag can be displayed in the target area; this method does not require a large amount of invalid caching, and only needs to cache the content area of ​​the tab corresponding to the opened tag, and the switching of the content area of ​​the tab corresponding to the tag is more efficient.

[0078] When a tag identifier of the target tag does not exist in the tag list, a new tag identifier of the target tag is generated and added to the tag list, so as to avoid the problem that the keep-alive component tag displays the old content area due to secondary opening.

[0079] Reference Figure 5 , shows a functional module diagram of a label switching device provided in an embodiment of the present application, the device comprising: The acquisition module 100 is used to obtain the tag identifier of the target tag in response to any tag triggering operation in the Web application; A matching module 200 is used to match whether there is a tag identifier of the target tag in a tag list, wherein the tag identifier of any opened tag is stored in the tag list; An updating module 300, configured to update the key of the content area component of the keep-alive component to the tag identifier of the target tag when the tag identifier of the target tag exists in the tag list, wherein the keep-alive component is used to cache the content area of ​​the tab corresponding to any tag; The display module 400 is used to display the content area of ​​the tab corresponding to the target tag that has been cached in the target area according to the key of the content area component of the keep-alive component.

[0080] Optionally, the device further comprises: A tag generation module, used for randomly generating a new tag identifier corresponding to the target tag according to the tag identifier of the target tag when the tag identifier of the target tag does not exist in the tag list, and adding the new tag identifier corresponding to the target tag to the tag list; A re-rendering module is used to re-render and display the content area of ​​the tab corresponding to the target tag in the target area, and use the new tag identifier corresponding to the target tag as the key of the content area component of the keep-alive component, so as to cache the content area of ​​the tab corresponding to the target tag after rendering through the keep-alive component.

[0081] Optionally, the label generation module includes: The label generation unit is used to concatenate the label identifier of the target label with a random number to generate a new label identifier corresponding to the target label.

[0082] Optionally, the device further comprises: The tag closing module is used to respond to the tab closing operation corresponding to any tag in the Web application, close the tab corresponding to the tag, obtain the tag identifier corresponding to the tag, and delete the tag identifier corresponding to the tag in the tag list.

[0083] Optionally, the matching module includes a matching unit, configured to: Call the tab click event processing function handleTabChange; Through the tab click event processing function handleTabChange, according to the tag identifier of the target tag, it is matched whether the tag identifier of the target tag exists in the tag list.

[0084] Optionally, the device further includes a label list setting module, which is used to: Initialize the tag identifier of the tag list that does not contain any tag; Or, in response to the initialization operation, a tag identifier of at least one tag is added to the tag list, wherein a content area of ​​a tab corresponding to any tag in the initialized tag list is displayed in the page of the initialized Web application.

[0085] Reference Figure 6 , shows a schematic diagram of a computer device provided in an embodiment of the present application, including: at least one processor 601, and a memory 602, wherein the memory 602 stores a computer program that can be run on the processor 601, wherein the processor 601 executes the label switching method described in the embodiment when executing the computer program.

[0086] Reference Figure 7 , shows a schematic diagram of a computer-readable storage medium provided in an embodiment of the present application, wherein the computer-readable storage medium 700 stores a computer program 701, and when the computer program 701 is executed by a processor, the label switching method as described in the embodiment is implemented.

[0087] Reference Figure 8 , shows a schematic diagram of a computer program product provided in an embodiment of the present application, wherein the computer program product 800 includes a computer program / instruction 801, which, when executed by a processor, implements the label switching method described in the embodiment.

[0088] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0089] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, devices, or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0090] The embodiments of the present application are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0091] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0092] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable terminal device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0093] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present application.

[0094] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the elements.

[0095] Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A label switching method, characterized in that: The method comprises: In response to any tag triggering operation in the Web application, obtaining a tag identifier of a target tag; Matching whether there is a tag identifier of the target tag in a tag list, wherein the tag identifier of any opened tag is stored in the tag list; When the tag identifier of the target tag exists in the tag list, the key of the content area component of the keep-alive component is updated to the tag identifier of the target tag, wherein the keep-alive component is used to cache the content area of ​​the tab corresponding to any tag; According to the key of the content area component of the keep-alive component, the content area of ​​the tab corresponding to the target tag that has been cached is displayed in the target area.

2. The method according to claim 1, characterized in that After matching whether there is a tag identifier of the target tag in the tag list, the method further includes: When the tag identifier of the target tag does not exist in the tag list, randomly generating a new tag identifier corresponding to the target tag according to the tag identifier of the target tag, and adding the new tag identifier corresponding to the target tag to the tag list; The content area of ​​the tab corresponding to the target tag is re-rendered and displayed in the target area, and the new tag identifier corresponding to the target tag is used as the key of the content area component of the keep-alive component, so as to cache the content area of ​​the tab corresponding to the target tag after rendering through the keep-alive component.

3. The method according to claim 2, characterized in that Randomly generating a new tag identifier corresponding to the target tag according to the tag identifier of the target tag, including: The tag identifier of the target tag is concatenated with a random number to generate a new tag identifier corresponding to the target tag.

4. The method according to claim 1, characterized in that: The method further comprises: In response to a tab closing operation corresponding to any tag in the Web application, close the tab corresponding to the tag and obtain a tag identifier corresponding to the tag; Delete the tag identifier corresponding to the tag in the tag list.

5. The method according to claim 1, characterized in that In the tag list, whether the tag identifier of the target tag is matched includes: Call the tab click event processing function handleTabChange; Through the tab click event processing function handleTabChange, according to the tag identifier of the target tag, it is matched whether the tag identifier of the target tag exists in the tag list.

6. The method according to claim 1, characterized in that The method further comprises: Initialize the tag identifier of the tag list that does not contain any tag; Or, in response to the initialization operation, a tag identifier of at least one tag is added to the tag list, wherein a content area of ​​a tab corresponding to any tag in the initialized tag list is displayed in the page of the initialized Web application.

7. A label switching device, characterized in that: The device comprises: An acquisition module, used for acquiring a tag identifier of a target tag in response to any tag triggering operation in a Web application; A matching module, used for matching whether there is a tag identifier of the target tag in a tag list, wherein the tag identifier of any opened tag is stored in the tag list; An update module, configured to update the key of the content area component of the keep-alive component to the tag identifier of the target tag when the tag identifier of the target tag exists in the tag list, wherein the keep-alive component is used to cache the content area of ​​the tab corresponding to any tag; The display module is used to display the content area of ​​the tab corresponding to the target tag that has been cached in the target area according to the key of the content area component of the keep-alive component.

8. A computer device, characterized in that: include: At least one processor, and a memory, wherein the memory stores a computer program that can be run on the processor, wherein the processor executes the label switching method according to any one of claims 1 to 6 when executing the computer program.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the label switching method according to any one of claims 1 to 6 is implemented.

10. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instruction is executed by a processor, the label switching method described in any one of claims 1 to 6 is implemented.

Images