CN115016770A

CN115016770A - Data processing method, device, equipment and storage medium

Info

Publication number: CN115016770A
Application number: CN202210769180.4A
Authority: CN
Inventors: 毛昱宇; 殷凇; 周建辉
Original assignee: WeBank Co Ltd
Current assignee: WeBank Co Ltd
Priority date: 2022-06-30
Filing date: 2022-06-30
Publication date: 2022-09-06

Abstract

The application discloses a data processing method, a device, equipment and a storage medium, wherein the method is applied to a server and comprises the following steps: obtaining a hierarchical tracking tree of a browser style; sending the hierarchical tracking tree to a terminal device through a first connection; so that the terminal equipment obtains style modification information according to the hierarchical tracking tree; receiving the style modification information sent by the terminal equipment through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name; and acquiring the source file through the file path, replacing the declaration block corresponding to the selector name at the position of the declaration block in the source file with the target declaration block, and finishing the modification of the browser style. According to the scheme of the application, when the browser is subjected to style modification, the source code can be modified, and convenience in modification of the browser based on source code programming is improved.

Description

Data processing method, device, equipment and storage medium

Technical Field

The present application relates to the field of data processing technology, and relates to, but is not limited to, a data processing method, apparatus, device, and storage medium.

Background

With the rapid development of computer technology, more and more technologies are applied in the financial field, and the traditional financial industry is gradually changing to financial technology (Fintech), but higher requirements are also put forward on the technologies due to the requirements of the financial industry on safety and real-time performance.

For a browser for medium and large engineering development using a frame, after the source code is compiled, the source code needs to be compiled into executable code through a construction tool, and then the executable code is sent to the browser to be operated.

When the browser style is modified, if the executable code is directly modified on the browser side, because the operating code is a constructed product, a new constructed product is generated when the source code is constructed each time, and therefore if the source code is not modified, only the executable code is modified, the subsequent construction still cannot take effect, namely the style modification is invalid.

Disclosure of Invention

The application provides a data processing method and device, equipment and a storage medium, which can realize the modification of a source code when the style of a browser is modified, and improve the convenience of the modification of the browser based on source code programming.

The technical scheme of the application is realized as follows:

in a first aspect, the present application provides a data processing method, where the method is applied to a server, and the method includes:

obtaining a hierarchical tracking tree of a browser style; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style;

sending the hierarchical tracking tree to a terminal device through a first connection; so that the terminal equipment obtains style modification information according to the hierarchical tracking tree; the first connection is a connection which is established between the server and the terminal equipment and is used for carrying out style modification on a source code of a browser;

receiving the style modification information sent by the terminal equipment through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name;

and acquiring the source file through the file path, replacing the declaration block corresponding to the selector name at the position of the declaration block in the source file with the target declaration block, and finishing the modification of the browser style.

In a second aspect, the present application provides another data processing method, where the method is applied to a terminal device, and a browser runs on the terminal device; the method comprises the following steps:

receiving a browser-style hierarchical tracking tree sent by a server through a first connection; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style; determining b second type elements based on the operation of the user; b is greater than or equal to 1; sequentially searching for a relevant node of a first type corresponding to each of said b elements of a second type in said hierarchical tracking tree; determining pattern modification information based on the relevant first-type nodes; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name; and sending the style modification information to the server through the first connection, so that the server modifies the source code of the browser according to the style modification information.

In a third aspect, the present application provides a first data processing apparatus, where the first data processing apparatus is deployed on a server side, and the first data processing apparatus includes: the device comprises an obtaining unit, a first sending unit, a first receiving unit and a modifying unit.

An obtaining unit is configured to: obtaining a hierarchical tracking tree of a browser style; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style;

the first sending unit is used for: sending the hierarchical tracking tree to a terminal device through a first connection; so that the terminal equipment obtains style modification information according to the hierarchical tracking tree; the first connection is a connection which is established between the server and the terminal equipment and is used for carrying out style modification on a source code of a browser;

the first receiving unit is used for: receiving the style modification information sent by the terminal equipment through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name;

the modification unit is to: and acquiring the source file through the file path, replacing the declaration block corresponding to the selector name at the position of the declaration block in the source file with the target declaration block, and finishing the modification of the browser style.

In a fourth aspect, the present application provides a second data processing apparatus, where the second data processing apparatus is deployed on a terminal device side, and a browser runs on the terminal device; the second data processing apparatus includes: the device comprises a second receiving unit, a first determining unit, a searching unit, a second determining unit and a second sending unit.

The second receiving unit is used for: receiving a browser-style hierarchical tracking tree sent by a server through a first connection; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first type nodes corresponding to a selector of said browser style;

the first determination unit is configured to: determining b second type elements based on the operation of the user; b is greater than or equal to 1;

the search unit is used for: sequentially searching for a relevant node of a first type corresponding to each of said b elements of a second type in said hierarchical tracking tree;

the second determination unit is configured to: determining pattern modification information based on the relevant first-type nodes; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name;

the second sending unit is used for: and sending the style modification information to the server through the first connection so that the server modifies the source code of the browser according to the style modification information.

In a fifth aspect, the present application further provides an electronic device, including: a memory storing a computer program operable on a processor and a processor implementing the above data processing method when executing the program.

In a sixth aspect, the present application further provides a storage medium, on which a computer program is stored, the computer program, when executed by a processor, implementing the data processing method described above.

The data processing method, apparatus, device and storage medium provided by the present application at least include: obtaining a hierarchical tracking tree of a browser style; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first type nodes corresponding to a selector of said browser style; sending the hierarchical tracking tree to a terminal device through a first connection; so that the terminal equipment obtains style modification information according to the hierarchical tracking tree; the first connection is a connection which is established between the server and the terminal equipment and is used for carrying out style modification on a source code of a browser; receiving the style modification information sent by the terminal equipment through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name; and acquiring the source file through the file path, replacing the statement block corresponding to the selector name at the statement block position in the source file with the target statement block, and finishing the modification of the browser style.

For the scheme of the application, on one hand, the communication between the server and the terminal equipment running the browser is realized through the first connection, and a communication basis is provided for modifying the source code; on the other hand, the server obtains a hierarchical tracking tree of the browser style, after the hierarchical tracking tree is sent to the terminal device, the terminal device obtains style modification information based on the hierarchical tracking tree and sends the style modification information to the server side, and the server modifies the source file based on the style modification information. In this way, the convenience of modification of the browser based on source code programming is improved.

Drawings

FIG. 1 is a schematic diagram of an alternative configuration of a data processing system according to an embodiment of the present application;

fig. 2 is an optional schematic flow chart of the data processing method according to the embodiment of the present application

Fig. 3 is an alternative flow chart of a data processing method according to an embodiment of the present application;

fig. 4 is an alternative flow chart of the data processing method according to the embodiment of the present application;

fig. 5 is an alternative flow chart of the data processing method according to the embodiment of the present application;

fig. 6 is an alternative flow chart of the data processing method according to the embodiment of the present application;

FIG. 7 is an alternative structural diagram of cs rules provided in an embodiment of the present application;

FIG. 8 is an alternative structural diagram of a mainstream framework engineering code processing process according to an embodiment of the present disclosure;

FIG. 9 is an alternative view of a browser interface provided in an embodiment of the present application;

FIG. 10 is an alternative structural diagram of a code processing procedure provided in an embodiment of the present application;

FIG. 11 is an alternative structural diagram of a code processing process provided in an embodiment of the present application;

FIG. 12 is a schematic flow chart illustrating an alternative data processing process according to an embodiment of the present disclosure;

fig. 13 is an alternative schematic structural diagram of a cs parsing process according to an embodiment of the present disclosure;

FIG. 14 is an alternative structural diagram of an ast tree provided by an embodiment of the present application;

FIG. 15 is an alternative diagram of a pre-processing list provided by an embodiment of the present application;

FIG. 16 is a schematic flow chart of an alternative data processing process provided by the embodiments of the present application;

FIG. 17 is a schematic flow chart of an alternative data processing process provided by an embodiment of the present application;

fig. 18 is an alternative structural diagram of a node pointing relationship according to the present application;

FIG. 19 is a schematic diagram of an alternative structure of a hierarchical tracking tree according to an embodiment of the present application;

FIG. 20 is a schematic flow chart diagram of an alternative data processing process provided in an embodiment of the present application;

FIG. 21 is a schematic diagram of an alternative structure of a data processing process according to an embodiment of the present application;

FIG. 22 is a schematic diagram of an alternative structure of a storage process provided in an embodiment of the present application;

FIG. 23 is an alternative architectural diagram that provides front-end and back-end interaction logic according to embodiments of the present application;

fig. 24 is an alternative schematic structural diagram of a first data processing apparatus according to an embodiment of the present application;

fig. 25 is an alternative structural schematic diagram of a second data processing apparatus according to an embodiment of the present application;

fig. 26 is an alternative structural schematic diagram of an electronic device according to an embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the following will describe the specific technical solutions of the present application in further detail with reference to the accompanying drawings in the embodiments of the present application. The following examples are intended to illustrate the present application, but are not intended to limit the scope of the present application.

In the following description, reference is made to "some embodiments" which describe a subset of all possible embodiments, but it is understood that "some embodiments" may be the same subset or different subsets of all possible embodiments, and may be combined with each other without conflict.

In the following description, the terms "first \ second \ third" are used merely as examples to distinguish different objects, and do not represent a specific ordering for the objects, and do not have a definition of a sequential order. It is to be understood that the terms first, second, and third, if any, may be used interchangeably with the specified order or sequence to enable the embodiments of the application described herein to be practiced in other sequences than those illustrated or described herein.

Unless defined otherwise, 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 terminology used herein is for the purpose of describing embodiments of the present application only and is not intended to be limiting of the application.

The embodiment of the application can provide a data processing method, a data processing device, data processing equipment and a storage medium. In practical applications, the data processing method may be implemented by a data processing apparatus, and each functional entity in the data processing apparatus may be cooperatively implemented by hardware resources of the electronic device, such as computing resources like a processor, and communication resources (e.g. for supporting various modes of communication, such as optical cable and cellular).

The data processing method provided by the embodiment of the application is applied to a data processing system, and the data processing system comprises a server and terminal equipment.

The server is used for executing: obtaining a hierarchical tracking tree of a browser style; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style; sending the hierarchical tracking tree to a terminal device through a first connection; so that the terminal equipment obtains style modification information according to the hierarchical tracking tree; the first connection is a connection which is established between the server and the terminal equipment and is used for carrying out style modification on a source code of a browser; receiving the style modification information sent by the terminal equipment through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name; and acquiring the source file through the file path, replacing the declaration block corresponding to the selector name at the position of the declaration block in the source file with the target declaration block, and finishing the modification of the browser style.

The terminal equipment is used for executing: receiving a browser-style hierarchical tracking tree sent by a server through a first connection; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style; determining b second type elements based on the operation of the user; b is greater than or equal to 1; sequentially searching for a relevant node of a first type corresponding to each of said b elements of a second type in said hierarchical tracking tree; determining style modification information based on the relevant first-type nodes; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name; and sending the style modification information to the server through the first connection, so that the server modifies the source code of the browser according to the style modification information.

Optionally, the data processing system may further comprise a first electronic device. The first electronic device is used for generating a hierarchical tracking tree of a browser style and then sending the generated hierarchical tracking tree to the server.

It will be appreciated that the process of generating a hierarchical tracking tree of browser styles may also be implemented on the server side.

It should be noted that the first electronic device and the server may be integrated on the same electronic device, or may be separately deployed on different electronic devices.

As an example, a data processing system may be configured as shown in FIG. 1, including: a server 10 and a terminal device 20. Among them, data transmission is possible between the server 10 and the terminal device 20.

Here, the server 10 is configured to execute: obtaining a hierarchical tracking tree of a browser style; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style; sending the hierarchical tracking tree to a terminal device through a first connection; so that the terminal equipment obtains style modification information according to the hierarchical tracking tree; the first connection is a connection which is established between the server and the terminal equipment and is used for carrying out style modification on a source code of a browser; receiving the style modification information sent by the terminal equipment through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name; and acquiring the source file through the file path, replacing the declaration block corresponding to the selector name at the position of the declaration block in the source file with the target declaration block, and finishing the modification of the browser style.

The server 10 may be an electronic device such as a server or a computer with related data processing capability.

The terminal device 20 is configured to perform: receiving a browser-style hierarchical tracking tree sent by a server through a first connection; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first type nodes corresponding to a selector of said browser style; determining b second type elements based on the operation of the user; b is greater than or equal to 1; sequentially searching for a relevant node of a first type corresponding to each of said b elements of a second type in said hierarchical tracking tree; determining style modification information based on the relevant first-type nodes; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name; and sending the style modification information to the server through the first connection so that the server modifies the source code of the browser according to the style modification information.

Wherein, the second electronic device 20 may include: mobile terminal devices (e.g., cell phones, tablet computers, etc.), or non-mobile terminal devices (e.g., desktop computers, servers, etc.) and other electronic devices having associated data processing capabilities.

For ease of understanding, a part of the technical techniques involved in the embodiments of the present application will be briefly explained below.

Cascading Style Sheets (CSS) to configure browser design styles and layouts. Wherein the CSS consists of two main parts: a selector (selector), and one or more assertions.

Embodiments of a data processing method, a data processing apparatus, a data processing device, and a storage medium according to the embodiments of the present application are described below with reference to a schematic diagram of a data processing system shown in fig. 1.

In a first aspect, an embodiment of the present application provides a data processing method, which is applied to a first data processing apparatus; wherein the first data processing apparatus may be deployed in the server 10 in fig. 1. Next, a data processing procedure provided in the embodiment of the present application will be described with a server as an execution subject.

Fig. 2 illustrates a flow diagram of an alternative data processing method, which may include, but is not limited to, S201 to S204 shown in fig. 2, with reference to the contents shown in fig. 2.

S201, the server obtains a hierarchical tracking tree of a browser style.

In one possible implementation, S201 may be implemented as: the server generates a hierarchical tracking tree of the browser style based on the source code of the browser.

The hierarchical tracking tree comprises n levels; n is greater than 0; one level comprises m first type nodes in sequence, wherein m is more than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; a node of a first type corresponds to a selector of the browser style.

The first type of node is a node in the hierarchical tracking tree.

The method and the device for generating the browser-style hierarchical tracking tree based on the source code of the browser are not limited, and can be configured according to actual requirements.

In another possible implementation, the first electronic device generates a browser-style hierarchical tracking tree based on the source code of the browser, and then sends the browser-style hierarchical tracking tree to the server, and the corresponding S201 may be implemented as: the server receives the hierarchical tracking tree of the browser style sent by the first electronic device.

The application is not limited to the type of the source code (also referred to as source file) of the browser, and the type may be determined according to actual requirements. For example, the source file of the browser may be a file written by the VUE framework; or the source file of the browser can be a file written through the reach frame.

S202, the server sends the hierarchical tracking tree to the terminal device through the first connection.

The first connection is a connection which is established between the server and the terminal equipment and is used for carrying out style modification on a source code of the browser.

S202 may be implemented as: the server establishes a first connection with the terminal equipment, and sends the hierarchical tracking tree to the terminal equipment through the first connection, so that the terminal equipment obtains style modification information according to the hierarchical tracking tree.

The connection mode of the established first connection and the process of establishing the first connection are not limited in the embodiment of the application, and the configuration can be performed according to actual requirements.

For example, the connection mode of the established first connection may include: a websocket connection created using the socket technique.

For example, the process of establishing the first connection may include: the server sends a request for establishing the first connection to the terminal equipment, and after receiving the request, the terminal equipment establishes the first connection with the server and provides a response that the first connection is successfully established to the server.

S203, the server receives the style modification information sent by the terminal equipment through the first connection.

The style modification information includes: target declaration block, file path, declaration block location, and selector name.

Wherein the target declaration block is a modified declaration block and includes at least one declaration.

The file path is used for representing a storage path of the source file;

the declaration block location is used to indicate the location of the target declaration block in the source code. Exemplary statement block locations may include: [ start, end ]. Wherein start represents the starting position of the target declaration block in the source code, and end represents the ending position of the target declaration block in the source code;

a selector name for uniquely indicating one selector.

S203 may be implemented as: the server receives style modification information sent by the terminal equipment through the first connection, and acquires a target statement block, a file path, a statement block position and a selector name in the style modification information.

S204, the server acquires the source file through the file path, replaces the declaration block corresponding to the selector name at the position of the declaration block in the source file with the target declaration block, and finishes the modification of the browser style.

S204 may be implemented as: the server firstly obtains a file path in the through-style modification information, obtains a source file through the file path, obtains a declaration block position in the through-style modification information, and replaces a declaration block corresponding to the selector name with the target declaration block at the declaration block position in the source file, so that the browser style modification is completed.

The data processing scheme provided by the embodiment of the application at least comprises the following steps: obtaining a hierarchical tracking tree of a browser style; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style; sending the hierarchical tracking tree to a terminal device through a first connection; so that the terminal equipment obtains style modification information according to the hierarchical tracking tree; the first connection is a connection which is established between the server and the terminal equipment and is used for carrying out style modification on a source code of a browser; receiving the style modification information sent by the terminal equipment through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name; and acquiring the source file through the file path, replacing the declaration block corresponding to the selector name at the position of the declaration block in the source file with the target declaration block, and finishing the modification of the browser style.

For the scheme of the application, on one hand, the communication between the server and the terminal equipment running the browser is realized through the first connection, and a communication basis is provided for modifying the source code; on the other hand, the server obtains a hierarchical tracking tree of the browser style, after the hierarchical tracking tree is sent to the terminal device, the terminal device obtains style modification information based on the hierarchical tracking tree and sends the style modification information to the server side, and the server modifies the source file based on the style modification information. In this way, the ease of modification of the browser based on source code programming is improved.

Next, a process of the S201 server obtaining a hierarchical tracking tree of the browser style will be described. This process may include, but is not limited to, mode 1 or mode 2 described below.

Mode 1, a server generates a hierarchical tracking tree of a browser style;

mode 2, the first electronic device generates a browser-style hierarchical tracking tree and sends the browser-style hierarchical tracking tree to the server.

Next, a process of generating a hierarchical tracking tree of a browser style by the mode 1 server will be described. As this process may include, but is not limited to, S2011-S2013.

S2011, the server converts the source file of the browser into an abstract syntax tree AST.

Wherein the AST comprises n branches, one branch comprising m nodes of the second type.

S2011 may be implemented as: the server converts the source file of the browser into the AST using an AST parser.

Specifically, postcss is used for a css-type source file, and the style label is detached to obtain the content in the style label; for a less type file, integrating postcss-less plug-ins by using postcss, and detaching a style label to obtain the content in the style label; for the scss file, integrating postcss-scss plug-ins by using postcss, detaching the style label to obtain the content in the style label; for the vue file, the content in the style label is obtained by detaching the style label with vue-loader. And further analyzed by postcss, and finally analyzed into AST (also called as AST or AST tree or AST syntax tree).

S2012, the server determines a preprocessing list based on the AST.

S2012, may be implemented as: the server performs first processing for each branch of the AST based on the AST, obtains n preprocessing objects by obtaining a preprocessing object corresponding to each branch, and determines the n preprocessing objects as a preprocessing list.

One pretreatment object includes: first information, path information and leaf node information. Wherein the first information is used for representing the information of the selector sequentially included by the branch; the path information is used for representing the storage path of the source file; the leaf node information is used for representing second information of a second type of leaf node corresponding to the branch.

Illustratively, the information of the selector may include: # username.

The first information may include:

the information of the second type leaf node may include: declaration item (prop), declaration value (value), and declaration block location (source). Wherein, prop is used to represent the identification of the declaration; value is used for representing the value of the statement; source is used to represent the location of the declaration in the source code.

The number of the information of the second type leaf node in the embodiment of the application is not limited, and can be determined according to the actual situation.

Illustratively, if the source file includes:

then preprocessing the object may include: first information,. login.group > div.msg, path information src/view/logic/index.less, leaf node information, statement 1 and statement 2.

In the embodiment of the present application, the first processing is performed on each branch of the AST, and a process of obtaining the preprocessing object corresponding to each branch is not limited, and may be configured according to actual requirements.

S2013, the server establishes the hierarchical tracking tree based on the preprocessing list.

S2013 may be implemented as: the server carries out second processing on each preprocessing object in the preprocessing list to obtain a hierarchy corresponding to each preprocessing object, so that n hierarchies are obtained; the n levels form a hierarchical tracking tree.

Specifically, the server establishes a first type node for a selector in a preprocessed object, and establishes a relationship between the first type nodes based on the relationship between the selectors, thereby obtaining the hierarchical tracking tree.

For the mode 2, the detailed description of the mode 1 may be referred to in the process of generating the browser-style hierarchical tracking tree by the first electronic device, and details are not repeated here.

Compared with the mode 2, the mode 1 for obtaining the hierarchical tracking tree is simple and efficient; compared with the mode 1, the mode 2 can generate the hierarchical tracking tree through any other electronic equipment, and the implementation process is flexible.

Next, a process in which the server determines the pre-processing list based on the AST S2012 is explained.

Specifically, the process will be described by taking an example of obtaining a pretreatment object by treating a molecule. The process may include, but is not limited to, S20121 to S20124 described below.

S20121, the server traverses each second type node in the branches and sequentially obtains information of the selectors in the second type nodes.

The second type node is a node in the AST.

The embodiment of the present application does not limit the specific content of the second type node, and may be determined according to the actual situation. For example, the contents of the second type node may include a type of the second type node, selector information, and node information.

For example, the second type node may include: type of node of second type, rule (rule); selector information,. logic; node information, rule.

The embodiment of the application does not limit the expression form of the content of the second type node, and the content of the second type node can be configured according to actual requirements. Illustratively, the contents of the second type node may be expressed in the form of a table or in the form of a document.

S20121 may be implemented as: the server traverses each node of the second type in the branch based on the sequence from the top to the bottom, and sequentially obtains the information of the selector in the node of the second type.

S20122, the server connects the information of the selector in each node of the second type through a first symbol to obtain the first information in the preprocessed object.

The first symbol is used for connecting and distinguishing two selector information; the specific type of the first symbol in the embodiment of the present application is not limited, and may be configured according to actual situations.

Illustratively, the first symbol may be: space or-etc.

S20123, the server determines the storage path of the source file as the path information in the preprocessing object.

S20123, the server acquires a storage path of the source file and determines the storage path as path information in the preprocessing object.

S20124, the server determines the second information of the leaf node of the branch as the leaf node information in the preprocessing object.

In one possible embodiment, the second information includes a declaration entry of the leaf node, a declaration value of the leaf node, and a declaration block position.

It is understood that the second information may also include other information, which is not listed here.

Thus, after the preprocessing object is obtained, the path information and the like of each branch can be clearly known, and the convenience of subsequent processing can be improved.

Next, a process of the S2013 server building the hierarchical tracking tree based on the preprocessed list will be described.

Specifically, a process of obtaining one hierarchy for processing one preprocessing object will be described as an example. The process may include, but is not limited to, S20131 to S20134 described below.

S20131, the server splits the first information in the preprocessed object into k first type elements through the first symbol.

The first type element includes at least a selector name; k is greater than or equal to 1.

In one possible implementation, the first type element may include a selector name.

In another possible implementation, the first type element may include an operator plus a selector name.

In yet another possible embodiment, the first type primary color may comprise a selector token plus a selector name.

Illustratively, if the first information in the preprocessed object includes a. logic.group > div.msg, then the first type element includes: logic; group; and > div.msg.

S20132, the server processes each first-type element in the k first-type elements to obtain S first-type nodes.

The first type node comprises at least: a selector name, first indication information, and second indication information; the first indication information is used for representing whether a first type of node related to brothers exists or not, and the second indication information is used for representing whether a first type of node related to parents and children exists or not.

It will be appreciated that the first type node may also include other information. For example, the type one nodes may also include a selector type, a file path, whether there is a type one node to which the dummy element is related, whether it is immediately adjacent, whether it is a leaf node, and so on.

The embodiment of the present application does not limit the concrete expression form of the first-type node, and the first-type node may be configured according to actual requirements.

Illustratively, the first type nodes may be represented in the form of a table or in the form of a document.

S20132 may be implemented as: the server processes for each of the k elements of type one: acquiring a selector name corresponding to the first type element, determining whether brother related first type nodes exist in the first type nodes, and determining whether father and son related first type nodes exist in the first type nodes; thereby obtaining the contents of the first-type node. And traversing each first-type element to obtain s first-type nodes.

The sequence of traversing each first-type element is not limited in the embodiment of the application, and the configuration can be carried out according to actual requirements.

In one possible implementation, the server traverses in a back-to-front order.

In another possible implementation, the services may be traversed in other orders. E.g., front to back, etc.

S20133, the server determines the relation between the adjacent first-type nodes in the S first-type nodes based on the first-type elements.

The relationship comprises a parent-child relationship or a brother relationship; said s is greater than 1.

The method for determining the parent-child relationship and the brother relationship is not limited, and can be determined according to actual requirements.

Illustratively, there is a brother relationship between the nodes of type one corresponding to div and the nodes of type one corresponding to msg; the first type node corresponding to the group and the first type node corresponding to the div are in parent-child relationship.

S20134, the server sequentially connects the adjacent first type nodes based on the relation between the adjacent first type nodes to obtain the hierarchy corresponding to the preprocessing object.

The connection mode between adjacent first-type nodes is not limited in the embodiment of the application, and the configuration can be performed according to actual requirements.

Illustratively, if there is a parent-child relationship between the first type node 1 and the first type node 2, the first type node 1 and the second type node 2 are connected by an arrow, and the arrow points to the second indication information of the first type node 1.

And processing each preprocessed object in the same way to obtain a hierarchical tracking tree.

Therefore, the relationship among all the selectors is clearly represented by the level tracking number, so that other relevant selectors can be quickly found through one selector, and the overall searching processing speed is improved.

As shown in fig. 3, the data processing method provided in the embodiment of the present application may further include, but is not limited to, the following S205 to S207.

S205, the server submits the source code with the modified browser style.

Illustratively, the server submits the source code after the browser style modification to a code repository.

S206, the server constructs based on the modified source code to obtain an executable code corresponding to the modified source code.

Different construction modes are adopted for source codes with different formats, and are not described one by one here.

And S207, the server sends the executable code corresponding to the modified source code to the terminal equipment.

S207 may be implemented as: and the server sends the executable code corresponding to the modified source code to the terminal equipment so that the terminal equipment runs the browser based on the executable code corresponding to the modified source code.

It can be seen that after the source code is modified, each time the modified source code is constructed, the substantial modification of the browser style is realized.

The data processing method provided by the embodiment of the application can also be used for rendering the modified browser so as to display the modified effect.

The specific rendering processes are not described one by one in the embodiments of the present application.

In a second aspect, the present application provides another data processing method, which is applied to a second data processing apparatus; wherein the second data processing apparatus may be deployed in the terminal device 20 in fig. 1. Next, a data processing procedure provided in the embodiment of the present application is described with a terminal device as an execution subject.

Fig. 4 illustrates a flow diagram of an alternative data processing method, which may include, but is not limited to, S401 to S405 shown in fig. 4, with reference to the contents shown in fig. 4.

S401, the terminal device receives the browser-style hierarchical tracking tree sent by the server through the first connection.

The hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of the first-type nodes corresponds to one of the selectors of the browser style.

S402, the terminal equipment determines b second type elements based on the operation of the user.

B is greater than or equal to 1.

The b second type elements are elements that the user may need to process.

S402 may be implemented as: the terminal device determines b elements of the second type based on two operations of the user.

The specific operation type is not limited in the embodiment of the application, and the configuration can be performed according to actual requirements. Illustratively, the user's actions may include one or more of: click, touch, slide, etc.

S403, the terminal device searches related first type nodes corresponding to each second type element in the b second type elements in the hierarchical tracking tree in sequence.

Here, the associated first type node corresponding to the second type element represents: a node of a first type associated with a node of a first type corresponding to an element of a second type in the hierarchical tracking tree. Wherein the related first-type nodes comprise parent-child related first-type nodes or sibling related first-type nodes.

The searching sequence is not limited in the embodiment of the application and can be determined according to actual requirements.

In one possible embodiment, the search sequence is from front to back, or left to right.

In another possible embodiment, the look-up success may also be from back to front.

S404, the terminal device determines style modification information based on the related first-type node.

The embodiment of the application does not limit the specific process of determining the style modification information based on the relevant first-type node by the terminal device, and can be configured according to the actual process.

S405, the terminal device sends the style modification information to the server through the first connection, so that the server modifies the source code of the browser according to the style modification information.

S405 may be implemented as: and the terminal equipment sends the style modification information to the server through the first connection between the server and the terminal equipment so that the server modifies the source code of the browser according to the style modification information.

The data processing scheme provided by the embodiment of the application at least comprises the following steps: receiving a browser-style hierarchical tracking tree sent by a server through a first connection; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style; determining b second type elements based on the operation of the user; b is greater than or equal to 1; sequentially searching for a relevant node of a first type corresponding to each of said b elements of a second type in said hierarchical tracking tree; determining style modification information based on the relevant first-type nodes; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name; and sending the style modification information to the server through the first connection, so that the server modifies the source code of the browser according to the style modification information.

For the scheme of the application, on one hand, the communication between the server and the terminal equipment running the browser is realized through the first connection, and a communication basis is provided for modifying the source code; on the other hand, the server obtains a hierarchical tracking tree of the browser style, after the hierarchical tracking tree is sent to the terminal device, the terminal device obtains style modification information based on the hierarchical tracking tree and sends the style modification information to the server side, and the server modifies the source file based on the style modification information. In this way, the ease of modification of the browser based on source code programming is improved. In this way, the ease of modification of the browser based on source code programming is improved.

Next, a process of the terminal device determining b second type elements based on the user' S operation at S402 will be described. As shown in fig. 5, the process may include, but is not limited to, the following S4021 to S4023.

S4021, the terminal device starts a style modification function of the browser based on a first operation of a user.

A first operation for starting a style modification function of a browser; the type and the action position of the first operation are not limited in the embodiment of the application, and can be determined according to actual requirements.

Illustratively, the first operation is that a preset position of the display interface can be clicked.

For example, when the user clicks a preset position of the display interface, the corresponding S4021 may be implemented as: and the terminal equipment receives the click of the user on the preset position of the display interface, and responds to the click to start the style modification function of the browser.

S4022, adding a transparent covering layer on the interface of the browser by the terminal equipment.

The transparent cover layer is used for receiving other operations modified by the user based on the style. The embodiment of the application does not limit the specific process of adding the transparent covering layer, and can be configured according to actual requirements.

S4023, the terminal equipment determines the b second type elements based on the second operation on the transparent cover layer.

A second operation for determining a second type element of the style that the user needs to modify; the type and the action position of the second operation are not limited in the embodiment of the application, and can be determined according to actual requirements.

Illustratively, the second operation is that the first position of the display interface can be clicked.

For example, if the user clicks a first position on the transparent cover layer, the corresponding S4021 may be implemented as: the terminal equipment receives a click of a user on a first position on the transparent masking layer, and determines b selectors corresponding to the click positions in response to the click; b second type elements are determined based on the b selectors.

In one possible embodiment, determining b elements of the second type based on b selectors comprises: and respectively acquiring element information of each selector in the b selectors, and corresponding the b selectors and the b selectors. Wherein, the element information may include: identity (ID), class, label.

Correspondingly, the data processing method provided by the embodiment of the present application may further include S4024 described below.

S4024, the terminal device creates a mask element on the mask layer based on the b second type elements; and shielding the trigger events corresponding to the b second type elements through the mask elements.

And the mask element is used for shielding the trigger events corresponding to the b second type elements. The embodiment of the application does not limit the specific way of creating the mask element, and can be determined according to actual conditions.

For example, a mask element may be created based on b second type elements; a mask element may also be created for each of the b elements of the second type, respectively.

Therefore, unnecessary trigger events caused by clicking of the user can be avoided, and the user experience is improved.

Next, a process of the S403 terminal device sequentially finding the relevant first-type nodes corresponding to each of the b second-type elements in the hierarchical tracking tree will be described.

The following b elements of the second type include in sequence: the process is explained by taking element a and element B as examples. As shown in fig. 6, the process may include, but is not limited to, S4031 through S4034.

S4031, the terminal device searches in the hierarchical tracking tree based on the element A to obtain a first type node A corresponding to the element A.

S4031 may be implemented as: and the terminal equipment searches in the last layer (leaf node layer) of each branch of the hierarchical tracking tree based on the element A to obtain a first type node A corresponding to the element A.

S4032, the terminal device searches the element B in the first type node B related to the brother of the first type node A in the hierarchical tracking tree to obtain a first search result; and if the result of the first search result is not found, searching the element B in a first type node C related to the father and the son of the first type node A to obtain a second search result.

S4033, if the second search result is not found, the terminal device searches for the element B in a new first-type node B associated with a brother of the new first-type node a, taking the first-type node C as the new first-type node a, and obtains a new first search result; if the new first search result is not found, searching the element B in a new first type node C related to the father and the son of the new first type node A to obtain a fourth search result; until the new type one node C has no parent-child related type one nodes.

S4034, in a case that the new node C of the first type does not have a node of a first type related to a parent node or a child node, determining, by the terminal device, the related node of the first type corresponding to each of the b elements of the second type, where the determining includes at least: a node of a first type A, a node of a first type C associated with a parent and a child of the node of the first type A, and the node of the new first type C if the node of the new first type C does not have a node of a first type associated with a parent and a child.

Next, a procedure in which the terminal device determines style modification information based on the relevant first-type node S404 will be described. This process may include, but is not limited to, S4041 through S4045 described below.

S4041, the terminal device determines the content of the CSS to be modified based on the related first-type node.

S4041 may be implemented as: and the terminal equipment determines the content of each CSS corresponding to the related first-type node as the content of the CSS of the cascading style sheet to be modified based on the related first-type node.

Here, the number of relevant first-nature nodes is the same as the number of cascading style sheets determined to be modified.

S4042, the terminal device displays the content of the CSS on a display interface.

The embodiment of the present application does not limit the specific display manner, and may be configured according to actual requirements.

The display may be an array display or a stacked display.

S4043, the terminal device determines the modified content of the CSS based on a third operation of the user.

The embodiment of the present application does not limit the specific type and process of the third operation, and may be configured according to actual requirements.

The third operation may be one operation or a plurality of operations.

Illustratively, the third operation may be an input operation.

For example, the third operation may include: an input operation, a delete operation, and a click operation, etc.

Illustratively, S4043 may be implemented as: the terminal device acquires the input content based on the input operation of the user, and determines the content of the modified CSS based on the input content.

S4044, the terminal device determines the modified content of the CSS as a target statement block of the style modification information.

S4044 may be implemented as: and the terminal equipment writes the modified content of the CSS into a target statement block of the style modification information.

S4045, the terminal device determines the name of the selector corresponding to the relevant first-type node as the position of the statement block of the style modification information; determining a name of the first selector as a selector name of the style modification information.

The first selector is the selector corresponding to the found second type element as the search result.

S4045 may be implemented as: the terminal equipment writes the name of the selector corresponding to the related first-type node into the statement block position of the style modification information; writing a name of the first selector as a selector name of the style modification information.

Therefore, the browser style is modified based on the visualization process, and the user experience is high.

The data processing method provided in the embodiment of the present application is described below with an embodiment by taking a processing procedure of a browser as an example.

For ease of understanding, some technical terms are briefly explained below.

Modular packager (webpack): the static module packaging tool for the modern JavaScript application program is used by most mainstream framework engineering at present.

webpack loader (loader): the loader in webpack is used to translate the source code of the module.

webpack plug-in (plugin): the plugin in the webpack is more powerful than the loader, can access the whole lifecycle of the webpack processing process, and performs some operations.

Cascading Style Sheets (css): for design styles and layouts; HTML is used to define the structure and semantics of content. The cs rule consists of two main components: a selector, and one or more assertions.

Illustratively, as shown in FIG. 7, a cs rule includes a selector and a declaration.

cs packet selector: there are many elements in a style sheet that have the same style.

Such as:

to reduce the amount of code, a packet selector may be used. Such as:

cs pseudo-element: the css dummy element is a special effect used to add some selectors. Grammar: a selector: pseudo-element { property: a value; }

postcss: the method is a tool for converting the css codes, can compile the codes in a less format and an scss format into the codes in a css format, and also provides the capability of compiling the css format into an ast tree format.

css child element selector: the Child selectors (Child selectors) can only select an element that is a direct/first-level Child of an element.

In the related art, the types of projects developed by front-end projects to run on a browser are divided into two types:

1. simple engineering: for small projects which do not use a frame, files of html, css and js types are directly imported into a browser (a local debugging scene) or returned to the browser through a server (a production environment scene), and the files of the three types belong to executable codes of the browser, which means that the browser can directly read and load rendering.

With the development of the current front-end development technology, there are few projects using this development approach.

2. Mainstream frame engineering: for medium and large projects using frameworks (e.g., Vue, React), the source code under development is written in the corresponding Vue or React (jsx) syntax. Therefore, because the source codes cannot be directly operated in the browser, the source codes need to be compiled into executable codes in html, css and js formats through a construction tool (such as webpack and rollup) after the writing is finished, and then the executable codes in the html, css and js formats are given to the browser to be operated.

With the development of the current front-end development technology, the development mode corresponding to the mainstream framework engineering is the mainstream. As shown in fig. 8, the process may include: the source code 81 is compiled and compressed to obtain executable code 82, and the executable code 82 is loaded into the browser 83.

For the scheme of synchronizing the browser modification style to the native code, the method mainly depends on the workspace (workplace) function in the browser. Specifically, executable code needs to be imported into the workplace. As shown in fig. 9, the code is imported into the workplace, and the style is modified.

And then, creating a file read-write stream, reading the code in the browser, triggering rendering of the browser, and displaying the page. Similarly, after the work space is modified, the modification of the loaded executable code can be directly acted through the write-in stream just like the normal editing of word and txt files. As shown in fig. 10, a modification style is triggered on the browser 101, then the modification style is entered into the executable code 102, and then the executable code 102 after the modification style is loaded into the browser, thereby completing the modification.

However, this solution can only be adapted to the simple engineering described above, and cannot be adapted to mainstream frame engineering.

The main reasons include: engineering source codes of the main stream frame cannot be directly operated, executable codes need to be generated after compiling, and the executable code materials are led into a browser to be operated; the executable code is a build artifact, and each time the source code is built, a new build artifact is generated. Therefore, if the source code of the main stream framework is not modified, changes are made only on the executable code, the latter build still cannot take effect, and no record can be found that was previously modified in the browser. Namely, the existing scheme cannot directly act code modification on the source code of the main stream framework.

As shown in fig. 11, a modification style is triggered on browser 111 and then enters executable code 112. However, at each build time, since the source code 113 is not modified, the executable code 112 compiled and compressed from the source code is not modified, and thus the executable code loaded on the browser 111 is also not modified.

The method mainly comprises the following steps of analyzing the related technical scheme, wherein the defect that the browser modification style cannot take effect on the frame engineering mainly comprises the following steps:

on one hand, the connection between the browser and the source code of the framework project is not established, the browser and the executable code are connected through a file read-write stream, but the connection between the browser and the source code is lacked in the related art.

On the other hand, since the browser modification style needs to be synchronized to the source code, and the browser acquires executable code, the executable code cannot be inversely compiled into the source code. Thus modifying the source code requires knowledge of the location of the executable code blocks in the source code. The difficulty is how to maintain a mapping table to correlate the locations of blocks of code between source code and executable code.

Thus, for the purposes of this application, it primarily includes:

firstly, establishing a connection from a browser to a source code, and providing a scheme for modifying a writable code;

and secondly, establishing mapping relation and position information between each style node between the executable code and the source code, and finding out a modified source code block for writing through the connection from the browser to the source code.

This embodiment of the present application has the following features:

the scheme needs to modify the construction and operation processes of a code project, and a program is used for combing out the mapping relation between the operable code and the style nodes in the source code; and simultaneously starting a node (node) server to provide connection of the online browser and the source code.

Firstly, by developing a custom webpack plugin, during construction, acquiring a style file, analyzing a css structure by using postcss, acquiring a rule, then analyzing the rule, and for each selector (namely a selector) for matching text object model (dom) elements in a webpage, wherein the css style is defined as a selector (style) which indicates an action object of the style, namely the elements of the webpage on which the style acts, combing the segments of the selector according to a certain rule, constructing an object by each segment, maintaining the positions of corresponding declaration code blocks and code blocks in the object, connecting the positions by using pointer relations, describing the relation between the selectors by using fields in the object to form a tree structure, and traversing all selectors acting on the style in a style level tracking tree by selecting a dom node in a browser, and obtaining information such as code block position in the source code.

Secondly, starting a node service, opening a directory in a server, pulling up the latest source code by using a clone (git clone), enabling the browser and the server to be connected through a websocket, monitoring the request of the browser by the node server, creating a write stream of the source code, and triggering to modify the source code after receiving a notification.

Thirdly, compiling sdk and embedding in the project code, when the code construction is completed and the development operation is performed, automatically loading sdk scripts, when a user triggers a style debugging function provided by sdk on a browser interface through any mode (such as buttons and floating windows), loading a mask layer to cover the interface, clicking the selected element on the interface by the user, acquiring related attributes of the element, searching the attributes of the element in a style level tracking tree, acquiring all code blocks corresponding to leaf node selectors acting on the element, assembling the code blocks into css rule code blocks, and displaying the code blocks on the front end. When a user modifies a code block, modifying the native style runnable code using the insert rule Api of cssstyle sheet causes the browser rendering to trigger a style update. And acquiring modified node position information in the style level tracking tree, and informing the server to reassemble the modified statement and the selector into the cs rule to be modified to the specified position of the source code.

And after the code modification is completed, triggering the code to be submitted and reconstructing.

Technical difficulties in the related art include: the related art is an effect achieved through the existing capability of the browser, but a code block opened by the browser is a building material and cannot be applied to a source code, so that connection between the browser and the source code needs to be established, and the main difficulties are as follows: how to find all defined css rules of the element in the browser, and can acquire the style rules therein to display at the front end for a user to operate; and after the user operation, the path of the cs style in the source code is also required to be known, and the modified rule can be added to the code.

Next, the processing procedure of the present application will be explained.

As shown in fig. 12, the process involves a browser process, a code building process, and a server process.

S1201, starting engineering construction;

s1202, determining an AST tree of the style node;

s1203, generating a preprocessing selector list;

s1204, obtaining a pattern level tracking tree;

s1205, the server starts a node service;

s1206, the server clones a code file under the target directory;

s1207, the server file monitor monitors;

s1208, server file reading service;

s1209, starting the browser by the SDK;

s1210, the browser establishes connection with a server;

s1211, connecting the server file modification websocket;

s1212, the browser acquires a style level tracking tree;

when the user touches the element and the element click is monitored through the SDK, executing the following S1213;

s1213, the browser creates a covering layer;

s1214, the browser collects the element style nodes;

s1215, carding the browser style nodes, and displaying on a front section interface;

s1216, rendering a page;

s1217, the browser generates stylemodiferues and sends the stylemodiferues to the server;

s1218, the server receives the stylemodiferues;

s1219, the server submits the code.

Next, the processing procedure is described in detail by specific examples.

Example 1, taking a simple less file as an example, the specific contents include:

specifically, the following first to fourth portions may be included, but not limited thereto.

The first part, write the webpack plug-in to compile the style-level tracking tree, and access in the webpack.

In the process of using the webpack compiling in the project, a written webpack compiling plug-in is introduced, and the plug-in mainly executes the following steps 1.1 to 1.6.

Step 1.1, an abstract (ast) parser for css and its extension language is integrated.

For example, as shown in FIG. 13, a postcss parser is used for a css-formatted source file, a postcss parser is used for a less-formatted source file and a postcss-less plug-in is integrated, a postcss parser is used for a format source scss file and a postcss-scss plug-in is integrated, and for a vue-formatted file, vue-loader is used for obtaining content in style tags, and the postcss parser is used for further parsing.

The analysis of the four files is integrated, so that almost all cs application scenes in the market can be met. And for the non-css file, namely the file of the extension language, the file is directly skipped without processing.

1.2, maintain a pre-processing list locally, which is used to prepare all the used selectors in the collection project.

1.3, in the lifecycle of the webpack plugin, monitoring an event of a compile (build) phase, wherein the event is a hook created before the webpack compile work starts, and monitoring a create Module (create Module) event in the callback of the build, wherein at the moment, the file is in a state of a source file before a loader performs compile.

1.4, in the callback of create Module, each file traversed during webpack compile execution can be obtained and then processed.

A. And judging whether the path contains node _ modules, wherein the node _ modules are third-party dependent libraries and are not allowed to be covered by any modification, so that the path is ignored.

B. The node attributes obtained using the ast parser of 1.1 to obtain the ast tree and parsed with the postcss parser are shown in Table 1.

TABLE 1 examples of node attributes parsed by the postcss parser

The ast tree is shown in FIG. 14.

And starting a deep traversal node, and maintaining an item (item) object comprising a selector (selector), nodes (nodes) and path nodes in the traversal process. And the path is the currently processed file path, and when the selector traverses to the depth node each time, the selector of the item is spliced with the selector of the parent node and spaced from the self selector node. When traversing to a declaration node, taking prop, value and source of the node as an object to be inserted into nodes, and then adding the object into a preprocessing list, wherein the selector of the item in the preprocessing list needs to be deduplicated during adding, and if repeated items exist, only the nodes need to be merged.

The resulting preprocessed list that is processed based on example 1 is shown in fig. 15.

A logical summary of the style selector retrieved and added to the pre-processing style selector list is shown in fig. 16.

Specifically, the following S1601 to S1611 may be included, but not limited thereto.

S1601, acquiring a file in a project;

s1602, a webpack link and a create Module loop are triggered circularly;

s1603, judging whether the circulation is finished or not;

if not, executing the following S1604; if yes, acquiring a preprocessing selector list, continuing subsequent processing, and executing the following step S1610;

s1604, whether the file is a file under the node _ modules or not;

if yes, go back to the loop and continue to execute S1602; if not, executing the following S1605;

s1605, converting the file into ast by using an ast parser;

s1606, traversing the ast nodes;

s1607, judging whether the circulation is finished or not;

if yes, the flow is transferred to the next file, and S1602 is continuously executed; if not, executing the following S1608;

s1608, whether the node type value is rule;

if yes, traversing the child nodes, and continuing to execute S1606; if not, executing the following S1609;

s1609, whether the node is a declaration node or not;

if not, returning to the loop and continuing to execute S1606; if yes, add to the list and execute the following S1610;

s1610, collecting a pretreatment selector list;

and S1611, subsequent processing.

1.5, maintaining a style tracetree styletrace in the local advanced style level tracking tree.

The tree is an array variable, the interior of the tree is maintained by rules, and the tree includes style level nodes, which are shown in table 2 below.

Table 2 examples of contents included by style level nodes

Starting to traverse the preprocessing list, obtaining each node item, and parsing the selector, as shown in fig. 17, the specific process may include, but is not limited to, the following S1701 to S1718.

S1701, starting traversing the preprocessing list;

s1702, creating a pointer pointing item, and maintaining tempadjacent;

s1703, processing is performed for each selector node 1 to selector node N;

s1704, judging whether the array is empty or not;

if it is empty, executing the following S1718; if not, executing the following S1705;

s1705, taking out the nodes from back to front, and processing through the operational characters;

s1706, obtaining a combiner;

s1707, obtaining pseudovialaue;

s1708, processing the element nodes 1 to N;

s1709, judging whether a duplicate node exists in the pointer;

if so; performing the following S1712; if not, executing the following S1710;

s1710, creating a new node, and processing a combiner and temadjacent;

s1711, processing the poiter node;

s1712, judging whether pseudovalve exists or not.

If so; then go to S1713; if not, executing the following S1714;

s1713, the current pointer is pseudo solids of the new node;

s1714, whether the traversed node is empty or not;

if yes, execute the following S1715; if not, executing the following S1716;

s1715, the current pointer is parentselectors of the new node;

s1716, the current pointer is parentselectors of the new node;

s1717, judging whether all the element nodes are processed;

if so; processing the next selector, i.e., continuing to execute S1704; if not; continuing to process the element nodes, namely, continuing to execute S1708;

and S1718, ending.

Next, the relevant steps in S1701 to S1718 will be described in detail.

S1702 creates a pointer point item, maintaining tempadjacent.

A, creating a pointer variable pointer, and initializing a root node pointing to the style level tracking tree. The nodePointer variable is maintained, initially null, and each time the newest SelectorNode is created, the object is pointed to by default.

B creates a variable tempadjjacent, default null.

Processing is performed for S1703 for each selector node 1 to selector node N.

And C, matching the space rule and truncating into an array.

Taking the first node in fig. 15 as an example, the processing is example 2.

Example 2, [ ". login", ". group", "> div.msg" ].

For S1705, the node is fetched from back to front, and is processed by an operator.

And D, traversing the elements in the array from back to front, and processing each traversed element.

E, judging whether a pseudo class selector exists or not, and using a regular rule/[: 1, 2 \ w +/get out, as when processing the third element in fig. 15, from which ": : before "intercepts the maintenance as a variable pseudoValue, leaving". inner ".

F, continuing processing, wherein the first bit is the mapping value of the operational character in the table 2, if the mapping value can be mapped, the mapping value is obtained, and the first bit is deleted; if not, the mapping value is mapped to the operator "none".

Mapping value examples for Table 3 operators

Operational character	Mapping values
		>	child
Is free of	descendant

A combiner variable is maintained to store the retrieved value. The final "> div.msg" as in example 2 was processed to get "div.msg", combiner ═ child.

G is then passed through the regularization rule/[ # | ]? The w/g pair selector takes "#" beginning, "-" beginning and "pure letter" as principles, extracts elements, puts the elements into an array, and finally obtains two elements of div and msg after processing the "div.msg".

Then, for the first bit of each element, find the mapping value by the selector type in table 4, wherein if mapping can be performed, obtain the mapping value and delete the first bit, and if mapping cannot be performed, obtain a "none" mapping value.

Table 4 mapping value example of selector

Priority level	Selector type	Selector type value
			1	#	id
2	.	class
			3	: : or:	pseudo
4	is composed of	tag

Then sorting from 1-4 is performed according to the priority rules in table 4, and sorting is performed alphabetically if the selector types are the same. Wherein, 1 corresponds to the highest priority.

Starting traversal, creating a SelectorNode, firstly creating a ". msg" object, defaulting adjacent to false, if the tempAdjacent in d has a value, assigning the value to the adjacent, and resetting the tempAdjacent to be null after the assignment is finished.

In an exemplary manner, the first and second electrodes are,

selector_type：class，

selector_name：msg，

adjacent：false，

isLeaf：false，

source_file_path：null，

SiblingSelectors：[]，

ParentSelectors：[]，

PseudoSelectors：[]

and after the creation is completed, inserting the object into the pointer, traversing the elements in the pointer when the pointer is inserted each time, judging by using the same selector _ type, selector _ value, adjacent and isLeaf as deduplication logic, and if the repetition is repeated, adding is not needed, and pointing to the elements by the nodePointer. The pointer then points to the SiblingSelectors of nodePointer, in this example the SiblingSelectors in ". msg". And continuing to traverse to the low priority until the final node processing is finished. And after the processing is finished, judging whether the saved pseudoValue variable exists, if so, pointing the pointer to the pseudoelectrodes of the nodePointer, and emptying the pseudoValue variable. The pseudo elements stored by pseudo value are introduced after the elements at the same level of the sitting are processed, so that the pseudo elements can be conveniently and directly traversed backwards after the processing is finished when the pseudo elements are indexed in the third step.

After the above treatment, the structures of StyleTraceTree, nodePointer and pointers are shown in FIG. 18.

Taking the combiner, mapping the table 5 to obtain a node mapping value, pointing the pointer to the corresponding attribute of the nodePointer, and storing the adjacent of the mapping table 5 by the tempAdjacent. The traversal continues forward.

Table 5 combiner mapping example

Operation value	Node key	adjacent
			child	ParentSelectors	true
descendant	ParentSelectors	false

J when the program judges that all the nodes are finished, setting the isLeaf attribute of the nodePointer to true, assigning the path parameter of the item to the source _ file _ path, and assigning the nodes of the item to the source.

K continues to execute the next item, perfecting StyleTraceTree. Json's structure, finalized with example 2, is shown in fig. 19.

Json, export a copy to the root directory.

At this time, the pattern level tracking tree combs all the cs rule in the source code into a tracking file, all the cs rule nodes of the DOM node can be found through the file in the subsequent steps, and the information of the detailed positions of the file directory and the code blocks where the cs rule is located is provided, so that the problem that the position relation between the browser pattern node and the source code is unknown in the existing scheme is solved.

And secondly, starting a node server for creating a websocket environment linked with the style modifier.

Specific examples may include, but are not limited to, the following steps 2.1 to 2.5.

And 2.1, starting the server after the webpack is successfully constructed.

And 2.2, configuring a code (git) warehouse address and a branch of the item on the server, creating a target directory after starting, pulling down the item through git clone (clone), and switching to the target branch.

And 2.3, the server uses the socket to establish websocket connection, waits for the browser to be connected, and reads the target directory.

The websocket connection can modify the target directory, namely the source code, after receiving the message, thereby solving the problem that the existing scheme cannot be linked with the source code.

And 2.4, providing an interface for reading StyleTrateTree json externally, and obtaining the getStyleTrateTree through the interface.

And 2.5, monitoring an array of the modification pattern through the onMessage event in the websocket.

The agreed protocol for the elements in the array is shown in table 6.

Example of a contract protocol for elements in the array of Table 6

Through a message protocol, a code layer analysis protocol is used for modifying a target directory, so that although the target directory cannot be edited in a browser through a real-time file read-write stream, a server can also obtain node confidence needing to be modified and modified content through message triggering.

The third part, writing SDK access in code, provides support for style replacement capability at project runtime.

Mainly, but not limited to, the following step 3.1 to step 3.9 may be included.

And 3.1, starting the SDK.

And 3.2, opening the connection with the server in the second part, and establishing the websocket connection.

The declaration style modifies the array variable stylemodifyrrules.

And 3.3, acquiring a style level tracking tree style TraceTree json through the style TraceTree json interface in the step 2.4, and storing the style level tracking tree style TraceTree json in the memory.

And 3.4, adding a transparent covering layer with the current screen size under the body of the html tree, adding monitoring of mouse movement events, positioning an element when a user clicks any element, and storing the element (declared as $ element) in a memory. Taking the element's width, height, position, creating a mask element of the same size, position on the mask layer, disabling the capture event down, preventing $ elements from triggering the event. The method aims to prevent the logic bound in the elements from containing various triggers such as jumping and popup window and influencing the visual feeling of pattern adjustment.

And 3.5, simulating a debugging style of the browser console, starting to retrieve the information of the current element when the mask element in the step 3.4 is clicked, and then collecting and processing the element style node.

The process of step 3.5 is relatively complex, and the overall process is shown in fig. 20.

Specifically, the following S2001 to S2016 may be included, but not limited thereto.

S2001, acquiring a $ element piece;

the $ element is obtained based on the click element.

Processing selectcontntlist, reading pointerqueue, and executing the following S2012;

s2002, judging whether the node is a pseudo element node;

if so, the $ element points to its parent element and continues to execute S2002; if not, executing the following S2003;

s2003, resolving selectrlist;

s2004, judging whether the head node has a value;

popping a first node, and judging whether the first node has a value or not; if yes, the following S2005 is executed; if not, executing the following S2006;

s2005, whether $0 nodes can be hit in pointer.target;

if yes, execute the following S2007; if not, deleting the first node, and continuing to execute S2003;

s2006, judging whether the current pointer $0 has a value or not;

if yes, execute the following S2014; if not, deleting the last element, and executing S2012;

s2007, judging whether the node $0 is isleaf;

if yes, execute the following S2008; if not, executing the following S2009;

s2008, inserting seletcontntrlist;

s2009, judging whether the pointer is a value or not;

if yes, executing the following S2010; if not, executing the following S2011;

s2010, judging whether Pseudo can be found in pointer $0.Pseudo in Pseudo devices;

if not, executing the following step S2011; if no, executing the following S2013;

s2011, creating an object h 1;

s2012, inserting pointerqueue;

after the last element is taken out, the following S2016 is executed;

s2013, creating an object h 2;

and executes S2012;

s2014, determining whether the value of pointer.

If yes, deleting the last element, and executing S2012; if not, executing the following S2015;

s2015, obtaining a parent element of $ element, creating a new pointer, where pointer.

S2016, finding a pointer.target;

and proceeds to S2005.

The procedure of step 3.5 is explained below by way of example 3.

Example 3 may include:

for example 3, the process of step 3.5 may include, but is not limited to, steps a through i described below.

a. If the click event is triggered on the pseudo element, the $ element points to the upper node thereof, and a variable pseudo element label is created for storing the pseudo element label.

And b, acquiring three major element information of the element, namely id, class array and tag.

The selector type is appended forward according to the selector type value in table 3.

And then maintained as an array in a prioritized order. Taking example 3 as an example, if the selected $ element is the pointed node, the array selectrorlist [ ' # username ', '.msg, ' div ' ]isfinally obtained.

And c, acquiring StyleTraceTree json, creating an empty queue pointerQueue, wherein the internal node is a queueItem, and the attribute meaning of the queueItem is shown in a table 7.

TABLE 7 QuueItem attribute meaning example

And creating a first queueItem object according to the default values of the attributes in the table 7, and inserting the first queueItem object into the pointerQueue.

Step d, declaring an array variable SelectContentList which is used for collecting cs rule nodes owned by the $ element.

And e, acquiring the last element pointer from the pointer queue list.

Step f, pop the first node selector from pointer.Selectorlist, and process according to the processing logic of Table 8.

TABLE 8 example of processing logic for node selector

Taking the selectrist [ ' # username ', '. msg, ' div ' ] obtained in step b (which may also be abbreviated as 3.5b) of step 3.5 as an example, the obtained ' # username ' electorList is updated to [ '. msg ', ' div ' ]; as per the rule of Table 8, selector has a value, so step g in 3.5 is performed downwards.

And g, mapping the selector type value by using the first bit according to the table 3, and taking the value tag if the selector type value cannot be mapped. A selector type value is obtained.

Taking example 3 as an example, the selector type value id and the element username are obtained from the # username obtained after the processing in step f. And mapping the selector _ type and the selector _ value in the pointer.target by using the selector type value and the element value to obtain a consistent node A, and using the rule for all subsequent node searches of the pointer.target.

1. And B, judging A: if the type of the pointer is parent and the adjacencies of the A are true (the css selector rule is a sub-element selector and only a direct first-level sub-element can be selected), whether the pointer _ parent level is larger than 1 is judged, if so, the node A is continuously selected to be ignored, downward traversal is continuously performed, and otherwise, the A is assigned to the pointer $0.

The creation rule of lastSelector is declared, table 9.

Table 9 example of creation rules for lastSelector

If isLeaf for pointer $0 is true, it indicates that the leaf node of StyleTraceTree is reached, and creates an object: key: the value according to the rules of Table 9 includes:

source _ file _ path: source _ file _ path of $0,

source: the source of $0,

nodes: nodes of pointerer $0

Added to the SelectorContentList. Otherwise, the downward execution is continued.

2. If the node cannot be obtained, repeating the step f.

And h, judging that the pointer has a value, if so, taking out the pointer $0. pseudo-Sodecectors to scan whether nodes with the equal selector _ value and the pointer.

1. If successful, the object is created.

Exemplary, target: pointer. $0.SiblingSelectors

selectorList：[]，

lastSelector: the values of Table 9 are obtained first, then on the last splice

type：‘sibling’，

parentLevel：0

pseudo：‘’

Inserted into pointerquery. And e, returning to the step e to continue the execution. Since the dummy element pseudo will only follow the last node of the sitting according to the running logic, when the dummy element node can be hit, the parent node can be searched upwards.

2. Failure or no value, object is created.

Exemplary, target: pointers. $0.SiblingSelectors

selectorList: a deep copy of pointer.selectorlst,

lastSelector: obtaining values according to the rules of Table 9

type：‘sibling’，

parentLevel：0

pseudo：pointer.pseudo

Inserted into pointerQueue. And e, returning to the step e to continue the execution.

i. When the values of the pointer.selectrist are completely traversed, judging whether the length of the ParentSectors of the pointer $0 is 0, if so, setting the pointer.parentItera to true, and returning to the step e to continue to execute; if not 0, acquiring the parent element of the $ element through the $ element. Otherwise, acquiring three major element information of the parent element, namely id, class array and tag. The selector type is added forward according to the selector type value in table 3. Then, the merged list is maintained as an array parentselectordlistin according to the priority order.

Creating objects

target：pointer.$0.parentElement，

selectorList＝parentSelectorList，

type：‘parent’

lastSelector: values according to the rules of table 9, parentLevel: parentlevel +1 was inserted into poiterqueue. And e, returning to the step e to continue the execution.

When all steps in step 3.5 go to the isLeaf completion node of step g in step 3.5 and the pointerQueue array is zeroed, execution is complete.

The above logic is somewhat complex and the complete flow is shown in fig. 21.

The storage process of the entire pointerquery is as follows, as shown in fig. 22.

After clicking on an element, a StyleTraceTree is pushed in the pointerQueue, and then the currently processed selectors are # username,. msg, div, as shown in the first line of FIG. 22.

Then pop up the last element of # username in pointerquery, namely styletrancetree, to find the element corresponding to # username, and then obtain the sibingselector of # username according to the rule of h after finding, where the remaining selectors to be processed are msg and div, as shown in the second row of fig. 22.

Msg, find in the last element of pointerquery, namely the SiblingSelector of # username, and continue to find div if not found, as shown in the third and fourth rows of fig. 22.

When the selection to be processed is empty, the parent element is searched upwards according to the logic of i, at this time, the parentSelectors of # username are pushed into pointerQueue to process the selector of the parent element, group and div, the search is repeated continuously according to the above rule, as shown in the fifth, sixth and seventh lines of fig. 22.

When the isLeaf element is finally found, like in FIG. 22, Login, processing node is inserted into SelectContentList, then the last element is pushed out of pointerQueue, processing continues, selector processing list is empty, then the last element is pushed out of pointerQueue, and processing is repeated until finally pointerQueue stack is empty, then processing is complete.

And 3.6, when the execution of the step 3.5 is finished, all the cs rule nodes written in the codes are scanned, and the capability of acquiring all the cs nodes on the browser is achieved at the moment, which is a step which cannot be achieved by the existing scheme. Saving the SelectContentList to sessionStorage, and then traversing the SelectContentList to obtain selectorContent, wherein key is the selector and nodes is the declaration block code of css. Traversing nodes, combining prop and value in the nodes into key: value, reassembled into hierarchical Block, and shown with selector as cs rule syntax. And through a visual window, assigning values in an input box of the browser, and displaying the values to a user for viewing and providing modification capability.

And 3.7, when the user modifies the statement block rule, using the insert rule Api of CSSStyleSheet, covering the latest style by the local browser, and updating the browser display.

3.8, then using key of selectoContent to deduplicate the element selector in the stylemodify rules list created in the step 3.1 by using key as a unique value, and if the same element exists, replacing the old rules by modified declotionBlock; if there are no identical elements, create an object:

selector：selectorContent.key，

source_path：selectorContent.source_path，

declarationsBlock：declarationsBlock

source：selectorContent.source

added to the end of the stylemodifyrtles.

And step 3.9, when the user calls sdk to confirm the style modification, the sendMessage is called to send style update rules to the server through 3.1 websocket connection established with the server.

And finding all selectors acted under the elements through the hierarchical indexes of the elements to the pattern hierarchical tracking tree, acquiring the position information of the corresponding selectors, tracking information of code blocks of the source file after the elements are touched, and then completing the operation of the source code through analyzing the partial information.

And the fourth part is that the service end receives styleModifyRules.

Specifically, the method may include, but is not limited to, the following steps 4.1 to 4.2.

Step 4.1, after receiving the stylemodifyRules, the server side traverses and obtains each element styleRule, creates a file modification stream, opens a file corresponding to source _ path under a target directory, then resolves the file into ast by a parser, and replaces the classpationsBlock in the styleRule by postcss Api on the ast through the source (start, end contains the coordinates of the old classpationsBlock in the code block) of the styleRule to replace the code.

And 4.2, submitting and reconstructing the execution code. Json, a new styletracetree is generated and provided to the browser to update the just-replaced style.

The front-end and back-end interaction logic is shown in fig. 23.

The embodiment solves the problem that the source code cannot be directly acted on from the browser, provides the index file for hitting the style rule after the StyleTraceTree is collected, and provides a basis for the user to find the style rule on the front end and output the code.

And the starting server establishes connection with the browser through the websocket, and the modified result is cached locally through the sessionStorage to achieve persistence. And after the codes are submitted, the codes of the project are pulled through a git warehouse and then are reconstructed, so that the latest codes are ensured to run in the project and the browser.

In a third aspect, in order to implement the data processing method, a first data processing apparatus according to an embodiment of the present application is described below with reference to a schematic structural diagram of the data processing apparatus shown in fig. 24.

As shown in fig. 24, the first data processing apparatus 240 includes: an obtaining unit 2401, a first sending unit 2402, a first receiving unit 2403 and a modifying unit 2404. Wherein:

the obtaining unit 2401 is configured to: obtaining a hierarchical tracking tree of a browser style; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style;

the first sending unit 2402 is configured to: sending the hierarchical tracking tree to a terminal device through a first connection; so that the terminal equipment obtains style modification information according to the hierarchical tracking tree; the first connection is a connection which is established between the server and the terminal equipment and is used for carrying out style modification on a source code of a browser;

the first receiving unit 2403 is configured to: receiving the style modification information sent by the terminal equipment through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name;

the modifying unit 2404 is configured to: and acquiring the source file through the file path, replacing the declaration block corresponding to the selector name at the position of the declaration block in the source file with the target declaration block, and finishing the modification of the browser style.

In some embodiments, the obtaining unit 2401 is further configured to:

converting a source file of the browser into an abstract syntax tree AST; said AST comprising n branches, one said branch comprising m nodes of a second type;

determining a pre-processing list based on the AST; performing first processing on each branch of the AST respectively to obtain a preprocessing object corresponding to each branch; the preprocessing list comprises n preprocessing objects; one of the pretreatment objects includes: first information, path information and leaf node information; the first information is used for representing the information of selectors sequentially included by the branches; the path information is used for representing the storage path of the source file; the leaf node information is used for representing second information of a second type of leaf node corresponding to the branch;

building the hierarchical tracking tree based on the pre-processing list; and performing second processing on each preprocessing object in the preprocessing list to obtain a hierarchy corresponding to each preprocessing object.

In some embodiments, the obtaining unit 2401 is further configured to:

traversing each second type node in the branch, and sequentially acquiring the information of the selector in the second type node;

connecting the information of the selector in each second type node through a first symbol to obtain the first information in the preprocessed object;

determining a storage path of the source file as the path information in the pre-processing object;

determining second information of a leaf node of the branch as the leaf node information in the pre-processing object; the second information includes a declaration entry of the leaf node, a declaration value of the leaf node, and the declaration block position.

In some embodiments, the obtaining unit 2401 is further configured to:

splitting first information in the preprocessed object into k first type elements through a first symbol; the first type element includes at least a selector name; k is greater than or equal to 1;

processing each of the k first-type elements to obtain s first-type nodes; the first type node comprises at least: a selector name, first indication information, and second indication information; the first indication information is used for representing whether a first type of node related to brothers exists or not, and the second indication information is used for representing whether a first type of node related to parents and children exists or not;

determining a relationship between adjacent ones of the s nodes of a first type based on the elements of the first type; the relationship comprises a parent-child relationship or a brother relationship; s is greater than 1;

and sequentially connecting the adjacent first type nodes based on the relationship between the adjacent first type nodes to obtain the hierarchy corresponding to the pretreatment object.

In some embodiments, the first data processing apparatus 240 may further comprise a processing unit for:

submitting the source code with the modified browser style;

constructing based on the modified source code to obtain an executable code corresponding to the modified source code;

sending the executable code corresponding to the modified source code to terminal equipment; so that the terminal device runs the browser based on the executable code corresponding to the modified source code.

In a fourth aspect, in order to implement the above data processing method, a second data processing apparatus according to an embodiment of the present application is described below with reference to a schematic structural diagram of the data processing apparatus shown in fig. 25.

As shown in fig. 25, the second data processing apparatus 250 includes: a second receiving unit 2501, a first determining unit 2502, a searching unit 2503, a second determining unit 2504 and a second transmitting unit 2505.

Wherein: the second receiving unit 2501 is configured to: receiving a browser-style hierarchical tracking tree sent by a server through a first connection; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style;

the first determination unit 2502 is configured to: determining b second type elements based on the operation of the user; b is greater than or equal to 1;

the lookup unit 2503 is configured to: sequentially searching for a relevant node of a first type corresponding to each of said b elements of a second type in said hierarchical tracking tree;

the second determination unit 2504 is configured to: determining style modification information based on the relevant first-type nodes; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name;

the second transmitting unit 2505 is configured to: and sending the style modification information to the server through the first connection, so that the server modifies the source code of the browser according to the style modification information.

In some embodiments, the first determination unit 2502 is further configured to:

starting a style modification function of the browser based on a first operation of a user;

adding a transparent covering layer on the interface of the browser;

determining the b second type elements based on a second operation on the transparent cover layer;

the method further comprises the following steps:

creating a mask element on the mask layer based on the b second type elements; and shielding the trigger events corresponding to the b second type elements through the mask elements.

In some embodiments, if said b elements of the second type comprise in sequence: element A and element B; the lookup unit 2503 is further configured to:

searching in the hierarchical tracking tree based on the element A to obtain a first type node A corresponding to the element A;

searching the element B in a first type node B related to brothers of the first type node A in the hierarchical tracking tree to obtain a first search result; if the result of the first search result is not found, searching the element B in a first type node C related to the father and the son of the first type node A to obtain a second search result;

if the second search result is not found, searching the element B in a new first type node B related to brothers of the new first type node A by taking the first type node C as the new first type node A to obtain a new first search result; if the new first search result is not found, searching the element B in a new first type node C related to the father and the son of the new first type node A to obtain a fourth search result; until the new first type node C does not have a first type node related to a parent and a child;

in the case that there are no parent-child related nodes of the first type of the new node C, determining the related nodes of the first type corresponding to each of the b elements of the second type at least comprises: a first type node A, a first type node C associated with a parent of the first type node A, and the new first type node C if the new first type node C does not have a parent-child associated first type node.

In some embodiments, the second determining unit 2504 is further configured to:

determining the content of a Cascading Style Sheet (CSS) to be modified based on the related first-type node;

displaying the content of the CSS on a display interface;

determining the modified content of the CSS based on a third operation of the user;

determining the modified contents of the CSS as a target declaration block of the style modification information;

determining the name of a selector corresponding to the related first-type node as a declaration block position of the style modification information; determining a name of a first selector as a selector name of the style modification information; the first selector is the selector corresponding to the found second type element as the search result.

It should be noted that the data processing apparatus provided in the embodiment of the present application includes each included unit, and may be implemented by a processor in an electronic device; of course, the implementation can also be realized through a specific logic circuit; in the implementation process, the Processor may be a Central Processing Unit (CPU), a microprocessor Unit (MPU), a Digital Signal Processor (DSP), a Field Programmable Gate Array (FPGA), or the like.

The above description of the apparatus embodiments, similar to the above description of the method embodiments, has similar beneficial effects as the method embodiments. For technical details not disclosed in the embodiments of the apparatus of the present application, reference is made to the description of the embodiments of the method of the present application for understanding.

It should be noted that, in the embodiment of the present application, if the data processing method is implemented in the form of a software functional module and sold or used as a standalone product, the data processing method may also be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially implemented or portions thereof contributing to the related art may be embodied in the form of a software product stored in a storage medium, and including several instructions for enabling a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read Only Memory (ROM), a magnetic disk, or an optical disk. Thus, embodiments of the present application are not limited to any specific combination of hardware and software.

In a fifth aspect, to implement the data processing method, an embodiment of the present application provides an electronic device, which includes a memory and a processor, where the memory stores a computer program that is executable on the processor, and the processor implements the steps in the data processing method provided in the foregoing embodiment when executing the program.

Next, a configuration diagram of the electronic device will be described with reference to the electronic device 260 shown in fig. 26.

In an example, the electronic device 260 can be the electronic device described above. As shown in fig. 26, the electronic device 260 includes: a processor 2601, at least one communication bus 2602, a user interface 2603, at least one external communication interface 2604, and memory 2605. Wherein the communication bus 2602 is configured to enable connective communication between these components. The user interface 2603 may include a display screen and the external communication interface 2604 may include standard wired and wireless interfaces, among others.

The Memory 2605 is configured to store instructions and applications executable by the processor 2601, and may also buffer data (e.g., image data, audio data, voice communication data, and video communication data) to be processed or already processed by the processor 2601 and modules in the electronic device, and may be implemented by a FLASH Memory (FLASH) or a Random Access Memory (RAM).

In a sixth aspect, the present application provides a storage medium, that is, a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the steps in the data processing method provided in the foregoing embodiments.

It is to be noted here that: the above description of the storage medium and device embodiments is similar to the description of the method embodiments above, with similar advantageous effects as the method embodiments. For technical details not disclosed in the embodiments of the storage medium and apparatus of the present application, reference is made to the description of the embodiments of the method of the present application for understanding.

It should be appreciated that reference throughout this specification to "one embodiment" or "an embodiment" means that a particular feature, structure or characteristic described in connection with the embodiment is included in at least one embodiment of the present application. Thus, the appearances of the phrases "in one embodiment" or "in some embodiments" in various places throughout this specification are not necessarily all referring to the same embodiment. Furthermore, the particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. It should be understood that, in the various embodiments of the present application, the sequence numbers of the above-mentioned processes do not mean the execution sequence, and the execution sequence of each process should be determined by its function and inherent logic, and should not constitute any limitation to the implementation process of the embodiments of the present application. The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.

It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

In the several embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The above-described device embodiments are merely illustrative, for example, the division of the unit is only a logical functional division, and there may be other division ways in actual implementation, such as: multiple units or components may be combined, or may be integrated into another system, or some features may be omitted, or not implemented. In addition, the coupling, direct coupling or communication connection between the components shown or discussed may be through some interfaces, and the indirect coupling or communication connection between the devices or units may be electrical, mechanical or other forms.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units; can be located in one place or distributed on a plurality of network units; some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.

In addition, all functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may be separately regarded as one unit, or two or more units may be integrated into one unit; the integrated unit may be implemented in the form of hardware, or in the form of hardware plus a software functional unit.

Those of ordinary skill in the art will understand that: all or part of the steps for realizing the method embodiments can be completed by hardware related to program instructions, the program can be stored in a computer readable storage medium, and the program executes the steps comprising the method embodiments when executed; and the aforementioned storage medium includes: various media that can store program codes, such as a removable Memory device, a Read Only Memory (ROM), a magnetic disk, or an optical disk.

Alternatively, the integrated units described above in the present application may be stored in a computer-readable storage medium if they are implemented in the form of software functional modules and sold or used as independent products. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially implemented or portions thereof contributing to the related art may be embodied in the form of a software product stored in a storage medium, and including several instructions for enabling a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: various media that can store program code, such as removable storage devices, ROMs, magnetic or optical disks, etc.

The above description is only for the embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily conceive of changes or substitutions within the technical scope of the present application, and shall be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A data processing method is applied to a server, and the method comprises the following steps:

2. The method of claim 1, wherein obtaining a hierarchical tracking tree of browser style comprises:

3. The method of claim 2, wherein said performing a first process on each of said branches of said AST to obtain a pre-processing object corresponding to each of said branches comprises:

determining second information of a leaf node of the branch as the leaf node information in the preprocessing object; the second information includes a declaration entry of the leaf node, a declaration value of the leaf node, and the declaration block position.

4. The method according to claim 2, wherein the second processing each of the preprocessed objects in the preprocessed list to obtain a hierarchy corresponding to each of the preprocessed objects comprises:

and sequentially connecting the adjacent first type nodes based on the relationship between the adjacent first type nodes to obtain a hierarchy corresponding to the pretreatment object.

5. The method of claim 1, further comprising:

submitting the source code with the modified browser style;

6. A data processing method is characterized in that the method is applied to terminal equipment, and a browser runs on the terminal equipment; the method comprises the following steps:

receiving a browser-style hierarchical tracking tree sent by a server through a first connection; the hierarchical tracking tree comprises n levels; the n is greater than 0; one of said levels comprising in sequence m nodes of a first type, said m being greater than 1; two adjacent first-type nodes in the m first-type nodes are related to father and son or brother; one of said first-type nodes corresponding to a selector of said browser style;

determining b second type elements based on the operation of the user; b is greater than or equal to 1;

sequentially searching for a relevant node of a first type corresponding to each of said b elements of a second type in said hierarchical tracking tree;

determining style modification information based on the relevant first-type nodes; the style modification information includes: a target declaration block, a file path, a declaration block location, and a selector name;

and sending the style modification information to the server through the first connection, so that the server modifies the source code of the browser according to the style modification information.

7. The method of claim 6, wherein the user-based operation determining b elements of the second type comprises:

adding a transparent covering layer on the interface of the browser;

the method further comprises the following steps:

8. The method of claim 6, wherein if said b second type elements comprise in sequence: element A and element B; said sequentially finding, in said hierarchical tracking tree, an associated node of a first type corresponding to each of said b elements of a second type, comprising:

9. The method of claim 6, wherein determining the pattern modification information based on the associated first-type node comprises:

displaying the content of the CSS on a display interface;

10. An electronic device comprising a memory and a processor, the memory storing a computer program operable on the processor, the processor implementing the data processing method of any one of claims 1 to 9 when executing the program.

11. A storage medium on which a computer program is stored, characterized in that the computer program, when executed by a processor, implements the data processing method of any one of claims 1 to 9.