WO2024046313A1 - Visual processing method, apparatus, and system for front-end service logic - Google Patents

Abstract

Embodiments of the present application disclose a visual processing method, apparatus, and system for front-end service logic. The method comprises: acquiring pre-compiled data of a front-end service logic file, the pre-compiled data comprising logic data of a component; updating original data in the component on the basis of the pre-compiled data corresponding to the component, rendering a plurality of updated components, and obtaining a service display page; and setting a visual identifier for a document object model obtained by rendering the updated component in the service display page, the document object model corresponding to the visual identifier triggering and displaying the logic data of the component corresponding to the document object model when the document object model is selected.

Description

A visual processing method, device and system for front-end business logic

This application claims priority to the Chinese patent application with application number 202211059031.5, which was submitted to the China Patent Office on August 30, 2022. The entire content of this application is incorporated into this application by reference.

Technical field

The embodiments of the present application relate to the field of computer technology, for example, to a visual processing method, device and system for front-end business logic.

Background technique

In the development process of enterprise-level front-end applications, with the establishment of web standardization and the improvement of browser performance, front-end applications carry more and more complex business logic than ever before. Since enterprise-level application development is component-oriented, modules that are reused in multiple areas will be extracted into reusable components. As the complexity of the project increases, the logic carried by each component will also become complex.

In the process of front-end application development, there is a need to understand the logic details from the code (for example, subsequent developers do not understand the developed logic, or need to review the developed logic again, etc.). The source code needs to be read, and the operation is cumbersome and unintuitive. , and the viewing efficiency is low.

Contents of the invention

This application provides a visual processing method, device and system for front-end business logic to improve the visual review of front-end business logic code.

According to one aspect of this application, a visual processing method for front-end business logic is provided, including:

Obtain the precompiled data of the front-end business logic file, where the precompiled data includes the logical data of the component;

Update the original data in the component based on the precompiled data corresponding to the component, and render the updated multiple components to obtain a business display page;

Set the visual markup for the document object model obtained by rendering the business display page of the update component. identification, wherein when the document object model corresponding to the visual identification is selected, it triggers the display of logical data of the corresponding component of the document object model.

According to another aspect of this application, a visual processing device for front-end business logic is provided, including:

The precompiled data acquisition module is configured to obtain the precompiled data of the front-end business logic file, where the precompiled data includes the logical data of the component;

A data update module configured to update the original data in the component based on the precompiled data corresponding to the component;

The page rendering module is set to render multiple updated components to obtain a business display page;

The visualization processing module is configured to set a visual identifier for the document object model obtained by rendering the business display page by the update component, wherein the document object model corresponding to the visual identifier triggers the display of the document object when selected. The model corresponds to the logical data of the component.

According to another aspect of the present application, a front-end business logic visualization system is provided, including a server and a client, wherein the client includes a visualization plug-in and a processor;

The visualization plug-in is configured to send the source code of the front-end business logic file to the server, send a data request to the server, and receive precompiled data fed back by the server;

The server is configured to precompile the source code of the front-end business logic file to obtain precompiled data, wherein the precompiled data includes the logical data of the component;

The visualization plug-in is configured to update the original data in the component based on the precompiled data corresponding to the component, send the updated component data to the processor, and upon receiving a visual instruction, send the updated component data to the processor. The processor sends trigger instructions;

The processor is configured to render the updated multiple components to obtain a business display page, and when receiving a trigger instruction, set a visual identifier for the document object model obtained by rendering the business display page on the updated component. , wherein when the document object model corresponding to the visual identification is selected, it triggers the display of logical data of the corresponding component of the document object model.

According to another aspect of the present application, an electronic device is provided, the electronic device including:

at least one processor; and

a memory communicatively connected to the at least one processor; wherein,

The memory stores a computer program that can be executed by the at least one processor, and the computer program is executed by the at least one processor, so that the at least one processor can execute the method described in any embodiment of the present application. Visual processing method of front-end business logic.

According to another aspect of the present application, a computer-readable storage medium is provided. The computer-readable storage medium stores computer instructions, and the computer instructions are used to implement any of the embodiments of the present application when executed by a processor. Visual processing method of front-end business logic.

Description of drawings

Figure 1 is a flow chart of a visual processing method for front-end business logic provided by an embodiment of the present application;

Figure 2 is a schematic diagram of a service display page provided by an embodiment of the present application;

Figure 3 is a flow chart of another visual processing method of front-end business logic provided by an embodiment of the present application;

Figure 4 is a schematic structural diagram of a front-end business logic visual processing device provided by an embodiment of the present application;

Figure 5 is a schematic structural diagram of a front-end business logic visualization system provided by an embodiment of the present application;

Figure 6 is a schematic flow chart of another visual processing method of front-end business logic provided by an embodiment of the present application;

Figure 7 is a schematic diagram of abstract syntax tree parsing provided by an embodiment of the present application;

Figure 8 is a schematic diagram of the generation of instruction-type logical data provided by an embodiment of the present application;

Figure 9 is a schematic diagram of a rendering stage provided by an embodiment of the present application;

Figure 10 is a schematic structural diagram of an electronic device provided by an embodiment of the present application.

Detailed ways

In order to enable those in the technical field to better understand the solution of this application, the following will be implemented in conjunction with this application The accompanying drawings in the examples clearly and completely describe the technical solutions in the embodiments of the present application.

It should be noted that the terms "first", "second", etc. in the description and claims of this application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It is to be understood that the data so used are interchangeable under appropriate circumstances so that the embodiments of the application described herein can be practiced in sequences other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, e.g., a process, method, system, product, or apparatus that encompasses a series of steps or units and need not be limited to those explicitly listed. Those steps or elements may instead include other steps or elements not expressly listed or inherent to the process, method, product or apparatus.

Figure 1 is a flow chart of a visual processing method of front-end business logic provided by an embodiment of the present application. This embodiment can be applied to the situation where the front-end business logic is visually displayed in a business display page. This method can be implemented by the embodiment of the present application. The provided front-end business logic visual processing device is executed. The front-end business logic visual processing device can be implemented by software and/or hardware. The front-end business logic visual processing device can be configured on an electronic computing device, including the following steps:

S110. Obtain the precompiled data of the front-end business logic file, where the precompiled data includes the logical data of the component.

S120. Update the original data in the component based on the precompiled data corresponding to the component, and render the updated multiple components to obtain a business display page.

S130. Set a visual identifier for the document object model obtained by rendering the business display page by the update component. When the document object model corresponding to the visual identifier is selected, it triggers the display of the component corresponding to the document object model. logical data.

In this embodiment, the front-end business logic file may be a business logic file of a front-end application, where the front-end application may include but is not limited to a web application or an H5 application. In some embodiments, the front-end application may be an application developed based on a preset framework. For example, the preset framework may include but is not limited to the Vue framework. Taking the front-end application developed by the Vue framework as an example, the front-end business logic file can be a .vue file. Among them, each .vue file consists of three parts, namely the template part (template), the control part (script) and the style part (style). The template part is responsible for the rendering of the main view of the page. The control part is responsible for providing the data required for rendering the template part and responsible for some logical processing, such as ajax requests, interaction-related processing, etc. The style part is css (Cascading Style Sheets, cascading style sheets). ), responsible for page styling. It should be noted that in front-end applications developed by other frameworks, the front-end business logic file can include different parts, and there is no limit to this.

Since the browser can only load .js files, the .vue file needs to be compiled into a .js file through the default compiler vue-template-compiler. Since the control part itself is pure JavaScript code, no additional compilation is required for this part. The core of the compiler processing is to compile the template part into a pure JavaScript function render. Then the component will execute the render function to generate a virtual DOM before being mounted on the page, which will then be rendered into a real DOM element by Vue's runtime module, so that it can be displayed on the browser. Each .vue file will eventually be executed into an instance vm of a component (i.e. VueComponent). The vm object includes the _vnode object, which stores the return value of the component render function, that is, the virtual DOM (Document Object Model). model), is a pure JavaScript object.

For example, the virtual DOM in the component instance can be as follows:

vnode:VNode

tag: "div"

data attribute:undefined

children:Array(2)

text:undefined

elm:<div>…<div>

ns:undefined

…

It should be noted that in the compilation method of the above vue-template-compiler encoder, the virtual DOM does not include logical data (that is, there is no logical data after the data attribute), making the business display page rendered based on the above virtual DOM impossible. Visual display of logical data and corresponding operations Personnel needs to query logical data from the source code of the front-end business logic file.

In view of the above technical problems, in this application, the source code of the front-end business logic file is pre-compiled to obtain pre-compiled data including logical data, so that the business display page obtained by rendering the pre-compiled data can realize the processing of the front-end business logic file. Logical data is displayed visually. It should be noted that in this embodiment, the generation method of the precompiled data and the execution subject that executes the precompiled process are not limited, as long as the precompiled data containing logical data can be obtained.

The original data of the front-end business logic file of each component does not include logical data. The original data of the front-end business logic file can be the original compiled data obtained through regular compilation based on the source code of the front-end business logic file. The original compiled data includes the original Rendering function, the original rendering function does not include logical data. In this embodiment, before rendering the component instance, the original data of the corresponding component is updated through precompiled data, and the component instance is rendered based on the precompiled data of the component to obtain a business display page that can visualize logical data.

Optionally, match the precompiled data with the component, and update the data of the successfully matched component, for example, replace the original data of the component based on the precompiled data. For example, replace the component that does not contain logical data through the render function that contains logical data. render function. In some embodiments, the matching of precompiled data and components may be achieved through component identifiers or through path data matching.

Based on the above embodiment, the path summary data of the precompiled data is generated during the precompilation process of the original data. The path summary data of the precompiled data includes the precompiled data and the corresponding relationship between the path data. For example, the path summary data rendermap of the precompiled data can be stored in the form of a key-value pair. For example, the path data of the precompiled data is stored in the key and the precompiled data is stored in the value. Correspondingly, the precompiled data and corresponding path data can be obtained by obtaining the path summary data of the precompiled data.

Optionally, updating the original data in the component based on the precompiled data corresponding to the component includes: when the component executes the hook function, obtain the current path data of the component, and when the current path data of the component is in the path If the matching in the summary data is successful, the original data in the component is updated based on the precompiled data corresponding to the component.

In this embodiment, the timing of the component executing the hook function is detected. When it is detected that the component executes the hook function, the current path data of the component is obtained. For example, when the component executes the created hook function, the __file attribute information of the component is obtained. , the __file attribute information includes the current path data of the component, and matches the current path data of the component with the path summary data of the precompiled data. If the current path data and any path data of the path summary data match successfully, it indicates that the The component is a custom component in the front-end business. The custom component can display logical data visually, and replace the original data of the component with the precompiled data corresponding to the successfully matched path data.

It should be noted that the components used to render the business display page include custom components and non-custom components. The non-custom component can be a third-party component. The logical data of the non-custom component cannot be obtained. Accordingly, it cannot be processed. Non-custom components perform visual display of logical data. Correspondingly, the components used to render the business display page include custom components after data update and non-custom components without data update. By rendering each of the above components, the business display page is obtained.

Optionally, rendering multiple updated components to obtain a business display page includes: obtaining precoding data of components in the front-end business, executing the precoding data, and obtaining component instances. The component instances include corresponding At least one virtual document object model; traverse the virtual document object model in the component instance, and render the document object model in the business display page.

In this embodiment, the preset field position of the precoded data of the component is set to the logical data of the component. During the process of executing the precoded data, the logical data in the precoded data is injected into the virtual document object model of the component instance. In the example, after splicing the logical data to the above-mentioned "data attribute", a virtual DOM including the logical data is obtained. Execute the precoded data of the custom component and the original data of the non-custom component respectively to obtain each component instance, that is, the updated component instance and the non-updated component instance. Any component instance can include multiple virtual DOMs, and there can be a parent-child relationship between different virtual DOMs. Each virtual DOM corresponds to a real DOM in the business display page. Each virtual DOM of each component instance is traversed, and each real DOM in the business display page is rendered. Correspondingly, the business display page is obtained.

After traversing each virtual DOM and rendering to obtain the real DOM in the business display page, you can also It is a visual processing of custom components. The visual processing may be to set a visual identification on the real DOM corresponding to the custom component on the business display page, so that the operator can determine the custom component in the business display page through the visual identification. Among them, the custom component can be a component that updates precompiled data, that is, an update component.

In some embodiments, a meta tag may be set for the data attribute in which logical data is injected, so as to quickly identify the virtual DOM in which logical data exists during the traversal process of the virtual DOM. Correspondingly, the virtual DOM set with meta tags and the corresponding real DOM settings can be visualized.

In some embodiments, setting a visual identifier for the document object model obtained by the update component when rendering the business display page includes: setting a mask layer for the document object model obtained when the update component renders the business display page. . Among them, a layer can be set on the document object model (real DOM) to block the document object model and set a visual mark. Among them, the mask layer can be a color different from the document object model or the business display page to facilitate visual prompts. Optionally, the size of the mask layer may be determined based on the size of the document object model, where the size of the mask layer may be greater than or equal to the size of the document object model. Optionally, the shape of the mask layer may be consistent with the shape of the document object model. This embodiment does not limit the shape of the mask layer. Mask layers of different document object models can be displayed in different forms. For example, see Figure 2, which is a schematic diagram of a service display page provided by an embodiment of the present application. Among them, Figure 2 includes some document object models with visual identifiers and some document object models without visual identifiers. The document object models without visual identifiers can be document object models that do not have logical data and/or The document object model corresponding to the non-custom component of the logical data cannot be obtained.

In some embodiments, setting a visual identifier for the document object model obtained by rendering the business display page by the update component includes: setting a visual identifier at a preset position of the document object model obtained by rendering the business display page by the update component. Set a preset mark at. Optionally, the preset mark may be a graphical mark of a preset shape and/or a preset color (for example, including but not limited to a triangle mark, a five-pointed star mark or a red circle mark, etc.), or a preset symbol mark ( For example, including but not limited to tags such as "!", "*" or fixed numbers or strings, etc.), or serialization tags (such as but not limited to 123, serialization tags of ABC, etc.), etc. For example, see Figure 2. In Figure 2, each document object model containing logical data is set with a serialization mark. The serialization mark can be determined according to the traversal order of the corresponding virtual DOM.

In some embodiments, the document object model setting visual identification may include both a mask layer and a preset mark.

Based on the above embodiment, after obtaining the business display page, the method further includes: setting a floating window at a preset position of the document object model in the business display page, and the floating window is used to display logical data corresponding to the document object model. By setting up floating windows for document object models with logical data, the logical data of each document object model can be displayed synchronously, making it easier for operating users to intuitively view the logical data of each document object model. In some embodiments, the floating window can be closed to close the floating window that does not need to be viewed or the floating window that has been viewed according to the operator's needs.

On the basis of the above embodiment, when the document object model set with visual identification is selected, its corresponding logical data is displayed, so that the operator can visually view each document object model set with visual identification on the business display page. The logical data does not need to be viewed in the source code of the front-end business logic file, which simplifies the viewing method of logical data and improves the viewing efficiency of logical data. At the same time, targeted logical data can be displayed according to the operator's viewing needs.

Optionally, the method further includes: when a visual operation on any of the document object models is detected, reading the logical data of the corresponding component of the document object model and displaying it based on a preset window. In this embodiment, it is determined that the document object model is selected by detecting the user's visual operation on the document object model. The visual operation on any of the document object models includes but is not limited to clicking on the document object model, clicking on the document object model, and clicking on the document object model. The selection of the visual identification of the object model, the mouse or cursor being located in the detection range of the document object model, etc.

Detecting visual operations on any of the document object models, generating visual instructions for logical data, executing the visual instructions, and reading logical data from the virtual DOM corresponding to the document object model, for example, reading the virtual DOM corresponding to the document object model. data attribute data. Display the read logical data on the business display page. Optionally, you can set a logical data display area on the business display page. Domain displays the logical data of the selected document object model in the display area. Optionally, display the logical data of the selected document object model in the form of a pop-up window or a floating window. In this embodiment, the display method of the logical data of the document object model is not limited. It can be visually displayed on the business display page, and there is no limitation on this.

Based on the above embodiment, before step S130, it may also include receiving a visualization instruction to enter the visualization mode, that is, executing step S130. In the visualization mode, the visual identification and logical data of the document object model may be displayed. After step S130, it may also include receiving a cancellation instruction to exit the visualization mode to avoid the impact of the visualization mode on other operations.

In some embodiments, the business display page may be provided with a visual switching control, and the visual switching control may be implemented by one or two controls. The visualization switch control is set to realize the entry and exit of the visualization mode.

The technical solution provided by this embodiment is to update the original data of each component with pre-compiled data containing logical data, and perform page rendering through the pre-compiled data of each component, so as to set the document object model of each document in the rendered business display page. Visual identification, through which the document object model with logical data can be intuitively determined in the business display page. At the same time, each document object model in the business display page has the display function of logical data. When the document object model is triggered, The corresponding logical data can be visually displayed without querying the source code of the front-end business logic file. Logical data query can be realized on the business display page, which simplifies the query method of logical data and improves the query efficiency of logical data, especially When multiple people collaborate on development or new people take over the project, it is convenient to quickly check the development progress and the editing method of logical data.

In the above embodiments, the visual display of logical data relies on the pre-compilation process of the original data. In some embodiments, the client obtains the source code of the front-end business logic file, pre-compiles the source code, and obtains the pre-compile process. Compile data. In some embodiments, the client sends the source code of the front-end business logic file to the server, and the server pre-compiles the source code to obtain pre-compiled data. The server has strong computing power, which can improve the efficiency of the pre-compilation process.

For example, see FIG. 3 , which is a flow chart of another visual processing method of front-end business logic provided by an embodiment of the present application. The method includes the following steps:

S210. Send the source code of the front-end business logic file to the server, so that the server pre-compiles the source code of the front-end business logic file.

S220: Send a precompiled data request to the server, and receive the precompiled data fed back by the server.

S230. Update the original data in the component based on the precompiled data corresponding to the component, and render the updated multiple components to obtain a business display page.

S240. Set a visual identifier for the document object model obtained by rendering the business display page by the update component, wherein when the document object model corresponding to the visual identifier is selected, it triggers the display of the component corresponding to the document object model. logical data.

The generation process of precompiled data is the same on the client and server. The generation method of precompiled data includes: obtaining the source code of the front-end business logic file, converting the first code part in the source code into the first syntax tree, The first syntax tree includes instruction type logical nodes and computational attribute logical nodes; logical data of the instruction type logical nodes and the computational attribute logical nodes are extracted respectively, and corresponding precompiled data is generated.

The front-end application in this embodiment is the front-end application of the Vue framework. Correspondingly, the pre-compilation process of the source code of the front-end business logic file is to pass the information related to the logic control part in the template part template and control part script of the source code through the object Write the string form into the rendering function (i.e. render function) to get the precompiled data. Both the template part and the control part involve the front-end business logic: the template part includes the use of v-if, v-show, v-for and other instructions to mount, display, loop and other instruction logic of elements; the control part includes Computed attribute logic is used to control the data required for template rendering by using the computed attribute. That is, the template part also includes rendering data that depends on the calculated attribute logic.

Since the control part script itself is pure JavaScript code, this part does not require additional compilation. Correspondingly, the first code part in the source code is the template part. Convert the template part template into a first syntax tree. The first syntax tree includes a plurality of nodes, and the plurality of nodes include instruction class logic. Edit nodes and computed attribute logical nodes.

The instruction logic in the template part includes directly using v-if to control element mounting, directly using v-show to control whether elements are displayed, and using v-if, v-else-if, and v-else nested logic. Correspondingly, for instruction type logical nodes, each node corresponds to an el object, and the logical information on the el object is parsed to obtain the logical data of each instruction type logical node.

In some embodiments, extracting the logical data of the instruction type logical node includes: traversing the instruction type logical node in the first syntax tree, and when the node object of the instruction type logical node includes an instruction class identifier. Next, read the instruction type logical data in the node object.

Optionally, the nodes in the first syntax tree may be distinguished between instruction type logical nodes and computational attribute logical nodes, and the instruction type logical nodes are traversed to obtain instruction type logical data of the instruction type logical nodes. Optionally, the nodes in the first syntax tree do not have a distinction between instruction type logical nodes and computed attribute logical nodes. The nodes in the first syntax tree are traversed, and whether the nodes are instruction type logical nodes is determined by determining whether there is an instruction class identifier. And when the instruction class identifier exists in the node object, the instruction class logical data of the instruction class logical node is obtained.

For example, instruction class identifiers may include but are not limited to el.if and el.show. Correspondingly, reading the instruction class logical data in the node object includes: if the instruction class identifier of the node object includes el.if, then based on the node object, the parent node object of the node object, and the The logical data of the sibling node object of the node object is obtained to obtain the instruction type logical data of the node object; if the instruction type identifier of the node object includes el.show, the expression in the V-show element is read as the node The instruction-type logical data of the object.

When the node object, that is, the el object, includes the instruction class identifier el.if, it is determined whether the parent node of the node object has an if attribute, and whether the node object has sibling nodes of el.elseif and el.else. When the parent node does not have an if attribute and there are no sibling nodes of el.elseif and el.else, the logical information in the el object is extracted, and the extracted logical information is determined as the instruction type logical data of the node. When the parent node has an if attribute, extract the logical information in the parent node's if attribute. When the node object has el.elseif and/or el.else's sibling nodes, extract the sibling nodes el.elseif and el.elseif. /or logical information in el.else. After negating the extracted logical information of the parent node and/or the logical data of the sibling nodes, they are spliced with the logical information in the el object to obtain the instruction type logical data of the node.

When the node object, that is, the el object, includes the instruction class identifier el.show, the expression in the V-show element is read as the instruction class logical data of the node object.

In some embodiments, extracting the logical data of the computed attribute logical node includes: traversing the computed attribute logical node in the first syntax tree, and matching the node information of the computed attribute logical node in the preset matching data. If successful, read the attribute name of the calculated attribute logical node as logical data. Among them, the preset matching data is a summary of the information of the calculated attribute logic obtained by parsing the control part script. When the node information of any node in the first syntax tree is successfully matched in the preset matching data, it indicates that the corresponding calculated attribute logic data can be read depending on the calculated attribute logic in the control part script.

Optionally, the node information of the calculated attribute logical node includes the attribute name of the component attribute or the element content of the text element. When the node object corresponds to a component, read the component attributes of the node object (such as the attrs attribute), and match the attribute names of the component attributes in the preset matching data. If the matching is successful, it indicates that the node object depends on Computed attribute logic can use the matched attribute name as calculated attribute logic data. When the node object corresponds to a text element, read the element content of the text element and match the element content of the text element in the preset matching data. If the match is successful, it indicates that the node object relies on calculated attribute logic. The attribute name matched to the node information can be used as calculated attribute logical data.

On the basis of the above embodiment, the preset matching data is generated based on the control part script in the source code of the front-end business logic file, wherein the method for generating the preset matching data includes: converting the second code part in the source code Convert to a second syntax tree, traverse the node objects in the second syntax tree, and when the corresponding function of any node object includes a specific statement block, generate a prediction based on the calculated attribute name and corresponding function of the node object. Assume matching data, namely computedmap.

Intercept the second code part, that is, the control part script, from the source code of the front-end business logic file, execute the second code part, and generate a js object, that is, the computed object, which contains Include computed function. The computed object includes key-value pairs, where key is the computed attribute name and value is the computed function. Traverse the computed object, perform abstract syntax tree analysis through the babel tool, and obtain the second syntax tree.

Traverse the node objects in the second syntax tree. When the computed function of any node object includes a specific statement block such as Switch statement SwitchStatement, ifelse statement IfStatement, ternary expression ConditionalExpression, etc., generate a preset match based on the calculated attribute name of the node object. data. For example, the calculated attribute name of the node object containing a specific statement block is used as the key value, and true is used as the value value to generate preset matching data.

Through the above embodiment, the logical data in the front-end business logic file is obtained, and corresponding precompiled data is generated based on each logical data. For example, an initial function may be created, and the obtained logical data may be added to a preset field of the initial function to obtain precompiled data. In this embodiment, the precompiled data may be a recompiled render function, and the render function may be a _c function. The first parameter of the _c function is the tag name of the element, and the second parameter is a piece of data or a An object. If it is an object, it represents some attribute data of the tag, such as some static styles, class names, element ids, etc. These data will be completely retained in the data attribute of the object in the virtual DOM of the component. In this embodiment, for any object node, create a _c function, set the label name of the object node in the first parameter position of the _c function, and set the logical data of the object node in the second parameter position of the _c function. parameter position to obtain the corresponding precompiled data.

The technical solution provided by this embodiment is to pre-compile the source code to obtain pre-compiled data that can realize the visual display of logical data. In the pre-compilation process, through abstract syntax tree analysis of the source code, the abstract syntax tree corresponding to the source code is obtained, and based on the abstract syntax tree, the instruction type logical data and computational attribute logical data are extracted, and through the preset compilation method And the above logical data obtains corresponding precompiled data to extract the data basis for the visual display of logical data.

On the basis of the above embodiments, embodiments of the present application also provide a visual processing device for front-end business logic. See Figure 4. Figure 4 is a visualization of front-end business logic provided by embodiments of the present application. Structural diagram of the processing device. The device includes:

The precompiled data acquisition module 310 is configured to obtain precompiled data of the front-end business logic file, where the precompiled data includes the logical data of the component;

The data update module 320 is configured to update the original data in the component based on the precompiled data corresponding to the component;

The page rendering module 330 is configured to render the updated multiple components to obtain a business display page;

The visualization processing module 340 is configured to set a visual identifier for the document object model obtained by the update component when rendering the business display page, wherein the document object model corresponding to the visual identifier triggers the display of the document when selected. The object model corresponds to the logical data of the component.

Optionally, the visualization processing module 340 is configured to: set a mask layer on the document object model obtained by rendering the business display page by the update component; and/or,

The update component sets a preset mark at a preset position of the document object model obtained by rendering the business display page.

Optionally, the device also includes:

The logical data display module is configured to read the logical data of the corresponding component of the document object model and display it based on a preset window when a visual operation on any of the document object models is detected.

Optionally, the device also includes:

The path summary data acquisition module is configured to obtain the path summary data of the precompiled data;

The data update module 320 is configured to: when the component executes the hook function, obtain the current path data of the component, and when the current path data of the component is successfully matched in the path summary data, based on the precompilation corresponding to the component Data updates the original data in said component.

Optionally, the page rendering module 330 is set to:

Obtain the precoding data of each component in the front-end business, execute the precoding data, and obtain each component instance, and the component instance includes at least one corresponding virtual document object model;

Each virtual document object model in the component instance is traversed, and each document object model in the business display page is rendered.

Optionally, the device also includes: a precompiled data generation module. The precompiled data generation module includes:

The first syntax tree generation submodule is configured to obtain the source code of the front-end business logic file, and convert the first code part in the source code into a first syntax tree. The first syntax tree includes instruction class logical nodes and Computed attribute logical node;

The logical data acquisition submodule is configured to respectively extract the logical data of the instruction type logical node and the computational attribute logical node;

The data compilation submodule is set to generate corresponding precompiled data.

Optionally, the logical data acquisition sub-module is configured to: traverse each instruction class logical node in the first syntax tree, and when the node object of the instruction class logical node includes an instruction class identifier, read the instruction class identifier. Instruction-type logical data in node objects.

Optional, the logical data acquisition submodule is set to:

If the instruction class identifier of the node object includes el.if, then the instruction class of the node object is obtained based on the logical data of the node object, the parent node object of the node object, and the sibling node object of the node object. logical data;

If the instruction class identifier of the node object includes el.show, the expression in the V-show element is read as the instruction class logical data of the node object.

Optional, the logical data acquisition submodule is set to:

Traverse each calculated attribute logical node in the first syntax tree, and when the node information of the calculated attribute logical node is successfully matched in the preset matching data, read the attribute name of the calculated attribute logical node as the logical data.

Optionally, the node information of the calculated attribute logical node includes the attribute name of the component attribute or the element content of the text element.

Optionally, the precompiled data generation module also includes:

The preset matching data generation sub-module is configured to convert the second code part in the source code into The second syntax tree traverses each node object in the second syntax tree, and when the corresponding function of any node object includes a specific statement block, generates a preset match based on the calculated attribute name of the node object and the corresponding function. data.

The visual processing device for front-end business logic provided by the embodiments of this application can execute the visual processing method of front-end business logic provided by any embodiment of this application, and has corresponding functional modules for executing the visual processing method of front-end business logic.

Based on the above embodiments, embodiments of the present application also provide a front-end business logic visualization system. See Figure 5 , which is a schematic structural diagram of a front-end business logic visualization system provided by embodiments of the present application. The front-end business logic visualization system includes a server 410 and a client 420, where the client includes a visualization plug-in 421 and a processor 422;

Among them, the visualization plug-in 421 is configured to generate the source code of the front-end business logic file to the server 410, send a data request to the server 410, and receive the precompiled data fed back by the server 410;

The server 410 is configured to precompile the source code of the front-end business logic file to obtain precompiled data, where the precompiled data includes the logical data of the component;

The visualization plug-in 421 is configured to update the original data in the component based on the precompiled data corresponding to the component, and send the updated component data to the processor 422, and when receiving the visualization instruction, send a trigger instruction to the processor 422;

The processor 422 is configured to render the updated multiple components to obtain a business display page, and upon receiving a trigger instruction, set a visual identifier for the document object model obtained by rendering the business display page with the updated component, wherein, When the visual identifier is selected, it triggers the display of logical data of the corresponding component of the document object model.

In this embodiment, the source code is pre-compiled through the server, and the processing efficiency of the pre-compilation is improved based on the powerful computing power of the server. At the same time, a visualization plug-in is set on the client to replace the original data based on precompiled data containing logical data, so that the processor renders the page based on the updated precompiled data. There is no need to carry out secondary development of the client's processor, by injecting visual Implemented in the form of plug-ins to reduce implementation costs.

The visualization plug-in can receive an input visualization instruction, or detect a user-input visualization operation, send a visualization trigger signal to the processor so that the processor enters the visualization mode, and the visualization plug-in can receive an input cancellation visualization instruction, or detect a user-input visualization To exit the operation, send a visual exit trigger signal to the processor so that the processor exits the visualization mode to meet the different needs of operating users.

Based on the above embodiments, embodiments of the present application provide an optional example of visual processing of front-end business logic. See Figure 6. Figure 6 is another method of visual processing of front-end business logic provided by embodiments of the present application. process diagram. In Figure 6, the server performs pre-compilation processing of the source code, and obtains pre-compiled data (i.e., compilation results) and sends it to the client. The plug-in (i.e., visualization plug-in) pre-injected by the client receives the pre-compiled data and generates data based on the pre-compiled data. The new rendering function replaces the original rendering function. The client's processor performs visual processing of logical data, obtains component instances, traverses each virtual DOM object in the component instance, and adds a floating window to the corresponding real DOM, and displays the real DOM through the floating window. Logical data corresponding to dom.

The process of precompiling the source code on the server side can be as follows: intercepting the template part and the control part script respectively from the source code of each .vue file, and processing the control part script to obtain the preset matching data, that is, computedMap. For example, the obtained script part is copied into the memory to become a js object, and then the computed value of the object is obtained; the computed object is traversed, the key of the object is the calculated attribute name, the value is a function, the function is serialized, and then Use the babel tool to perform abstract syntax tree analysis; deeply traverse the parsed syntax tree object. If there are SwitchStatement, IfStatement, and ConditionalExpression statement blocks, add the corresponding calculated attribute key value to the computedMap, and set the value value to true to indicate the calculated attribute. There is calculation logic in it. Refer to Figure 7, which is a schematic diagram of abstract syntax tree parsing provided by an embodiment of the present application.

The logic of the template part mainly consists of three instruction types: directly using v-if to control element mounting, directly using v-show to control whether elements are displayed, and using v-if, v-else-if, and v-else for embedding. set of logic; and the parts that rely on computed properties. Convert the template part template into an abstract syntax tree according to The hierarchical relationship generates compiled code, and each node corresponds to an el object. Referring to Figure 8, Figure 8 is a schematic diagram of the generation of instruction type logical data provided by an embodiment of the present application. Determine whether the el object (i.e. node object) of each element (i.e. node) exists the instruction class identifier el.if. If so, determine whether the if attribute of the parent node of the el object exists. If it exists, change the if logic of the el object. The information is spliced with the if logical information of the parent node of the el object; it is judged whether the el object has sibling nodes el.elseif or el.else. If so, the el.elseif or el.else expression (i.e. logical information) of each sibling node is After negation, it is spliced after the logical information of the el object, or after the splicing information of the if logical information of the el object and the if logical information of the parent node of the el object, to obtain the logical data of the el object. There is no instruction class identifier el.if in the el object, and it is judged whether the show identifier is included in el.directives. If so, the V-show expression (ie, logical information) is used as logical data.

For the part of the template part that relies on calculated attributes, get the attrs attribute in el. If there is an attribute name matching the computedMap in the object, splice it after data: data+=`computed:${attribute name},`; If el is a text element and its element content matches the attribute name in computedMap, then splice it after data: data+=`computed:${attribute name},`. If the match is successful, the calculated attribute name matched in computedMap will be used as logical data.

Use the label name of the el object as the first parameter of the _c function, and use the logical data of the el object as the second parameter to obtain a new rendering function and further obtain precompiled data.

The visualization plug-in takes over the rendering phase, see Figure 9. Figure 9 is a schematic diagram of a rendering phase provided by an embodiment of the present application. Vue plug-in (that is, visualization plug-in) injection, when detecting that the component executes the create hook function, obtains the _file attribute of the component, that is, the current path data of the component. Match the _file attribute in renderMap. renderMap stores the correspondence between the render function and its path. If the file attribute is successfully matched in renderMap, replace the component itself with the new rendering function in renderMap (the rendering function in the precompiled data). render function. And after the data update is completed, the processor is triggered to render the component and generate the real DOM.

During the rendering process, logical data is injected into the data of each virtual DOM. Each virtual DOM corresponds to a real DOM on the page, and the element bits of the real DOM can be accurately obtained. Set. The visualization phase starts from the root component instance corresponding to the root node of the current page, recursively compiles the nodes with meta tags in the data in the _vnode object in the sub-component, and then appends an absolute layout mask layer after these nodes to implement the The logic control elements are visualized, and the logic details are also recorded in the logic data. The implementation logic can be obtained and viewed in the logic data.

FIG. 10 shows a schematic structural diagram of an electronic device 10 that can be used to implement embodiments of the present application. Electronic devices are intended to refer to various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. Electronic devices may also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smart phones, wearable devices (eg, helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are examples only and are not intended to limit the implementation of the present application as described and/or claimed herein.

As shown in Figure 10, the electronic device 10 includes at least one processor 11, and a memory communicatively connected to the at least one processor 11, such as a read-only memory (Read-Only Memory, ROM) 12, a random access memory (Random Access Memory, RAM) 13, etc., wherein the memory stores a computer program that can be executed by at least one processor, and the processor 11 can be loaded into the random access memory (RAM) according to the computer program stored in the read-only memory (ROM) 12 or from the storage unit 18. A computer program in RAM) 13 to perform various appropriate actions and processes. In the RAM 13, various programs and data required for the operation of the electronic device 10 can also be stored. The processor 11, the ROM 12 and the RAM 13 are connected to each other via the bus 14. An input/output (I/O) interface 15 is also connected to the bus 14 .

Multiple components in the electronic device 10 are connected to the I/O interface 15, including: an input unit 16, such as a keyboard, a mouse, etc.; an output unit 17, such as various types of displays, speakers, etc.; a storage unit 18, such as a magnetic disk, an optical disk, etc. etc.; and communication unit 19, such as network card, modem, wireless communication transceiver, etc. The communication unit 19 allows the electronic device 10 to exchange information/data with other devices through computer networks such as the Internet and/or various telecommunications networks.

Processor 11 may be a variety of general and/or special purpose processing components having processing and computing capabilities. deal with Some examples of the processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (Artificial Intelligence, AI) computing chips, various running machines Processor of learning model algorithm, digital signal processor (Digital Signal Processing, DSP), and any appropriate processor, controller, microcontroller, etc. The processor 11 executes various methods and processes described above, such as the visual processing method of front-end business logic.

In some embodiments, the visual processing method of front-end business logic can be implemented as a computer program, which is tangibly included in a computer-readable storage medium, such as the storage unit 18 . In some embodiments, part or all of the computer program may be loaded and/or installed onto the electronic device 10 via the ROM 12 and/or the communication unit 19. When the computer program is loaded into the RAM 13 and executed by the processor 11, one or more steps of the visual processing method of the front-end business logic described above may be performed. Alternatively, in other embodiments, the processor 11 may be configured to execute the visual processing method of the front-end business logic in any other suitable manner (eg, by means of firmware).

Various implementations of the systems and techniques described above may be implemented in digital electronic circuit systems, integrated circuit systems, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Parts (ASSP), System on Chip (SOC), Complex Programmable Logic Device (CPLD), computer hardware, firmware, software, and/or they implemented in a combination. These various embodiments may include implementation in one or more computer programs executable and/or interpreted on a programmable system including at least one programmable processor, the programmable processor The processor, which may be a special purpose or general purpose programmable processor, may receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device. An output device.

Computer programs for implementing the methods of the present application may be written in any combination of one or more programming languages. These computer programs may be provided for general-purpose computers, special-purpose computers, or other programmable The computer program, when executed by the processor, causes the functions/operations specified in the flowcharts and/or block diagrams to be implemented. A computer program may execute entirely on the machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.

In the context of this application, a computer-readable storage medium may be a tangible medium that may contain or store a computer program for use by or in connection with an instruction execution system, apparatus, or device. Computer-readable storage media may include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or devices, or any suitable combination of the foregoing. Alternatively, the computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media would include electrical connections based on one or more wires, laptop disks, hard drives, random access memory (RAM), read only memory (ROM), erasable programmable read only memory (EPROM (Erasable Programmable Read-Only Memory) or flash memory), optical fiber, portable compact disk read-only memory (Compact Disc Read-Only Memory, CD-ROM), optical storage device, magnetic storage device, or the above content Any suitable combination.

In order to provide interaction with a user, the systems and techniques described herein may be implemented on an electronic device having: a display device (e.g., CRT (Cathode Ray Tube, cathode ray tube) or LCD) for displaying information to the user (Liquid Crystal Display, LCD monitor); and a keyboard and pointing device (e.g., a mouse or a trackball) through which a user can provide input to the electronic device. Other kinds of devices may also be used to provide interaction with the user; for example, the feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and may be provided in any form, including Acoustic input, voice input or tactile input) to receive input from the user.

The systems and techniques described herein may be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., A user's computer with a graphical user interface or web browser through which the user can interact with the systems and systems described herein technology implementations interact), or in a computing system that includes any combination of such backend components, middleware components, or front-end components. The components of the system may be interconnected by any form or medium of digital data communication (eg, a communications network). Examples of communication networks include: Local Area Network (LAN), Wide Area Network (WAN), blockchain network, and the Internet.

Computing systems may include clients and servers. Clients and servers are generally remote from each other and typically interact over a communications network. The relationship of client and server is created by computer programs running on corresponding computers and having a client-server relationship with each other. The server can be a cloud server, also known as cloud computing server or cloud host. It is a host product in the cloud computing service system to solve the problems that exist in traditional physical host and virtual private server (VPS) services. It has the disadvantages of difficult management and weak business scalability.

It should be understood that various forms of the process shown above may be used, with steps reordered, added or deleted. For example, each step described in this application can be executed in parallel, sequentially, or in a different order. As long as the desired results of the technical solution of this application can be achieved, there is no limitation here.

The above-mentioned specific embodiments do not constitute a limitation on the scope of protection of the present application. It will be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions are possible depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of this application shall be included in the protection scope of this application.

Note that the above are only optional embodiments and the technical principles used in this application. Those skilled in the art will understand that the present application is not limited to the specific embodiments described herein, and that various obvious changes, readjustments and substitutions can be made by those skilled in the art without departing from the scope of the present application. Therefore, although the present application has been described in detail through the above embodiments, the present application is not limited to the above embodiments, and may also include more other equivalent embodiments without departing from the concept of the present application, and the present application The scope is determined by the scope of the appended claims.

Claims (15)

1. A visual processing method for front-end business logic, including:

   Obtain the precompiled data of the front-end business logic file, where the precompiled data includes the logical data of the component;

   Update the original data in the component based on the precompiled data corresponding to the component, and render the updated multiple components to obtain a business display page;

   Set a visual identifier for the document object model rendered by the update component on the business display page, where, when the document object model corresponding to the visual identifier is selected, it triggers the display of the logical data of the corresponding component of the document object model. .
2. The method according to claim 1, wherein setting a visual identifier for the document object model obtained by rendering the business display page by the update component includes at least one of the following:

   Set a mask layer on the document object model obtained by rendering the business display page by the update component;

   The update component sets a preset mark at a preset position of the document object model obtained by rendering the business display page.
3. The method of claim 1, further comprising:

   In response to detecting a visual operation on any of the document object models, read the logical data of the corresponding component of the document object model and display it based on a preset window.
4. The method of claim 1, further comprising:

   Obtain the path summary data of the precompiled data;

   The updating of the original data in the component based on the precompiled data corresponding to the component includes:

   When the component executes the hook function, the current path data of the component is obtained. In response to the current path data of the component being successfully matched in the path summary data, the component is updated based on the precompiled data corresponding to the component. original data in .
5. The method according to claim 1, wherein rendering the updated multiple components to obtain a business display page includes:

   Obtain the precoding data of the component in the front-end business, execute the precoding data to obtain the component instance, The component instance includes at least one corresponding virtual document object model;

   The virtual document object model in the component instance is traversed, and the document object model in the business display page is obtained by rendering.
6. The method according to claim 1, wherein the method of generating the precompiled data includes:

   Obtain the source code of the front-end business logic file, and convert the first code part in the source code into a first syntax tree. The first syntax tree includes instruction type logical nodes and calculated attribute logical nodes;

   Extract the logical data of the instruction type logical node and the computational attribute logical node respectively, and generate corresponding precompiled data.
7. The method according to claim 6, wherein the extracting the logical data of the instruction type logical node includes:

   Traverse the instruction class logical nodes in the first syntax tree, and in response to the instruction class identifier included in the node object of the instruction class logical node, read the instruction class logic data in the node object.
8. The method according to claim 7, wherein reading the instruction type logical data in the node object includes:

   In response to the instruction class identifier of the node object including el.if, based on the logical data of the node object, the parent node object of the node object, and the sibling node object of the node object, the instruction class of the node object is obtained logical data;

   In response to the instruction class identifier of the node object including el.show, the expression in the V-show element is read as the instruction class logical data of the node object.
9. The method according to claim 6, wherein the extracting the logical data of the calculated attribute logical node includes:

   Traverse the computed attribute logical nodes in the first syntax tree, and in response to the node information of the computed attribute logical node matching successfully in the preset matching data, read the attribute name of the computed attribute logical node as logical data.
10. The method according to claim 9, wherein the node information of the calculated attribute logical node includes an attribute name of a component attribute or an element content of a text element.
11. The method according to claim 9, wherein the method for generating the preset matching data includes:

    Convert the second code part in the source code into a second syntax tree, traverse the node objects in the second syntax tree, and in response to the corresponding function of any node object including a specific statement block, based on the The calculated attribute name of the node object and the corresponding function generate preset matching data.
12. A visual processing device for front-end business logic, including:

    The precompiled data acquisition module is configured to obtain the precompiled data of the front-end business logic file, where the precompiled data includes the logical data of the component;

    A data update module configured to update the original data in the component based on the precompiled data corresponding to the component;

    The page rendering module is set to render multiple updated components to obtain a business display page;

    The visualization processing module is configured to set a visual identifier for the document object model obtained by rendering the business display page by the update component, wherein the document object model corresponding to the visual identifier triggers the display of the document object when selected. The model corresponds to the logical data of the component.
13. A front-end business logic visualization system, including a server and a client, wherein the client includes a visualization plug-in and a processor;

    The visualization plug-in is configured to send the source code of the front-end business logic file to the server, send a data request to the server, and receive precompiled data fed back by the server;

    The server is configured to precompile the source code of the front-end business logic file to obtain precompiled data, wherein the precompiled data includes the logical data of the component;

    The visualization plug-in is also configured to update the original data in the component based on the precompiled data corresponding to the component, send the updated component data to the processor, and upon receiving a visual instruction, send The processor sends a trigger instruction;

    The processor is configured to render a plurality of updated components to obtain a business display page, and upon receiving a trigger instruction, set a visual identifier for the document object model obtained by rendering the business display page on the updated component. , where the document object model corresponding to the visual identification is in When selected, the logical data of the corresponding component of the document object model is triggered to be displayed.
14. An electronic device including:

    at least one processor; and

    a memory communicatively connected to the at least one processor; wherein,

    The memory stores a computer program executable by the at least one processor, the computer program being executed by the at least one processor, so that the at least one processor can perform any one of claims 1-11 The visual processing method of front-end business logic.
15. A computer-readable storage medium that stores computer instructions, and the computer instructions are used to enable the processor to implement the visual processing of the front-end business logic described in any one of claims 1-11 when executed. method.