A data processing method and apparatus

Abstract

The present application discloses a data processing method and apparatus, which identify the routing type corresponding to the currently activated route in a web page container. If the routing type is a single route, an event listening operation is performed on the single route. If the routing type is a parent-child route, an event listening operation is performed on the parent-child route level by level. If the routing type is a keep-alive route, an event listening operation is performed on the keep-alive route during the activated life cycle of the view component corresponding to the keep-alive route. Through the above solution, there is no need to listen for events of the web page container through custom components within the view component. Only differential event listening, event removal, etc. operations are performed on the web page container for several different routing types such as single routes, parent-child routes, and keep-alive routes, avoiding the phenomenon of repeated event listening for the web page container and reducing event omission caused by individual listening of each view component.

Description

Technical Field

[0001] This application relates to the technical field of data processing, and more specifically, to a data processing method and device. Background Art

[0002] When developing an embedded web page in a native mobile APP, some business functions involve the use of view components. During the use of view components, event listeners for the web page container are added in the life cycle hooks of each view component.

[0003] Due to the large number and frequent changes of view components, it is easy to cause differences in processing. Moreover, since other custom components are used within the view components, the relationships of the custom components within the view components become chaotic, resulting in problems such as duplicate event listening for the web page container or incomplete removal of events from the web page container. Summary of the Invention

[0004] In view of this, this application discloses a data processing method and device, aiming to avoid duplicate event listening for the web page container and reduce phenomena such as event omission caused by individual event listening of each view component.

[0005] To achieve the above object, the disclosed technical solution is as follows:

[0006] The first aspect of this application discloses a data processing method, and the method includes:

[0007] Identify the route type corresponding to the currently activated route in the web page container; the route types include single route, parent-child route, and keep-alive route;

[0008] If the route type is the single route, perform an event listening operation on the single route; the event listening operation is used to represent the listening operation for the return jump event of the web page container;

[0009] If the route type is the parent-child route, perform the event listening operation step by step on the parent-child route;

[0010] If the route type is the keep-alive route, perform the event listening operation on the keep-alive route during the activated life cycle of the view component corresponding to the keep-alive route.

[0011] Preferably, the identifying the route type corresponding to the currently activated route in the web page container includes:

[0012] Identify the route type corresponding to the currently activated route in the web page container through the Vue Router route manager.

[0013] Preferably, if the routing type is the separate route, the operation of listening for events on the separate route includes:

[0014] If the routing type is the separate route, perform the event listening operation on the separate route based on a preset callback function.

[0015] Preferably, if the routing type is the parent-child route, perform the event listening operation on the parent-child route step by step, including:

[0016] If the routing type is the parent-child route, perform the event listening operation on the parent-child route step by step based on a preset callback function.

[0017] Preferably, if the routing type is the keep-alive route, perform the event listening operation on the keep-alive route during the activated life cycle of the view component corresponding to the keep-alive route, including:

[0018] If the routing type is the keep-alive route, perform the event listening operation on the keep-alive route based on a preset callback function during the activated life cycle of the view component corresponding to the keep-alive route in the active state.

[0019] Preferably, after the operation of listening for events on the separate route if the routing type is the separate route, it further includes:

[0020] Perform a destruction operation and an event removal operation on the separate route.

[0021] Preferably, after the operation of listening for events on the parent-child route step by step if the routing type is the parent-child route, it further includes:

[0022] Perform a destruction operation and an event removal operation on the parent-child route.

[0023] Preferably, it further includes:

[0024] Perform an event removal operation on the keep-alive route during a preset destroy life cycle.

[0025] The second aspect of the present application discloses a data processing device, and the device includes:

[0026] An identification unit, configured to identify the routing type corresponding to the currently activated route in the web page container; the routing type includes a separate route, a parent-child route, and a keep-alive route;

[0027] A first operation unit is configured to perform an event listening operation on the separate route if the route type is the separate route; the event listening operation is used to represent an operation of listening for a return jump event of the current web page container.

[0028] A second operation unit is configured to perform the event listening operation on the parent-child route step by step if the route type is the parent-child route.

[0029] A third operation unit is configured to perform the event listening operation on the keep-alive route during the activated life cycle of the view component corresponding to the keep-alive route if the route type is the keep-alive route.

[0030] Preferably, the recognition unit is specifically configured to:

[0031] Identify the route type corresponding to the currently activated route in the web page container through the Vue Router route manager.

[0032] As can be seen from the above technical solutions, the present application discloses a data processing method and device, which identify the route type corresponding to the currently activated route in the web page container. The route types include separate routes, parent-child routes, and keep-alive routes. If the route type is the separate route, an event listening operation is performed on the separate route; the event listening operation is used to represent an operation of listening for a return jump event of the web page container. If the route type is the parent-child route, the event listening operation is performed on the parent-child route step by step. If the route type is the keep-alive route, the event listening operation is performed on the keep-alive route during the activated life cycle of the view component corresponding to the keep-alive route. Through the above solutions, there is no need to listen for events of the web page container through custom components within the view component. Only differential event listening, event removal, etc. operations are performed on the web page container for several different route types, namely separate routes, parent-child routes, and keep-alive routes, to avoid repeated listening for events of the web page container and reduce phenomena such as event omission caused by separate listening of each view component. Description of the Drawings

[0033] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings in the following description are only the embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained according to the provided drawings without creative efforts.

[0034] Figure 1 The architecture diagram of a data processing system disclosed in an embodiment of the present application;

[0035] Figure 2 The flowchart of a data processing method disclosed in an embodiment of the present application;

[0036] Figure 3 The structural diagram of a data processing device disclosed in an embodiment of the present application;

[0037] Figure 4 The structural diagram of an electronic device disclosed in an embodiment of the present application. Detailed implementation manners

[0038] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present application.

[0039] In the present application, the term "including", "comprising" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or further includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the phrase "including a..." does not exclude the existence of additional identical elements in the process, method, article or device including the element.

[0040] As can be seen from the background technology, due to the large number and frequent changes of view components, it is easy to cause differences in processing. And because other custom components are used within the view components, the relationships of the custom components within the view components are chaotic, resulting in problems such as duplicate listening for events of the web page container or incomplete removal of events of the web page container.

[0041] To solve the above problems, embodiments of the present application disclose a data processing method and device, which do not need to listen for events of the web page container through the custom components within the view components, and only need to perform differential event listening, event removal, etc. on the web page container for several different routing types such as single routing, parent-child routing, and keep-alive, so as to avoid duplicate listening for events of the web page container and reduce phenomena such as event omission caused by individual listening of each view component. The specific implementation manner will be described through the following embodiments.

[0042] First, the architecture diagram of the data processing system applicable to a data processing method / device of this application is introduced below. Specifically, refer to Figure 1 As shown, the data processing system includes a listening and processing module 11 and a view component 12.

[0043] The data processing procedures of the listening and processing module 11 and the view component 12 are as follows:

[0044] The listening and processing module 11 identifies the route type corresponding to the currently activated route in the web page container; the route types include single routes, parent-child routes, and keep-alive routes.

[0045] Among them, the listening and processing module 11 identifies the route type corresponding to the currently activated route in the web page container through the Vue Router route manager.

[0046] If the route type is a single route, the listening and processing module 11 performs an event listening operation on the single route; the event listening operation is used to represent the listening operation for the return jump event of the web page container.

[0047] Among them, if the route type is a single route, the listening and processing module 11 performs an event listening operation on the single route based on the preset callback function goback() passed in by the view component 12.

[0048] If the route type is a parent-child route, the listening and processing module 11 performs an event listening operation on the parent-child route level by level based on the preset callback function goback() passed in by the view component 12.

[0049] If the route type is a keep-alive route, within the activated lifecycle of the view component corresponding to the keep-alive route in the active state, the listening and processing module 11 performs an event listening operation on the keep-alive route based on the preset callback function goback() passed in by the view component 12.

[0050] The listening and processing module 11 performs a destruction operation and an event removal operation on the single route.

[0051] The listening and processing module 11 performs a destruction operation and an event removal operation on the parent-child route.

[0052] The listening and processing module 11 performs an event removal operation on the keep-alive route within the preset destroy lifecycle.

[0053] In the embodiments of the present application, there is no need to listen for events of the web page container through custom components within the view component. Instead, only for several different routing types such as single routing, parent-child routing, and keep-alive routing, differential event listening, event removal, etc. operations are performed on the web page container, avoiding duplicate event listening of the web page container and reducing phenomena such as event omission caused by separate listening of each view component.

[0054] Reference Figure 2 As shown, it is a schematic flowchart of a data processing method disclosed in an embodiment of the present application. This data processing method applies the data processing system disclosed in the above embodiment Figure 1 The data processing method mainly includes the following steps:

[0055] S201: Identify the routing type corresponding to the currently activated route in the web page container; the routing types include single routing, parent-child routing, and keep-alive routing. If the routing type is single routing, then execute S202. If the routing type is parent-child routing, then execute S203. If the routing type is keep-alive routing, then execute S204.

[0056] In S201, the routing type corresponding to the currently activated route in the web page container is identified through the navigation global guard of the Vue Router routing manager.

[0057] The currently activated route is obtained by the user's selection in the web page container.

[0058] The navigation global guard is a controller that controls which routes a user can enter and which routes a user cannot enter, and realizes the function of route management.

[0059] To facilitate understanding of the use of the navigation global guard, an example is given here for illustration:

[0060] For example, the use of the navigation guard is that when first entering a certain website to write a blog, one must log in first to enter the blog writing. The login interface is the route that the user can enter, and the blog is the route that the user cannot enter. When the user logs in, the controller will grant permission for the user to enter the blog route.

[0061] Among them, the Vue Router routing manager is deeply integrated with the core of Vue.js and includes functions such as nested routing and modular configuration.

[0062] The web page container is a tool plugin for opening mobile web pages in a mobile native APP application. There are various types of web page containers.

[0063] The determination of the web page container is set by the technical personnel according to the actual situation, and this application does not make specific limitations. The web page container in this application is preferably an mpaas container.

[0064] Define the routing rules for each view component, including the component mapping address, routing name, url mapping address, children sub-routes, and personalized parameters within the meta tag.

[0065] Among them, the personalized parameters of the meta tag include the view title, return scroll position, whether to keep-alive, etc. The three types of routes, namely single routes, parent-child routes, and keep-alive routes, are determined according to the actual business functions to be implemented by the components and need to be defined in this routing management module.

[0066] In addition, handle the keep-alive parameter in the meta of the route definition in the root component. The code is as follows:

[0067]

[0068] S202: Perform an event listening operation on the single route; the event listening operation is used to represent the listening operation for the return jump event of the web page container.

[0069] In S202, if the route type is a single route, perform an event listening operation on the single route based on the preset callback function goback().

[0070] Perform a listening operation for the return jump event when activating the single route, and perform an event removal operation when destroying the single route.

[0071] If the route type is a single route, after performing the event listening operation on the single route, perform a destruction operation and an event removal operation on the single route, and rewrite the goBack() method in the view component that calls back the currently activated route when the event is triggered.

[0072] Among them, the view component is a single page that can be perceived by the user.

[0073] S203: Perform an event listening operation on the parent-child routes level by level.

[0074] In S203, if the route type is a parent-child route, perform an event listening operation on the single route based on the preset callback function goback().

[0075] Perform a listening operation for the return jump event on the activated parent-child routes level by level to avoid duplicate listening.

[0076] Optionally, if the routing type is a parent-child route, after performing event listening operations on the parent-child route level by level, perform a destruction operation and an event removal operation on the parent-child route.

[0077] Destroy the child route and perform a return jump event removal operation to avoid omissions when removing the return jump event.

[0078] By identifying the current routing transition state and routing type, perform operations such as event listening, event removal, and passing in callback functions according to different situations.

[0079] S204: During the activated lifecycle of the view component corresponding to the keep-alive route, perform an event listening operation on the keep-alive route.

[0080] Among them, S202, S203, and S204 are in a parallel relationship.

[0081] If the routing type is a keep-alive route, during the activated lifecycle of the view component corresponding to the keep-alive route in the active state, perform an event listening operation on the keep-alive route based on a preset callback function.

[0082] If it is recognized that this keep-alive route is activated, perform a return jump event listening operation during the activated lifecycle of the view component corresponding to the currently active keep-alive route.

[0083] During the preset destroy lifecycle, perform an event removal operation on the keep-alive route, that is, perform a return jump event removal operation on the keep-alive route.

[0084] This application takes the return jump listening of the page as the actual application scenario. Combining the actual application scenario and technical solution, it is necessary to define a goBack() method with a unified name in each individual view component and rewrite and implement the customized return jump rules respectively.

[0085] The goBack() method rewritten by each view component is called and executed as a callback function when the event is triggered by the listening processing module. This kind of rewrite implementation is beneficial to reducing the coupling between view components.

[0086] Utilize the navigation global guards of the Vue Router routing manager to perform event listening and event removal on the events of the web page container for three different routing types, and call the rewritten goBack() method in the view component of the currently active route when the event is triggered.

[0087] Based on the return and jump model of dynamic routing and web containers within the JavaScript framework, this model can differentially monitor and remove the return of web containers for different page routing types, so as to execute customized return adjustment rules and logic when triggering physical returns or container monitoring, improving the usability and rationality of the product and ultimately enhancing the user experience.

[0088] In the embodiments of the present application, there is no need to monitor the events of the web container through custom components within the view component. Only differential event monitoring, event removal, etc. operations are performed on the web container for several different routing types such as single routing, parent-child routing, and keep-alive routing, avoiding the phenomenon of repeated monitoring of the events of the web container and reducing the event omission caused by separate monitoring of each view component.

[0089] Based on the above embodiments Figure 1 Disclosed is a data processing method, and the embodiments of the present application also correspondingly disclose a data processing device, as Figure 3 shown. The data processing device includes an identification unit 301, a first operation unit 302, a second operation unit 303, and a third operation unit 304.

[0090] The identification unit 301 is used to identify the routing type corresponding to the currently activated route in the web container; the routing types include single routing, parent-child routing, and keep-alive routing.

[0091] Among them, the identification unit 301 identifies the routing type corresponding to the currently activated route in the web container through the navigation global guard of the Vue Router routing manager.

[0092] When activating a single route, the identification unit 301 performs a monitoring operation on the return and jump event, and performs an event removal operation when destroying the single route.

[0093] The first operation unit 302 is used to perform an event monitoring operation on the single route if the routing type is a single route; the event monitoring operation is used to represent the monitoring operation on the return and jump event of the current web container.

[0094] Among them, if the routing type is a single route, the first operation unit 302 performs an event monitoring operation on the single route based on the preset callback function goback().

[0095] The second operation unit 303 is used to perform an event monitoring operation on the parent-child route level by level if the routing type is a parent-child route.

[0096] Among them, if the routing type is a parent-child route, the second operation unit 303 performs an event monitoring operation on the single route based on the preset callback function goback().

[0097] The third operation unit 304 is configured to, if the routing type is a keep-alive route, perform an event listening operation on the keep-alive route during the activated life cycle of the view component corresponding to the keep-alive route.

[0098] Wherein, if the routing type is a keep-alive route, the third operation unit 304 performs an event listening operation on the keep-alive route based on a preset callback function during the activated life cycle of the view component corresponding to the keep-alive route in the active state.

[0099] Furthermore, the recognition unit 301 is specifically configured to recognize the routing type corresponding to the currently activated route in the web page container through the Vue Router routing manager.

[0100] Furthermore, the first operation unit 302 is specifically configured to, if the routing type is a single route, perform an event listening operation on the single route based on a preset callback function.

[0101] Furthermore, the second operation unit 303 is specifically configured to, if the routing type is a parent-child route, perform an event listening operation on the parent-child route level by level based on a preset callback function.

[0102] Furthermore, the third operation unit 304 is specifically configured to, if the routing type is a keep-alive route, perform an event listening operation on the keep-alive route based on a preset callback function during the activated life cycle of the view component corresponding to the keep-alive route in the active state.

[0103] Furthermore, it further includes a first removal unit.

[0104] The first removal unit is configured to perform a destruction operation and an event removal operation on the single route.

[0105] Furthermore, it further includes a second removal unit.

[0106] The second removal unit is configured to perform a destruction operation and an event removal operation on the parent-child route.

[0107] Furthermore, it further includes a third removal unit.

[0108] The third removal unit is configured to perform an event removal operation on the keep-alive route during a preset destroy life cycle.

[0109] In the embodiments of the present application, there is no need to listen for events of the web page container through custom components within the view component. Instead, differential event listening, event removal, etc. operations are performed on the web page container for several different routing types, namely single routing, parent-child routing, and keep-alive routing, so as to avoid duplicate event listening for the web page container and reduce phenomena such as event omission caused by separate listening of each view component.

[0110] The embodiments of the present application also provide a storage medium, which includes stored instructions. When the instructions run, they control the device where the storage medium is located to execute the above data processing method.

[0111] The embodiments of the present application also provide an electronic device, and its structural schematic diagram is as Figure 4 shown, specifically including a memory 401, and one or more instructions 402. One or more of the instructions 402 are stored in the memory 401 and are configured to be executed by one or more processors 403 to perform the following operations by the one or more instructions 402:

[0112] Identify the routing type corresponding to the currently activated route in the web page container; the routing types include single routing, parent-child routing, and keep-alive routing;

[0113] If the routing type is single routing, perform event listening operations on the single routing; the event listening operations are used to represent the listening operations for the return jump event of the web page container;

[0114] If the routing type is parent-child routing, perform event listening operations on the parent-child routing step by step;

[0115] If the routing type is keep-alive routing, perform event listening operations on the keep-alive routing during the activated life cycle of the view component corresponding to the keep-alive routing.

[0116] For the foregoing method embodiments, for the sake of simple description, they are all expressed as a series of action combinations. However, those skilled in the art should know that the present application is not limited by the described action sequence, because according to the present application, certain steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to the present application.

[0117] It should be noted that the embodiments in this specification are all described in a progressive manner. Each embodiment focuses on the differences from other embodiments. For the same or similar parts among the embodiments, reference can be made to each other. For system embodiments, since they are basically similar to method embodiments, the description is relatively simple. For the relevant parts, reference can be made to the description of the method embodiments.

[0118] The steps in the methods of the embodiments of the present application can be adjusted, combined, and deleted according to actual needs.

[0119] Finally, it should also be noted that in this text, relational terms such as first and second 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.

[0120] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be obvious to those skilled in the art. The general principles defined herein can be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to these embodiments shown herein, but will be accorded the widest scope consistent with the principles and novel features disclosed herein.

[0121] The above are only the preferred embodiments of the present application. It should be pointed out that for those of ordinary skill in the art, without departing from the principle of the present application, several improvements and refinements can be made, and these improvements and refinements should also be regarded as the protection scope of the present application.

Claims

1. A data processing method, characterized in that, Applicable to a listening processing module in a data processing system, the method includes: Identifying the route type corresponding to the currently activated route in the web page container; the route types include single routes, parent-child routes, and keep-alive routes; If the route type is the single route, the listening processing module performs an event listening operation on the single route; the event listening operation is used to represent the listening operation for the return jump event of the web page container; If the route type is the parent-child route, the listening processing module performs the event listening operation on the parent-child route step by step; If the route type is the keep-alive route, the listening processing module performs the event listening operation on the keep-alive route during the activated life cycle of the view component corresponding to the keep-alive route.

2. The method according to claim 1, wherein The identifying the route type corresponding to the currently activated route in the web page container includes: Identifying the route type corresponding to the currently activated route in the web page container through the Vue Router route manager.

3. The method according to claim 1, wherein The if the route type is the single route, performing an event listening operation on the single route includes: If the route type is the single route, performing an event listening operation on the single route based on a preset callback function.

4. The method according to claim 1, wherein The if the route type is the parent-child route, performing the event listening operation on the parent-child route step by step includes: If the route type is the parent-child route, performing the event listening operation on the parent-child route step by step based on a preset callback function.

5. The method according to claim 1, wherein The route type is the keep-alive route, performing the event listening operation on the keep-alive route during the activated life cycle of the view component corresponding to the keep-alive route includes: If the route type is the keep-alive route, performing the event listening operation on the keep-alive route based on a preset callback function during the activated life cycle of the view component corresponding to the keep-alive route in the active state.

6. The method according to claim 1, wherein After the if the route type is the single route, performing an event listening operation on the single route, it further includes: Performing a destruction operation and an event removal operation on the single route.

7. The method according to claim 1, characterized in that, After the if the route type is the parent-child route, performing the event listening operation on the parent-child route step by step, it further includes: Performing a destruction operation and an event removal operation on the parent-child route.

8. The method according to claim 1, wherein It further includes: Performing an event removal operation on the keep-alive route during the preset destroy life cycle.

9. A data processing device, characterized in that, Applicable to a listening processing module in a data processing system, the device includes: An identification unit for identifying the route type corresponding to the currently activated route in the web page container; the route types include single routes, parent-child routes, and keep-alive routes; The first operation unit is used to perform an event listening operation on the separate route if the route type is the separate route; the event listening operation is used to represent the listening operation on the return jump event of the web page container. The second operation unit is used to perform the event listening operation on the parent-child route step by step if the route type is the parent-child route. The third operation unit is used to perform the event listening operation on the keep-alive route during the activated life cycle of the view component corresponding to the keep-alive route if the route type is the keep-alive route.

10. The device according to claim 9, characterized in that, The recognition unit is specifically used for: Identifying the route type corresponding to the currently activated route in the web page container through the Vue Router route manager.

Images