Data stream visualization method and device of front-end application framework, equipment, storage medium and product

Abstract

The invention discloses a data stream visualization method and device of a front-end application framework, equipment, a storage medium and a product. The method comprises the steps of obtaining path information of variables of a target project based on the front-end application framework and a variable dependency relationship of components; based on the path information of each variable and the variable dependency relationship of each component, obtaining data flow direction information between each component and the dependency variable; and generating a data flow direction view of the target project based on the data flow direction information between each component and the dependency variable. Thus, the generated data flow direction view of the target project can clearly display the data flow direction relationship of the response type data in the target project, so that the problem existing in the current variable dependency relationship of the target project is exposed to assist developers in analyzing and optimizing potential problems, the robustness of the target project is improved, and the user experience is improved. And high performance of the target project is maintained.

Description

Technical Field

[0001] The present application relates to front-end application framework technology, and in particular, to a method and device, equipment, storage medium, and product for visualizing the data flow of a front-end application framework. Background Art

[0002] In order to improve the development efficiency, solve cross-platform compatibility problems, provide rich components and functions, support reusability and component-based development, and support the development and management of large projects, it is often necessary to introduce a front-end application framework for Web application development.

[0003] In related technologies, Vue is a current mainstream front-end application framework, which constructs Web page applications based on declarative components and reactive data. Among them, reactive data specifically means that components in a Vue project create multiple observer (Watcher) instances during the life cycle to monitor data changes of dependent variables; when the data of the dependent variable changes, the data change will notify the corresponding Watcher instance, so as to achieve on-demand update of the Web page in a reactive manner.

[0004] However, although the reactive data function provided by the Vue framework is convenient and flexible, with the update and expansion of Vue projects, there may be complex variable dependency relationships in Vue projects. The complex data call and update process may lead to the inability to respond to user operations in a timely manner, and may even cause the Vue project to crash; however, in related technologies, Vue projects lack an effective management mechanism for dependency relationships. Since developers cannot directly manage the dependency relationships existing in Vue projects, they cannot detect potential corresponding problems in advance. Summary of the Invention

[0005] In view of this, embodiments of the present application provide a method and device, equipment, storage medium, and product for visualizing the data flow of a front-end application framework, aiming to assist front-end application framework developers in detecting potential problems in a target project.

[0006] The technical solution of the embodiments of the present application is implemented as follows:

[0007] In a first aspect, embodiments of the present application provide a method for visualizing the data flow of a front-end application framework, the method including:

[0008] Obtain path information of each variable and variable dependency relationships of each component of a target project based on a front-end application framework;

[0009] Based on the path information of each variable and the variable dependency relationships of each component, obtain data flow information between each component and dependent variables;

[0010] Generate a data flow view of the target project based on the data flow information between the components and the dependent variables.

[0011] In the above solution, the method further includes:

[0012] Determine the configuration file for storing the dependent variables in the target project;

[0013] Write path information to the configuration file;

[0014] Parse the variables in the configuration file to generate a variable mapping table;

[0015] Wherein, the variable mapping table stores the path information of each variable.

[0016] In the above solution, the obtaining the path information of each variable and the variable dependency relationship of each component of the target project based on the front-end application framework includes:

[0017] Based on the variable mapping table, obtain the path information of each variable; and,

[0018] Based on the render process of the component, determine each dependent variable of the component to obtain the variable dependency relationship of the component.

[0019] In the above solution, the obtaining the data flow information between each component and the dependent variable based on the path information of each variable and the variable dependency relationship of each component includes:

[0020] Classify the path information of each variable based on the configuration file to which the variable belongs;

[0021] Based on the variable dependency relationship of the component, determine whether each dependent variable of the component is a local variable;

[0022] Based on the judgment result, query the path information of each variable in the corresponding configuration file to obtain the path information of the dependent variable;

[0023] Based on the path information of each dependent variable of the component, obtain the data flow information between the component and the dependent variable;

[0024] Traverse each component of the target project to obtain the data flow information between each component and the dependent variable.

[0025] In the above solution, the querying the path information of each variable in the corresponding configuration file based on the judgment result includes:

[0026] If it is determined that the dependent variable is a local variable, query the path information of each variable in the corresponding component file;

[0027] If it is determined that the dependent variable is not a local variable, query the path information of each variable in the corresponding configuration file based on the configuration file data in the modules attribute of the component-based module.

[0028] In the above solution, the method further includes:

[0029] Set identification information for each component of the target project;

[0030] Based on the identification information, mark the corresponding components in the data flow view.

[0031] In the above solution, the method further includes:

[0032] Generate a topology network of the target project based on the data flow information between each component and the dependent variable;

[0033] Among them, the topology network is composed of nodes and edges. The nodes represent the variables with dependency relationships in the target project, and the edges represent the dependency chains for connecting the nodes with dependency relationships; weights are set for the edges, and the weights represent the number of nodes passed by the dependency chain.

[0034] In the above solution, the method further includes:

[0035] Detect variable dependency relationship problems existing in the target project based on the topology network;

[0036] Mark the corresponding data flow in the data flow view based on the detected variable dependency relationship problems;

[0037] Among them, the variable dependency relationship problems include one or more of the following: too long dependency chain, redundant variable dependency, invalid attribute dependency, and circular dependency.

[0038] In a second aspect, an embodiment of the present application provides a data flow visualization device for a front-end application framework. The device includes:

[0039] An acquisition module, configured to acquire the path information of each variable and the variable dependency relationship of each component of a target project based on a front-end application framework;

[0040] A processing module, configured to obtain data flow information between each component and a dependent variable based on the path information of each variable and the variable dependency relationship of each component;

[0041] A generation module, configured to generate a data flow view of the target project based on the data flow information between each component and the dependent variable.

[0042] In a third aspect, an embodiment of the present application provides a network device, including: a processor and a memory for storing a computer program that can run on the processor, wherein the processor is configured to execute the steps of the method described in the first aspect when running the computer program.

[0043] In a fourth aspect, an embodiment of the present application provides a storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the method described in the first aspect are implemented.

[0044] In a fifth aspect, an embodiment of the present application provides a computer program product, including a computer program, and when the computer program is executed by a processor, the steps of the method described in the first aspect are implemented.

[0045] The data flow visualization method for the front-end application framework provided by the embodiment of the present application includes: obtaining the path information of each variable and the variable dependency relationship of each component of a target project based on the front-end application framework; obtaining the data flow information between each component and the dependent variables based on the path information of each variable and the variable dependency relationship of each component; generating a data flow view of the target project based on the data flow information between each component and the dependent variables. In this way, the data flow view of the target project generated by the embodiment of the present application can clearly show the data flow during the variable call and update process in the target project, expose the problems existing in the current dependency relationship of the target project, assist application developers in analyzing and optimizing potential problems, improve the robustness of the target project, and maintain the high performance of the target project. Description of the Drawings

[0046] Figure 1 It is a schematic flowchart of the data flow visualization method for the front-end application framework according to the embodiment of the present application;

[0047] Figure 2 It is a schematic diagram of the data flow view of the target project in an application example of the present application;

[0048] Figure 3 It is a schematic structural diagram of the data flow visualization device for the front-end application framework according to the embodiment of the present application;

[0049] Figure 4 It is a schematic structural diagram of the network device according to the embodiment of the present application. Detailed Embodiments

[0050] The present application will be further described in detail below with reference to the drawings and embodiments.

[0051] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terms used in the specification of this application are only for the purpose of describing specific embodiments and are not intended to limit this application.

[0052] An embodiment of this application provides a method for visualizing the data flow of a front-end application framework, as Figure 1 shown. The method includes:

[0053] Step 101, obtain the path information of each variable and the variable dependency relationship of each component of the target project based on the front-end application framework.

[0054] Step 102, based on the path information of each variable and the variable dependency relationship of each component, obtain the data flow information between each component and the dependent variables.

[0055] Step 103, generate a data flow view of the target project based on the data flow information between each component and the dependent variables.

[0056] Here, the front-end application framework is used to help Web application developers build responsive and user-friendly Web interfaces. Among them, the components of the front-end application framework, as a key part of Web application development, can provide various functions such as page layout, duplicate code, routing management, and data binding to simplify the development process.

[0057] Here, the current mainstream front-end application frameworks include but are not limited to: Bootsrrap, React, Vue, and Angular; taking Vue as an example, Vue provides a component declarative function. Developers only need to describe the final form of the component without setting the detailed implementation steps of the state change. When the component state changes, the Vue instance automatically processes the update of the corresponding Document Object Model (DOM).

[0058] It should be noted that in order to support the component of the front-end application framework to implement functions, the component needs relevant variables and functions provided by the front-end application framework during runtime. Here, the variables that the component needs to call during runtime are called the dependent variables or dependencies of the component; based on the dependency relationship between the injection components and the dependent variables in the Web application, the component only calls variables and / or attributes during runtime, achieving decoupling between components and improving the testability and maintainability of the Web application. Taking Vue as an example, Vue provides a reactive data function. Among them, the implementation of the reactive data function mainly relies on the observer pattern of Watcher and Dep. Specifically, the Vue instance adds a Dep instance to the attribute of the variable to manage all the dependency relationships of the attribute. When the attribute of the variable is accessed, the corresponding Watcher instance will be added to the subscriber list of the Dep instance of the attribute. When the variable is modified, the Dep instance will notify all the subscribed Watcher instances. After receiving the notification, the Watcher instance will update the corresponding Web page as needed for the component.

[0059] However, although setting the dependency relationship between components and variables in Web application development can improve the development efficiency of the application, with the update and expansion of the application project, there may be complex variable dependency relationships in the application project. If there are potential problems such as too long dependency chains and invalid attribute dependencies, the complex variable call and update process may cause the application project to fail to respond to user operations in a timely manner; if there are potential problems such as circular dependencies, in severe cases, it may even cause the application project to crash; however, in some related technologies, some front-end application frameworks usually lack a mechanism for effectively managing the dependency relationships in the application project, and application developers cannot directly manage the dependency relationships in the project, so they cannot detect potential corresponding problems in advance.

[0060] It can be understood that based on the data flow visualization method of the front-end application framework provided in the embodiments of the present application, the data flow view of the target project can clearly show the data flow during the variable call and update process in the target project, exposing the problems existing in the current dependency relationship of the target project, so as to assist application developers in analyzing and optimizing potential problems, improving the robustness of the target project, and maintaining the high performance of the target project.

[0061] The method for generating the data flow view of the target project in the present application will be described in detail below.

[0062] Exemplarily, the method further includes: determining a configuration file for storing dependent variables in the target project; writing path information to the configuration file; parsing the variables in the configuration file to generate a variable mapping table; where the variable mapping table stores the path information of each variable.

[0063] It can be understood that, based on the type of the front-end application framework, the configuration files to which the variables belonging to the dependent variables that can be used as components in the target project belong are determined. Taking a Vue project as an example, the store file of a Vue project is used to centrally store and manage the states of all components in the target project, and the mixin file is used to share code among multiple components and usually includes component options, which can be used in the form of local mixing or global mixing. Therefore, in a Vue project, the types of configuration files for storing the dependent variables of components usually include: store files, mixin files, and component files.

[0064] It can be understood that after determining the configuration files for storing the dependent variables of components in the target project, path information is written to each determined configuration file, and the variables in each configuration file are parsed to obtain the data attribution of the variables.

[0065] It can be understood that in the embodiments of the present application, only path information is written to the configuration files that can be used to store the dependent variables of components and the variables in the configuration files are parsed, and path information is not written to all the configuration files of the target project, which can improve the variable parsing efficiency.

[0066] Here, the path information of each variable obtained by parsing is stored in a variable mapping table and is called when generating the data flow information between each component and the dependent variable. Taking a Vue project as an example, path information is written to the store file, mixin file, and component file in the Vue project, and each variable in the store file, mixin file, and component file is parsed to obtain a variable mapping table.

[0067] Exemplarily, obtaining the path information of each variable and the variable dependency relationship of each component of the target project based on the front-end application framework includes: obtaining the path information of each variable based on the variable mapping table; and determining each dependent variable of the component based on the render process of the component to obtain the variable dependency relationship of the component.

[0068] Here, the dependent variables of the component are usually called during the rendering process of the component, and during the rendering process of the component, the collection of the dependency relationship of the component can be completed. Taking a Vue project as an example, the Vue project will automatically complete the relationship registration between the Dep instance and the Watcher instance during the rendering process, and then obtain the dependent variables of the component.

[0069] Exemplarily, based on the path information of each variable and the variable dependencies of each component, the data flow information between each component and the dependent variables is obtained, including: classifying the path information of each variable based on the configuration file to which the variable belongs; determining whether each dependent variable of the component is a local variable based on the variable dependencies of the component; querying the path information of each variable in the corresponding configuration file based on the determination result to obtain the path information of the dependent variable; obtaining the data flow information between the component and the dependent variable based on the path information of each dependent variable of the component; traversing each component of the target project to obtain the data flow information between each component and the dependent variable.

[0070] Here, in the embodiment of the present application, the path information of each variable is classified based on the configuration file to which the variable belongs, so as to quickly query the path information of the dependent variable after determining the configuration file to which the dependent variable of the component belongs.

[0071] Here, a local variable is a variable defined inside a component and is only valid within the scope of the component. Local variables are usually defined and used through the data property, computed property, and methods property.

[0072] Exemplarily, querying the path information of each variable in the corresponding configuration file based on the determination result includes: if it is determined that the dependent variable is a local variable, querying the path information of each variable in the corresponding component file; if it is determined that the dependent variable is not a local variable, querying the path information of each variable in the corresponding configuration file based on the configuration file data in the modules property of the component.

[0073] It should be noted that in order to clarify the access object of the component, the component usually sets the modules property to store the target configuration file accessed when the component calls the dependent variable. Here, if it is determined that the dependent variable of the component is a local variable, query the path information of each variable in the corresponding component file to obtain the path information of the dependent variable, and then generate the path information between the component and the dependent variable; if it is determined that the dependent variable of the component is not a local variable, based on the modules property of the component, sequentially retrieve and query the corresponding configuration files to obtain the path information of the dependent variable, and then generate the path information between the component and the dependent variable.

[0074] Here, when developing the target project, in order to display and operate hierarchical structure data, a component tree structure is usually constructed. In the embodiment of the present application, based on the component tree structure of the target project, the data flow information corresponding to each component is determined in sequence, and the data flow information corresponding to each component is stored in the corresponding component.

[0075] It should be noted that after obtaining the data flow information between all components and dependent variables of the target project, considering that the target project may include multiple components with the same name, when generating the data flow view of the target project, exemplarily, the method further includes: setting identification information for each component of the target project; and marking the corresponding components in the data flow view based on the identification information.

[0076] It can be understood that in the embodiments of the present application, identification information is set for each component of the target project as the unique identifier of the component, and each component is displayed with the set identification information in the data flow view of the target project, so that application developers can distinguish components with the same name in the target project and can retrieve components based on the identification information.

[0077] Here, taking a Vue project as an example, the data flow visualization method of the above front-end application framework is illustrated.

[0078] In this example, before generating the data flow information between each component and dependent variable of the Vue project, first write path information to the store file, mixin file, and component file of the Vue project, parse each variable in the store file, mixin file, and component file, and generate a variable mapping table of the Vue project; when generating the data flow information between each component and dependent variable of the Vue project, read the path information of each variable stored in the variable mapping table, and classify each path information based on the file to which the variable belongs. The classified path information of each variable is as follows:

[0079] user-mixin.js:{

[0080] data:[name,email],

[0081] computed:[misc]

[0082] }

[0083] user-store.module.js:{

[0084] state:[userId]

[0085] }

[0086] app.js:{

[0087] modules:[user-mixin,user-store],

[0088] components:[ <header> , <aside>,

[0089] data: [version, title, date],

[0090] computed: [profile],

[0091] watch: [userId],

[0092] props: [link, srvURL],

[0093] render: [this.name, this.email, this.profile, version]

[0094] }

[0095] It can be understood that in this example, the store file of the Vue project includes at least user - store.module.js, the mixin file includes at least user - mixin.js, and the component file includes at least app.js. After classifying the path information of each variable, the variables and their corresponding attributes in user - store.module.js, user - mixin.js, and app.js are obtained.

[0096] In this example, the Vue project includes at least the component app. During the rendering process of the component app, the dependent variables and properties of the component app are determined. Specifically, the dependent variables of the Vue project include the variables name, email, profile, and version accessed by the render method, and the variable userId accessed by the watch method, completing the collection of the variable dependency relationships of the component app. In this example, after obtaining the variable dependency relationships of the component app of the Vue project, the path information of each dependent variable is determined respectively, and then the data flow information between the component app and each dependent variable is generated. During the process of generating the data flow information, first, it is respectively determined whether the dependent variables name, email, profile, version, and userId of the component app are local variables. After determination, it is found that the variables name, email, profile, and userId are not local variables, and the variable version is a local variable. Here, since the variable version is a local variable, the path information of each variable in the component app is queried, and the data flow information between the component app and the variable version can be obtained; since the variables name, email, profile, and userId are not local variables, and the modules attribute of the component app records that the target configuration files accessed by the component app include user - store.module and user - mixin, the variables in user - store.module and user - mixin are sequentially retrieved and queried to determine the configuration files to which each dependent variable belongs, and the path information of each dependent variable is obtained, and then the data flow information between the component app and the variables name, email, profile, and watch.userId is obtained. Taking the variable name as an example, after determining that the variable name is not a local variable, the path information of each variable in user - store.module and user - mixin is sequentially retrieved and queried, and it can be determined that the variable name belongs to user - store.module, and the component app accesses the data attribute of the variable name when executing the render method.

[0097] Here, the data flow information between the component app of the Vue project in this example and the dependent variables is specifically as follows:

[0098] 1) app.name <- app.module.userMixin.data.name;

[0099] 2) app.email <- app.module.userMixin.data.email;

[0100] 3) app.watch.userId <- userStore.state.userId;

[0101] 4) app.profile <- app.computed.profile <- app.module.userMixin.computed.misc <- [app.module.userMixin.data.name, app.module.userMixin.data.email];

[0102] 5) app.local.version <- app.props.version.

[0103] Here, after the data flow information between dependent variables is generated, it is stored in the component app.

[0104] Among them, there is a data flow between the component app and the parent component, and the variable version is updated through the props method.

[0105] Here, this example only illustrates the method for generating the data flow information between the component app and dependent variables in a Vue project. The Vue project also includes other components. Based on the method for generating the data flow information between the component app and dependent variables provided in this example, the methods for generating the data flow information between other components and the component app and dependent variables can also be obtained.

[0106] In this example, after obtaining the data flow information between all components of the Vue project and dependent variables, a data flow view of the Vue project can be generated. Before generating the data flow view, identification information needs to be set for each component of the Vue project to distinguish components with the same name. In this example, the identification information is set and mixed into each component of the Vue project by adding global variables, as follows:

[0107] Vue.mixin({

[0108] mounted() {

[0109] var nd = this;

[0110] var uid = "";

[0111] while (nd.$parent) {

[0112] / / parseTag can ensure the uniqueness of the component's tag and can be retrieved using the file name

[0113] const tagName = parseTag(nd.$vnode.tag, nd.$parent)

[0114] uid += tagName;

[0115] nd = nd.$parent;

[0116] }

[0117] }

[0118] [[ID=15}]})

[0119] In this example, after setting unique identification information for each component of the Vue project, a data flow view of the Vue project is drawn. Here, ECharts can be used to draw the data flow view. Among them, the representation of the data flow between the component app and the dependent variable name in the data flow view is specifically as follows Figure 2 as shown

[0120] It should be noted that the data visualization icon library and method used to generate the data flow view of the target project in the embodiments of this application are not specifically limited, and the representation form of the data flow in the data flow view is not specifically limited

[0121] It can be understood that based on the data flow view of the target project generated by the application developer according to the embodiments of this application, it is possible to intuitively analyze whether there are currently variable dependency relationship problems in the data flow of the target project. Variable dependency relationship problems include, but are not limited to, too long dependency chains, redundant variable dependencies, invalid property dependencies, and circular dependencies

[0122] Here, too long dependency chains will affect the response time of the application project, occupy the resources of the application project and cannot respond to user operations in a timely manner; redundant variable dependencies specifically mean that there are multiple dependency chains between a component and the same dependent variable, resulting in excessive consumption of the resources of the application project; invalid property dependencies specifically mean that a component only depends on some properties of a variable, but the watch method of the component listens to all properties of the variable, resulting in the execution of corresponding methods by the component whenever any property of the variable changes, increasing the resource burden of the application project; circular dependencies specifically mean that the dependency chain has a situation where the head and tail are connected, which will cause problems such as page freezing and repeated refreshing in the application project

[0123] It should be noted that, in order to further assist application developers in analyzing the variable dependency relationship problems existing in the target project, exemplarily, the method includes: generating a topological network of the target project based on the data flow information between each component and the dependent variables; detecting the variable dependency relationship problems existing in the target project based on the topological network; marking the corresponding data flows in the data flow view based on the detected variable dependency relationship problems; wherein, the topological network is composed of nodes and edges, the nodes represent the variables with dependency relationships in the target project, and the edges represent the dependency chains, which are used to connect the nodes with dependency relationships; weights are set for the edges, and the weights represent the number of nodes passed by the dependency chain; the variable dependency relationship problems include one or more of the following: too long dependency chain, redundant variable dependency, invalid attribute dependency, and circular dependency.

[0124] It can be understood that the embodiments of the present application adopt a topological analysis method to construct a topological network of the target project based on the data flow information between each component of the target project and the dependent variables, and detect the problems existing in the target project based on the topological network.

[0125] Here, taking a Vue project as an example, based on the data flow information of the component app in the Vue project, the corresponding dependency relationships of each variable in the component app and the weights representing the number of nodes passed by the dependency chain are specifically shown in Table 1 as follows:

[0126] Table 1

[0127] Variable name Weight name 1 email 1 watch.userId 1 profile 4 local.version 1

[0128] Here, the specific steps for constructing the topological network are as follows:

[0129]

[0130]

[0131] It can be understood that the topological network of the target project can directly represent the variable dependency relationships of the target project. Based on the topological network of the target project, it can be detected whether there are variable dependency relationship problems in the target project and the corresponding types of variable dependency relationship problems. Among them, in the embodiments of the present application, a weight threshold can be set for the target project. If the weight of an edge in the topological network is greater than the preset weight threshold, it is determined that the length of the dependency chain where the edge is located is too long; in the embodiments of the present application, the paths between any nodes in the topological network can be traversed. If two nodes can be connected based on multiple paths, it is determined that there is a redundant variable dependency problem; if a one-way continuous path passes through the same node multiple times, it is determined that there is a circular dependency problem.

[0132] It can be understood that the embodiment of the present application feeds back the variable dependency relationship problem detected by the topology network of the target project to the data flow view, and marks the data flow with variable dependency relationship problems in the data flow view to alert application developers to process and optimize the existing variable dependency relationship problems.

[0133] To implement the method of the embodiment of the present application, the embodiment of the present application also provides a data flow visualization device for a front-end application framework. This data flow visualization device corresponds to the above data flow visualization method, and each step in the embodiment of the above data flow visualization method is also fully applicable to the embodiment of this device.

[0134] Here, the embodiment of the present application provides a data flow visualization device for a front-end application framework, as Figure 3 shown. This device includes an acquisition module 301, a processing module 302, and a generation module 303. The acquisition module 301 is used to acquire the path information of each variable and the variable dependency relationship of each component of the target project based on the front-end application framework; the processing module 302 is used to obtain the data flow information between each component and the dependent variable based on the path information of each variable and the variable dependency relationship of each component; the generation module 303 is used to generate a data flow view of the target project based on the data flow information between each component and the dependent variable.

[0135] In some embodiments, this data flow visualization device further includes a dependent variable collection module 304. The dependent variable collection module 304 is used to determine the configuration file for storing dependent variables in the target project; write path information to the configuration file; parse the variables in the configuration file to generate a variable mapping table; where the variable mapping table stores the path information of each variable.

[0136] In some embodiments, the acquisition module 301 is specifically used to: based on the variable mapping table, acquire the path information of each variable; and, based on the render process of the component, determine each dependent variable of the component to obtain the variable dependency relationship of the component.

[0137] In some embodiments, the processing module 302 is specifically used to: classify the path information of each variable based on the configuration file to which the variable belongs; determine whether each dependent variable of the component is a local variable based on the variable dependency relationship of the component; based on the judgment result, query the path information of each variable in the corresponding configuration file to obtain the path information of the dependent variable; based on the path information of each dependent variable of the component, obtain the data flow information between the component and the dependent variable; traverse each component of the target project to obtain the data flow information between each component and the dependent variable.

[0138] In some embodiments, the processing module 302 is specifically configured to: if it is determined that the dependent variable is a local variable, query the path information of each variable in the corresponding component file; if it is determined that the dependent variable is not a local variable, query the path information of each variable in the corresponding configuration file based on the configuration file data in the modules attribute of the component.

[0139] In some embodiments, the generating module 303 is further configured to: set identification information for each component of the target project; based on the identification information, mark the corresponding components in the data flow view.

[0140] In some embodiments, the data flow visualization device further includes a topology analysis module 305. The topology analysis module 305 is configured to generate a topology network of the target project based on the data flow information between each component and the dependent variable. Among them, the topology network is composed of nodes and edges. The nodes represent the variables with dependency relationships in the target project, and the edges represent the dependency chains, which are used to connect the nodes with dependency relationships. The edges are set with weights, and the weights represent the number of nodes passed by the dependency chain.

[0141] In some embodiments, the data flow visualization device further includes an optimization module 306. The optimization module 306 is configured to detect variable dependency relationship problems existing in the target project based on the topology network; based on the detected variable dependency relationship problems, mark the corresponding data flows in the data flow view. Among them, the variable dependency relationship problems include one or more of the following: too long dependency chain, redundant variable dependency, invalid attribute dependency, and circular dependency.

[0142] It should be noted that: when the data flow visualization device provided in the above embodiments performs data flow visualization, only the above-mentioned division of each program module is used for illustration. In practical applications, the above-mentioned processing can be allocated to different program modules according to needs, that is, the internal structure of the device is divided into different program modules to complete all or part of the above-mentioned processing. In addition, the data flow visualization device provided in the above embodiments and the embodiments of the data flow visualization method belong to the same concept, and the specific implementation process is detailed in the method embodiments, which will not be elaborated here.

[0143] To implement the method of the embodiments of the present application, the embodiments of the present application further provide a network device. Figure 4 Only the exemplary structure of the network device is shown, rather than all structures, and can be implemented according to needs Figure 4 The partial structure or all structures shown.

[0144] Such as Figure 4 As shown in the figure, the network device 400 provided by the embodiment of the present application includes: at least one processor 401, a memory 402, a user interface 403, and at least one network interface 404. Each component in the network device 400 is coupled together through a bus system 405. It can be understood that the bus system 405 is used to realize the connection and communication between these components. In addition to the data bus, the bus system 405 also includes a power bus, a control bus, and a status signal bus. However, for the sake of clear description, in Figure 4 all kinds of buses are labeled as the bus system 405.

[0145] Among them, the user interface 403 may include a display, a keyboard, a mouse, a trackball, a click wheel, a button, a touchpad, or a touch screen, etc.

[0146] The memory 402 in the embodiment of the present application is used to store various types of data to support the operation of the network device 400. Examples of these data include: any computer program for operating on the network device 400.

[0147] The data flow visualization method of the front-end application framework disclosed in the embodiment of the present application can be applied to the processor 401 or implemented by the processor 401. The processor 401 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the data flow visualization method of the front-end application framework can be completed by the integrated logic circuit in the hardware of the processor 401 or the instructions in the form of software. The above-mentioned processor 401 may be a general-purpose processor, a digital signal processor (DSP, Digital Signal Processor), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor 401 can implement or execute each method, step, and logic block diagram of the front-end application framework disclosed in the embodiment of the present application. The general-purpose processor may be a microprocessor or any conventional processor, etc. Combining the steps of the method disclosed in the embodiment of the present application, it can be directly embodied as being executed by the hardware decoding processor, or executed by the combination of the hardware and software modules in the decoding processor. The software module may be located in the storage medium, and this storage medium is located in the memory 402. The processor 401 reads the information in the memory 402 and combines its hardware to complete the steps of the data flow visualization method of the front-end application framework provided by the embodiment of the present application.

[0148] In an exemplary embodiment, the network device 400 may be implemented by one or more application specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), FPGAs, general purpose processors, controllers, microcontroller units (MCUs), microprocessors, or other electronic components, and is used to execute the data flow visualization method of the foregoing front-end application framework.

[0149] It can be understood that the memory 402 can be a volatile memory or a non-volatile memory, or can include both volatile and non-volatile memories. Among them, the non-volatile memory can be a read-only memory (ROM, Read Only Memory), a programmable read-only memory (PROM, Programmable Read-Only Memory), an erasable programmable read-only memory (EPROM, Erasable Programmable Read-Only Memory), an electrically erasable programmable read-only memory (EEPROM, Electrically Erasable Programmable Read-Only Memory), a ferromagnetic random access memory (FRAM, ferromagnetic random access memory), a flash memory (Flash Memory), a magnetic surface memory, an optical disc, or a compact disc read-only memory (CD-ROM, Compact Disc Read-Only Memory); the magnetic surface memory can be a disk memory or a tape memory. The volatile memory can be a random access memory (RAM, Random Access Memory), which is used as an external cache. By way of example but not limitation, many forms of RAM are available, such as a static random access memory (SRAM, Static Random Access Memory), a synchronous static random access memory (SSRAM, Synchronous Static Random Access Memory), a dynamic random access memory (DRAM, Dynamic Random Access Memory), a synchronous dynamic random access memory (SDRAM, SynchronousDynamic Random Access Memory), a double data rate synchronous dynamic random access memory (DDRSDRAM, Double Data Rate Synchronous Dynamic Random Access Memory), an enhanced synchronous dynamic random access memory (ESDRAM, Enhanced Synchronous Dynamic Random Access Memory), a sync link dynamic random access memory (SLDRAM, Sync Link Dynamic Random Access Memory), a direct rambus random access memory (DRRAM, Direct Rambus Random Access Memory).The memories described in the embodiments of this application are intended to include, but are not limited to, these and any other suitable types of memories.

[0150] In an exemplary embodiment, the embodiments of this application also provide a storage medium, namely a computer storage medium, which may specifically be a computer-readable storage medium. For example, it includes a memory 402 that stores a computer program. The above computer program can be executed by a processor 401 of a network device 400 to complete the steps described in the data flow visualization method of the front-end application framework in the embodiments of this application. The computer-readable storage medium can be a memory such as ROM, PROM, EPROM, EEPROM, Flash Memory, magnetic surface memory, optical disc, or CD-ROM.

[0151] In an exemplary embodiment, the embodiments of this application also provide a computer program product, including a computer program that can be executed by a processor 401 of a network device 400 to complete the steps described in the data flow visualization method of the front-end application framework in the embodiments of this application.

[0152] It should be noted that "first", "second", etc. are used to distinguish similar objects and do not necessarily have to describe a specific order or sequence.

[0153] In addition, the technical solutions described in the embodiments of this application can be arbitrarily combined without conflict.

[0154] As described above, the above are only specific implementation manners of this application, but the protection scope of this application is not limited thereto. Any person skilled in the art within the technical scope disclosed by this application can easily think of changes or substitutions, which should all be covered within the protection scope of this application. Therefore, the protection scope of this application should be subject to the protection scope of the claims.< / aside> < / header>

Claims

1. A data flow visualization method for a front-end application framework, characterized in that: The method comprises: Obtain the path information of each variable and the variable dependencies of each component of the target project based on the front-end application framework; Based on the path information of each variable and the variable dependency relationship of each component, obtaining data flow information between each component and the dependent variable; Based on the data flow information between the components and the dependent variables, a data flow view of the target project is generated.

2. The method according to claim 1, characterized in that The method further comprises: Determine a configuration file in the target project for storing dependent variables; Writing path information to the configuration file; Parsing the variables in the configuration file to generate a variable mapping table; The variable mapping table stores the path information of each variable.

3. The method according to claim 2, characterized in that The obtaining of the path information of each variable of the target project based on the front-end application framework and the variable dependency relationship of each component includes: Based on the variable mapping table, obtaining path information of each variable; and, Based on the rendering process of the component, each dependent variable of the component is determined to obtain the variable dependency relationship of the component.

4. The method according to claim 3, characterized in that The obtaining of data flow information between each component and the dependent variable based on the path information of each variable and the variable dependency relationship of each component includes: Classifying the path information of each variable based on the configuration file to which the variable belongs; Based on the variable dependency relationship of the component, determine whether each dependent variable of the component is a local variable; Based on the judgment result, query the path information of each variable in the corresponding configuration file to obtain the path information of the dependent variables; Based on the path information of each dependent variable of the component, the data flow information between the component and the dependent variable is obtained; Traverse each component of the target project to obtain data flow information between each component and dependent variables.

5. The method according to claim 4, characterized in that Based on the judgment result, querying the path information of each variable in the corresponding configuration file includes: If it is determined that the dependent variable is a local variable, query the path information of each variable in the corresponding component file; If it is determined that the dependent variable is not a local variable, the path information of each variable in the corresponding configuration file is queried based on the configuration file data in the modules property of the component module.

6. The method according to claim 1, characterized in that The method further comprises: Setting identification information for each component of the target project; Based on the identification information, corresponding components in the data flow view are marked.

7. The method according to claim 1, characterized in that The method further comprises: Based on the data flow information between the components and the dependent variables, a topological network of the target project is generated; The topological network is composed of nodes and edges, wherein the nodes represent variables with dependency relationships in the target project, and the edges represent dependency chains used to connect nodes with dependency relationships; weights are set on the edges, and the weights represent the number of nodes passed by the dependency chain.

8. The method according to claim 7, characterized in that The method further comprises: Based on the topological network, detecting variable dependency problems existing in the target project; Based on the detected variable dependency problem, marking the corresponding data flow in the data flow view; The variable dependency problem includes one or more of the following: too long dependency chain, redundant variable dependency, invalid attribute dependency and circular dependency.

9. A data flow visualization device for a front-end application framework, characterized in that: The device comprises: The acquisition module is used to obtain the path information of each variable of the target project based on the front-end application framework and the variable dependency relationship of each component; A processing module, configured to obtain data flow information between each component and dependent variables based on the path information of each variable and the variable dependency relationship of each component; A generation module is used to generate a data flow view of the target project based on the data flow information between the components and the dependent variables.

10. A network device, characterized in that: include: A processor and a memory for storing a computer program that can be run on the processor, wherein the processor, when running the computer program, executes the steps of the method according to any one of claims 1 to 8.

11. A storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.

12. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.

Images