A data processing method, apparatus, device, and storage medium

Abstract

The present application discloses a data processing method, apparatus, device and storage medium. The method is applied to a server and includes: obtaining a hierarchical tracking tree of browser styles; sending the hierarchical tracking tree to a terminal device through a first connection; enabling the terminal device to obtain style modification information according to the hierarchical tracking tree; receiving the style modification information sent by the terminal device through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name; obtaining the source file through the file path, and replacing the declaration block corresponding to the selector name at the declaration block position in the source file with the target declaration block to complete the modification of the browser style. For the solution of the present application, when modifying the browser style, it is possible to modify the source code, improving the convenience of modifying browsers programmed based on the source code.

Description

Technical Field

[0001] This application relates to the technical field of data processing, including but not limited to data processing methods, devices, equipment, and storage media. Background Art

[0002] With the rapid development of computer technology, more and more technologies are applied in the financial field. The traditional financial industry is gradually transforming into financial technology (Fintech). However, due to the security and real-time requirements of the financial industry, higher requirements are also imposed on technologies.

[0003] For browsers developed for medium and large-scale projects using frameworks, after the source code is written, it needs to be compiled into runnable code through a build tool, and then given to the browser for running.

[0004] When modifying the browser style, if directly modifying the runnable code on the browser side, since the runnable code is a build product and a new build product will be generated every time the source code is built, if the source code is not modified and only changes are made to the runnable code, subsequent builds will still not take effect, that is, the style modification is invalid. Summary of the Invention

[0005] This application provides a data processing method, device, equipment, and storage media, which can modify the source code when modifying the browser style, improving the convenience of modifying browsers programmed based on the source code.

[0006] The technical solution of this application is implemented as follows:

[0007] In a first aspect, this application provides a data processing method, which is applied to a server. The method includes:

[0008] Obtain a hierarchical tracking tree of the browser style; the hierarchical tracking tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style;

[0009] Send the hierarchical tracking tree to the terminal device through a first connection; so that the terminal device obtains style modification information according to the hierarchical tracking tree; the first connection is a connection established between the server and the terminal device for modifying the style of the source code of the browser;

[0010] Receive the style modification information sent by the terminal device through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name;

[0011] Obtain the source file through the file path, and replace the declaration block corresponding to the selector name at the position of the declaration block in the source file with the target declaration block to complete the modification of the browser style.

[0012] In a second aspect, the present application provides another data processing method, which is applied to a terminal device on which a browser is running; the method includes:

[0013] Receive, through a first connection, a hierarchical trace tree of browser styles sent by a server; the hierarchical trace tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; determine b second-type elements based on a user operation; b is greater than or equal to 1; in the hierarchical trace tree, sequentially find the relevant first-type nodes corresponding to each of the b second-type elements; determine 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 position, and a selector name; send 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.

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

[0015] The obtaining unit is configured to: obtain a hierarchical trace tree of browser styles; the hierarchical trace tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style;

[0016] The first sending unit is configured to: send the hierarchical trace tree to the terminal device through a first connection; so that the terminal device obtains style modification information according to the hierarchical trace tree; the first connection is a connection established between the server and the terminal device for modifying the style of the source code of the browser;

[0017] The first receiving unit is configured to: receive the style modification information sent by the terminal device through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name;

[0018] The modification unit is configured to: obtain the source file through the file path, and replace the declaration block corresponding to the selector name at the declaration block position in the source file with the target declaration block, so as to complete the modification of the browser style.

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

[0020] The second receiving unit is configured to: receive, through a first connection, a hierarchical tracking tree of the browser style sent by the server; the hierarchical tracking tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style;

[0021] The first determining unit is configured to: determine b second-type elements based on the user's operation; b is greater than or equal to 1;

[0022] The searching unit is configured to: sequentially search in the hierarchical tracking tree for the relevant first-type nodes corresponding to each of the b second-type elements;

[0023] The second determining unit is configured to: determine 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 position, and a selector name;

[0024] The second sending unit is configured to: send 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.

[0025] In a fifth aspect, the present application further provides an electronic device, including: a memory and a processor, the memory stores a computer program that can run on the processor, and when the processor executes the program, the above data processing method is implemented.

[0026] In a sixth aspect, the present application further provides a storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the above data processing method is implemented.

[0027] The data processing method, apparatus, device, and storage medium provided by this application at least include: obtaining a hierarchical tracking tree of browser styles; the hierarchical tracking tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; sending the hierarchical tracking tree to a terminal device through a first connection; so that the terminal device obtains style modification information according to the hierarchical tracking tree; the first connection is a connection established between the server and the terminal device for modifying the source code of the browser; receiving the style modification information sent by the terminal device through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name; obtaining the source file through the file path, and replacing the declaration block corresponding to the selector name at the declaration block position in the source file with the target declaration block to complete the modification of the browser style.

[0028] For the solution of this application, on the one hand, communication between the server and the terminal device running the browser is achieved through the first connection, providing a communication basis for modifying the source code; on the other hand, the server obtains the hierarchical tracking tree of browser styles, sends the hierarchical tracking tree to the terminal device, then 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 modifying the browser programmed based on the source code is improved. Description of the Drawings

[0029] Figure 1 It is an optional structural schematic diagram of the data processing system provided by an embodiment of this application;

[0030] Figure 2 It is an optional flowchart of the data processing method provided by an embodiment of this application

[0031] Figure 3 It is an optional flowchart of the data processing method provided by an embodiment of this application;

[0032] Figure 4 It is an optional flowchart of the data processing method provided by an embodiment of this application;

[0033] Figure 5 It is an optional flowchart of the data processing method provided by an embodiment of this application;

[0034] Figure 6 It is an optional flowchart of the data processing method provided by an embodiment of this application;

[0035] Figure 7 An optional structural diagram of the css rules provided by the embodiments of this application;

[0036] Figure 8 An optional structural diagram of the processing process of the mainstream framework project code provided by the embodiments of this application;

[0037] Figure 9 An optional schematic diagram of the browser interface provided by the embodiments of this application;

[0038] Figure 10 An optional structural diagram of the code processing process provided by the embodiments of this application;

[0039] Figure 11 An optional structural diagram of the code processing process provided by the embodiments of this application;

[0040] Figure 12 An optional flowchart of the data processing process provided by the embodiments of this application;

[0041] Figure 13 An optional structural diagram of the css parsing process provided by the embodiments of this application;

[0042] Figure 14 An optional structural diagram of the ast tree provided by the embodiments of this application;

[0043] Figure 15 An optional schematic diagram of the preprocessing list provided by the embodiments of this application;

[0044] Figure 16 An optional flowchart of the data processing process provided by the embodiments of this application;

[0045] Figure 17 An optional flowchart of the data processing process provided by the embodiments of this application;

[0046] Figure 18 An optional structural diagram of the node pointing relationship provided by the embodiments of this application;

[0047] Figure 19 An optional structural diagram of the hierarchical tracking tree provided by the embodiments of this application;

[0048] Figure 20 An optional flowchart of the data processing process provided by the embodiments of this application;

[0049] Figure 21 An optional structural diagram of the data processing process provided by the embodiments of this application;

[0050] Figure 22 An optional structural diagram of the stored procedure provided by the embodiment of the present application;

[0051] Figure 23 An optional structural diagram of the front-end and back-end interaction logic provided by the embodiment of the present application;

[0052] Figure 24 An optional structural diagram of the first data processing device provided by the embodiment of the present application;

[0053] Figure 25 An optional structural diagram of the second data processing device provided by the embodiment of the present application;

[0054] Figure 26 An optional structural diagram of the electronic device provided by the embodiment of the present application. Detailed implementation manners

[0055] To make the objectives, technical solutions, and advantages of the embodiments of the present application clearer, the following will further describe the specific technical solutions of the application in detail with reference to the accompanying drawings in the embodiments of the present application. The following embodiments are used to illustrate the present application but are not intended to limit the scope of the present application.

[0056] In the following description, "some embodiments" are involved, which describe a subset of all possible embodiments. However, it can be understood that "some embodiments" can be the same subset or different subsets of all possible embodiments, and can be combined with each other without conflict.

[0057] In the following description, the terms "first / second / third" involved are only used to distinguish different objects, and do not represent a specific order for the objects, and there is no limitation on the order of precedence. It can be understood that "first / second / third" can be interchanged with a specific order or sequence when allowed, so that the embodiments of the present application described here can be implemented in an order other than that illustrated or described here.

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

[0059] The embodiments of the present application may provide a data processing method, device, equipment, and storage medium. In practical applications, the data processing method can be implemented by a data processing device, and each functional entity in the data processing device can be realized in cooperation with the hardware resources of an electronic device, such as computing resources such as a processor, and communication resources (such as those used to support various communication methods such as optical cables and cellular networks).

[0060] The data processing method provided by the embodiment of this application is applied to a data processing system, which includes a server and a terminal device.

[0061] The server is used to execute: obtaining a hierarchical tracking tree of browser styles; the hierarchical tracking tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; sending the hierarchical tracking tree to the terminal device through a first connection; so that the terminal device obtains style modification information according to the hierarchical tracking tree; the first connection is a connection established between the server and the terminal device for modifying the style of the source code of the browser; receiving the style modification information sent by the terminal device through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name; obtaining the source file through the file path, and replacing the declaration block corresponding to the selector name at the declaration block position in the source file with the target declaration block to complete the modification of the browser style.

[0062] The terminal device is used to execute: receiving a hierarchical tracking tree of browser styles sent by the server through a first connection; the hierarchical tracking tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; determining b second-type elements based on the user's operation; b is greater than or equal to 1; sequentially searching for relevant first-type nodes corresponding to each of the b second-type elements in the 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 position, and a selector name; 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.

[0063] Optionally, the data processing system may further include a first electronic device. The first electronic device is used to generate a hierarchical tracking tree of browser styles and then send the generated hierarchical tracking tree to the server.

[0064] It can be understood that the process of generating a hierarchical tracking tree of browser styles may also be implemented on the server side.

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

[0066] As an example, the structure of the data processing system may be as Figure 1 shown, including: a server 10 and a terminal device 20. Among them, data can be transmitted between the server 10 and the terminal device 20.

[0067] Here, the server 10 is used to execute: obtaining a hierarchical trace tree of browser styles; the hierarchical trace tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; sending the hierarchical trace tree to the terminal device through a first connection; so that the terminal device obtains style modification information according to the hierarchical trace tree; the first connection is a connection established between the server and the terminal device for modifying the source code of the browser; receiving the style modification information sent by the terminal device through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name; obtaining the source file through the file path, and replacing the declaration block corresponding to the selector name at the declaration block position in the source file with the target declaration block to complete the modification of the browser style.

[0068] Among them, the server 10 can be an electronic device with relevant data processing capabilities such as a server, a computer, etc.

[0069] The terminal device 20 is used to execute: receiving a hierarchical trace tree of browser styles sent by the server through a first connection; the hierarchical trace tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; determining b second-type elements based on the user's operation; b is greater than or equal to 1; in the hierarchical trace tree, sequentially searching for relevant first-type nodes corresponding to each of the b second-type elements; 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 position, and a selector name; 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.

[0070] Among them, the second electronic device 20 may include: a mobile terminal device (such as a mobile phone, a tablet computer, etc.), or a non-mobile terminal device (such as a desktop computer, a server, etc.) and other electronic devices with relevant data processing capabilities.

[0071] For ease of understanding, some of the technologies involved in the embodiments of the present application are briefly explained below.

[0072] Cascading Style Sheets (CSS) is used to configure the design style and layout of a browser. Among them, CSS consists of two main parts: selectors, and one or more declarations.

[0073] Next, in combination with Figure 1 the schematic diagram of the data processing system shown, the embodiments of the data processing method, apparatus, device, and storage medium provided by the embodiments of the present application are described.

[0074] In a first aspect, an embodiment of the present application provides a data processing method, which is applied to a first data processing device; wherein, the first data processing device can be deployed in Figure 1 server 10 therein. Next, taking the server as the execution subject, the data processing process provided by the embodiments of the present application is described.

[0075] Figure 2 Schematically shows a flowchart of an optional data processing method. Referring to Figure 2 the content shown, the data processing method may include but is not limited to Figure 2 S201 to S204 shown in

[0076] S201. The server obtains a hierarchical trace tree of browser styles.

[0077] In a possible implementation manner, S201 may be implemented as: the server generates a hierarchical trace tree of browser styles based on the source code of the browser.

[0078] The hierarchical trace tree includes n levels; n>0; one level sequentially includes m first-type nodes, m>1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of browser styles.

[0079] The first-type node is a node in the hierarchical trace tree.

[0080] The embodiment of the present application does not limit the process of generating a hierarchical trace tree of browser styles based on the source code of the browser, and can be configured according to actual needs.

[0081] In another possible implementation manner, the first electronic device generates a hierarchical trace tree of browser styles based on the source code of the browser, and then sends the hierarchical trace tree of browser styles to the server. Correspondingly, S201 may be implemented as: the server receives the hierarchical trace tree of browser styles sent by the first electronic device.

[0082] The embodiments of the present application do not limit the type of the source code (which can also be referred to as the source file) of the browser, and it can be determined according to actual needs. Exemplarily, the source file of the browser can be a file written through the VUE framework; or the source file of the browser can be a file written through the React framework.

[0083] S202. The server sends the hierarchical trace tree to the terminal device through the first connection.

[0084] The first connection is a connection established between the server and the terminal device for modifying the style of the source code of the browser.

[0085] S202 can be implemented as: the server establishes a first connection with the terminal device, and the server sends the hierarchical trace tree to the terminal device through this first connection, so that the terminal device obtains style modification information according to the hierarchical trace tree.

[0086] The embodiments of the present application do not limit the connection method of the established first connection and the process of establishing the first connection, and it can be configured according to actual needs.

[0087] Exemplarily, the connection method of the established first connection can include: a websocket connection created using socketio technology.

[0088] Exemplarily, the process of establishing the first connection can include: the server sends a request to establish the first connection to the terminal device, and after receiving the request, the terminal device establishes the first connection with the server and sends a response indicating that the first connection is successfully established to the server.

[0089] S203. The server receives the style modification information sent by the terminal device through the first connection.

[0090] The style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name.

[0091] Among them, the target declaration block is the modified declaration block and includes at least one declaration.

[0092] The file path is used to represent the storage path of the source file;

[0093] The declaration block position is used to represent the position of the target declaration block in the source code. Exemplarily, the declaration block position can include: [start, end]. Among them, start represents the starting position of the target declaration block in the source code, and end represents the termination position of the target declaration block in the source code;

[0094] The selector name is used to uniquely indicate a selector.

[0095] S203 can be implemented as follows: The server receives the style modification information sent by the terminal device through the first connection, and obtains the target declaration block, file path, declaration block position, and selector name in the style modification information.

[0096] S204. The server obtains the source file through the file path, and replaces the declaration block corresponding to the selector name at the declaration block position in the source file with the target declaration block, thereby completing the modification of the browser style.

[0097] S204 can be implemented as follows: The server first obtains the file path in the style modification information, obtains the source file through this file path, the server obtains the declaration block position in the style modification information, and at the declaration block position in the source file, replaces the declaration block corresponding to the selector name with the target declaration block, thereby completing the modification of the browser style.

[0098] The data processing solution provided by the embodiments of the present application at least includes: obtaining a hierarchical tracking tree of the browser style; the hierarchical tracking tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; sending the hierarchical tracking tree to the terminal device through the first connection; so that the terminal device obtains style modification information based on the hierarchical tracking tree; the first connection is a connection established between the server and the terminal device for modifying the source code of the browser; receiving the style modification information sent by the terminal device through the first connection; the style modification information includes: target declaration block, file path, declaration block position, and selector name; obtaining the source file through the file path, and replacing the declaration block corresponding to the selector name at the declaration block position in the source file with the target declaration block, thereby completing the modification of the browser style.

[0099] For the solution of the present application, on the one hand, communication between the server and the terminal device running the browser is realized through the first connection, providing a communication basis for modifying the source code; on the other hand, the server obtains the hierarchical tracking tree of the browser style, after sending the hierarchical tracking tree 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 modifying the browser programmed based on the source code is improved.

[0100] Next, the process of the server in S201 obtaining the hierarchical tracking tree of the browser style will be described. This process may include but is not limited to the following method 1 or method 2.

[0101] Method 1: The server generates a hierarchical tracking tree in the browser style;

[0102] Method 2: The first electronic device generates a hierarchical tracking tree in the browser style and sends the hierarchical tracking tree in the browser style to the server.

[0103] Next, the process of the server generating the hierarchical tracking tree in the browser style in Method 1 will be described. For example, this process may include but is not limited to S2011 to S2013.

[0104] S2011: The server converts the source file of the browser into an Abstract Syntax Tree (AST).

[0105] Among them, the AST includes n branches, and one branch includes m type-2 nodes.

[0106] S2011 can be implemented as: The server uses an ast parser to convert the source file of the browser into an AST.

[0107] Specifically, for css-type source files, use postcss to detach the style tag and obtain the content inside the style tag; for less-type files, use postcss integrated with the postcss-less plugin to detach the style tag and obtain the content inside the style tag; for scss files, use postcss integrated with the postcss-scss plugin to detach the style tag and obtain the content inside the style tag; for vue files, use vue-loader to detach the style tag and obtain the content inside the style tag. Then use postcss for further parsing and finally parse it into an AST (which can also be called ast or ast tree or ast syntax tree).

[0108] S2012: The server determines a preprocessing list based on the AST.

[0109] S2012 can be implemented as: Based on the AST, the server performs a first process on each branch of the AST respectively to obtain a preprocessing object corresponding to each branch, thereby obtaining n preprocessing objects, and determines the n preprocessing objects as the preprocessing list.

[0110] A preprocessing object includes: first information, path information, and leaf node information. Among them, the first information is used to represent the information of the selectors included in the branch in sequence; the path information is used to represent the storage path of the source file; the leaf node information is used to represent the second information of the type-2 leaf nodes corresponding to the branch.

[0111] Exemplarily, the information of the selector may include: #username.

[0112] The first information may include:

[0113] The information of the second type of leaf node may include: a declaration item (prop), a declaration value (value), and a declaration block position (source). Among them, prop is used to represent the identifier of the declaration; value is used to represent the value of the declaration; source is used to represent the position of the declaration in the source code.

[0114] The number of the information of the second type of leaf node in the embodiments of the present application is not limited and can be determined according to the actual situation.

[0115] Exemplarily, if the source file includes:

[0116]

[0117] Then the preprocessing object may include: the first information,.Login.Group>div.msg, the path information src / view / login / index.less, the leaf node information, declaration 1 and declaration 2.

[0118] The embodiments of the present application do not limit the process of respectively performing a first process on each branch of the AST to obtain a preprocessing object corresponding to each branch, and can be configured according to actual requirements.

[0119] S2013. The server establishes the hierarchical tracking tree based on the preprocessing list.

[0120] S2013 may be implemented as: the server performs a second process on each of the preprocessing objects in the preprocessing list to obtain a level corresponding to each of the preprocessing objects, so as to obtain n levels; the n levels form a hierarchical tracking tree.

[0121] Specifically, the server creates a first type of node for a selector in a preprocessing object, and establishes the relationship between the first type of nodes based on the relationship between the selectors, so as to obtain a hierarchical tracking tree.

[0122] For Method 2, the process of the first electronic device generating a browser-style hierarchical tracking tree may refer to the detailed description of Method 1, and will not be elaborated here one by one.

[0123] Compared with Method 2, the method of obtaining the hierarchical tracking tree in Method 1 is simple and efficient; compared with Method 1, Method 2 can generate the hierarchical tracking tree through any other electronic device, and the implementation process is flexible.

[0124] Next, the process of the server in S2012 determining the preprocessing list based on the AST will be described.

[0125] Specifically, taking the example of processing a molecule to obtain a preprocessing object, this process will be described. This process may include but is not limited to the following S20121 to S20124.

[0126] S20121. The server traverses each of the second-type nodes in the branch, and sequentially obtains the information of the selectors in the second-type nodes.

[0127] The second-type node is a node in the AST.

[0128] In the embodiments of the present application, the specific content of the second-type node is not limited, and can be determined according to the actual situation. Exemplarily, the content of the second-type node may include the type of the second-type node, selector information, and node information.

[0129] Exemplarily, the second-type node may include: the type of the second-type node, rule; selector information,.login; node information, rule.

[0130] In the embodiments of the present application, the presentation form of the content of the second-type node is not limited, and can be configured according to actual requirements. Exemplarily, the content of the second-type node can be presented in the form of a table or a document.

[0131] S20121 can be implemented as: the server traverses each second-type node in the branch based on the order from top to bottom, and sequentially obtains the information of the selectors in the second-type nodes.

[0132] S20122. The server connects the information of the selectors in each of the second-type nodes with a first symbol to obtain the first information in the preprocessing object.

[0133] The first symbol is used to connect and distinguish two selector information; in the embodiments of the present application, the specific type of the first symbol is not limited, and can be configured according to the actual situation.

[0134] Exemplarily, the first symbol may be: a space or a hyphen, etc.

[0135] S20123. The server determines the storage path of the source file as the path information in the preprocessing object.

[0136] S20123. The server obtains the storage path of the source file and determines this storage path as the path information in the preprocessing object.

[0137] S20124. The server determines the second information of the leaf node of the branch as the leaf node information in the preprocessing object.

[0138] In a possible implementation, the second information includes the declaration item of the leaf node, the declared value of the leaf node, and the declaration block position.

[0139] It can be understood that the second information may also include other information, which will not be enumerated one by one here.

[0140] In this way, after obtaining the preprocessing object, it is possible to clearly know the path of each branch and the path information, etc., which can increase the convenience of subsequent processing.

[0141] Next, the process of the S2013 server establishing the hierarchical tracking tree based on the preprocessing list will be described.

[0142] Specifically, taking the process of obtaining one level from the processing of one preprocessing object as an example for illustration. This process may include but is not limited to the following S20131 to S20134.

[0143] S20131. The server splits the first information in the preprocessing object into k first-type elements through a first symbol.

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

[0145] In a possible implementation, the first-type element may include a selector name.

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

[0147] In still another possible implementation, the first primary color may include a selector plus a selector name.

[0148] Exemplarily, if the first information in the preprocessing object includes.login.group>div.msg, the first-type elements include:.login;.group; and >div.msg.

[0149] S20132. The server processes each of the k first-type elements to obtain s first-type nodes.

[0150] The first-type node at least includes: a selector name, a first indication information, and a second indication information; the first indication information is used to characterize whether there are sibling-related first-type nodes, and the second indication information is used to characterize whether there are parent-child-related first-type nodes.

[0151] It can be understood that the first-type node may also include other information. For example, the first-type node may also include a selector type, a file path, whether there are pseudo-element-related first-type nodes, whether it is adjacent, whether it is a leaf node, etc.

[0152] The embodiments of the present application do not limit the specific manifestation forms of the first type of nodes, and can be configured according to actual needs.

[0153] Exemplarily, the first type of nodes can be represented in the form of a table or a document.

[0154] S20132 can be implemented as follows: The server processes each of the k first type of elements: obtains the selector name corresponding to the first type of element, determines whether there are sibling-related first type of nodes for the first type of node, and determines whether there are parent-child-related first type of nodes for the first type of node; thereby obtaining the content of the first type of node. Traverse each first type of element to obtain s first type of nodes.

[0155] The embodiments of the present application do not limit the order of traversing each first type of element, and can be configured according to actual needs.

[0156] In one possible implementation, the server traverses in the reverse order from back to front.

[0157] In another possible implementation, the service can traverse in other orders. For example, from front to back, etc.

[0158] S20133. The server determines the relationship between adjacent first type of nodes among the s first type of nodes based on the first type of element.

[0159] The relationship includes a parent-child relationship or a sibling relationship; s is greater than 1.

[0160] The embodiments of the present application do not limit the methods for determining the parent-child relationship and the sibling relationship, and can be determined according to actual needs.

[0161] Exemplarily, the first type of node corresponding to div and the first type of node corresponding to msg are in a sibling relationship; the first type of node corresponding to group and the first type of node corresponding to div are in a parent-child relationship.

[0162] S20134. The server sequentially connects adjacent first type of nodes based on the relationship between the adjacent first type of nodes to obtain a hierarchy corresponding to the preprocessing object.

[0163] The embodiments of the present application do not limit the connection method between adjacent first type of nodes, and can be configured according to actual needs.

[0164] Exemplarily, if there is a parent-child relationship between the first type of node 1 and the first type of node 2, connect the first type of node 1 and the second type of node 2 with an arrow, and the arrow points to the second indication information of the first type of node 1.

[0165] For each preprocessed object, it is processed in the same way to obtain a hierarchical tracking tree.

[0166] In this way, the hierarchical tracking tree clearly shows the relationships between the selectors, so that other related selectors can be quickly found through one selector, improving the overall search and processing speed.

[0167] Such as Figure 3 As shown, the data processing method provided by the embodiment of the present application may further include, but is not limited to, the following S205 to S207.

[0168] S205. The server submits the source code after the browser style is modified.

[0169] Exemplarily, the server submits the source code after the browser style is modified to a code repository.

[0170] S206. The server builds based on the modified source code to obtain a runnable code corresponding to the modified source code.

[0171] For source codes in different formats, different building methods are adopted, which will not be elaborated here one by one.

[0172] S207. The server sends the runnable code corresponding to the modified source code to a terminal device.

[0173] S207 may be implemented as: the server sends the runnable code corresponding to the modified source code to a terminal device, so that the terminal device runs a browser based on the runnable code corresponding to the modified source code.

[0174] It can be seen that after the source code is modified, each build corresponds to the modified source code each time, so a substantial modification of the browser style is achieved.

[0175] The data processing method provided by the embodiment of the present application may also render the modified browser to display the modified effect.

[0176] The embodiment of the present application does not elaborate on the specific rendering process one by one.

[0177] In a second aspect, the embodiment of the present application provides another data processing method, which is applied to a second data processing device; wherein, the second data processing device may be deployed in Figure 1 the terminal device 20 therein. Below, taking the terminal device as the execution subject, the data processing process provided by the embodiment of the present application will be described.

[0178] Figure 4 Schematically shows a schematic flowchart of an optional data processing method. Refer toFigure 4 As shown in the content, the data processing method may include, but is not limited to Figure 4 S401 to S405 shown in the figure.

[0179] S401. The terminal device receives a hierarchical tracking tree in browser style sent by the server through a first connection.

[0180] The hierarchical tracking tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style.

[0181] S402. The terminal device determines b second-type elements based on the user's operation.

[0182] b is greater than or equal to 1.

[0183] The b second-type elements are elements that the user may need to process.

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

[0185] The embodiments of the present application do not limit the specific operation types, which can be configured according to actual needs. Exemplarily, the user's operations may include one or more of the following: clicking, touching, swiping, etc.

[0186] S403. The terminal device sequentially searches in the hierarchical tracking tree for the relevant first-type nodes corresponding to each of the b second-type elements.

[0187] Here, the relevant first-type node corresponding to the second-type element means: the relevant first-type node of the first-type node corresponding to the second-type element in the hierarchical tracking tree. Among them, the relevant first-type node includes a parent-child related first-type node or a sibling related first-type node.

[0188] The embodiments of the present application do not limit the search order, which can be determined according to actual needs.

[0189] In a possible implementation manner, the search order is from front to back, or from left to right.

[0190] In another possible implementation manner, the search order may also be from back to front.

[0191] S404. The terminal device determines style modification information based on the relevant first-type nodes.

[0192] The style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name.

[0193] The embodiments of the present application do not limit the specific process of the terminal device determining the style modification information based on the relevant first-type nodes, and can be configured according to the actual situation.

[0194] 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.

[0195] S405 can be implemented as: the terminal device sends the style modification information to the server through the first connection between the server and the terminal device, so that the server modifies the source code of the browser according to the style modification information.

[0196] The data processing solution provided by the embodiments of the present application at least includes: receiving, through the first connection, a hierarchical tracking tree of the browser style sent by the server; the hierarchical tracking tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; determining b second-type elements based on the user's operation; b is greater than or equal to 1; in the hierarchical tracking tree, sequentially searching for the relevant first-type nodes corresponding to each of the b second-type elements; 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 position, and a selector name; 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.

[0197] For the solution of the present application, on the one hand, communication between the server and the terminal device running the browser is achieved through the first connection, providing a communication basis for modifying the source code; on the other hand, after the server obtains the hierarchical tracking tree of the browser style and sends the hierarchical tracking tree to the terminal device, the terminal device obtains the 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 modifying the browser programmed based on the source code is improved. In this way, the convenience of modifying the browser programmed based on the source code is improved.

[0198] Next, the process of S402 where the terminal device determines b second-type elements based on the user's operation will be described. As Figure 5 shown, this process may include but is not limited to the following S4021 to S4023.

[0199] S4021. The terminal device enables the style modification function of the browser based on the user's first operation.

[0200] The first operation is used to enable the style modification function of the browser. In the embodiments of the present application, the type and action position of the first operation are not limited and can be determined according to actual needs.

[0201] Exemplarily, the first operation can be to click on a preset position of the display interface.

[0202] Exemplarily, when the user clicks on a preset position of the display interface, S4021 can be implemented as: the terminal device receives the click of the user on the preset position of the display interface, and in response to the click, enables the style modification function of the browser.

[0203] S4022. The terminal device adds a transparent overlay on the interface of the browser.

[0204] The transparent overlay is used to receive other operations of the user based on style modification. In the embodiments of the present application, the specific process of adding the transparent overlay is not limited and can be configured according to actual needs.

[0205] S4023. The terminal device determines the b second-type elements based on a second operation on the transparent overlay.

[0206] The second operation is used to determine the second-type elements of the style that the user needs to modify. In the embodiments of the present application, the type and action position of the second operation are not limited and can be determined according to actual needs.

[0207] Exemplarily, the second operation can be to click on a first position of the display interface.

[0208] Exemplarily, when the user clicks on the first position on the transparent overlay, S4021 can be implemented as: the terminal device receives the click of the user on the first position on the transparent overlay, and in response to the click, determines b selectors corresponding to the click position; based on the b selectors, determines b second-type elements.

[0209] In a possible implementation manner, determining b second-type elements based on the b selectors includes: respectively obtaining the element information of each of the b selectors, and the b selectors and the element information corresponding to the b selectors. Among them, the element information may include: identity identifier (ID), class, label.

[0210] Correspondingly, the data processing method provided by the embodiments of the present application may further include the following S4024.

[0211] S4024. The terminal device creates a mask element on the masking layer based on the b second-type elements, and shields the trigger events corresponding to the b second-type elements through the mask element.

[0212] The mask element is used to shield the trigger events corresponding to the b second-type elements. The embodiments of the present application do not limit the specific manner of creating the mask element, which can be determined according to the actual situation.

[0213] For example, a mask element can be created based on the b second-type elements; or a mask element can be created for each of the b second-type elements respectively.

[0214] In this way, unnecessary trigger events caused by user clicks can be avoided, improving the user experience.

[0215] Next, the process in which the S403 terminal device sequentially searches in the hierarchical tracking tree for the relevant first-type nodes corresponding to each of the b second-type elements will be described.

[0216] Next, this process will be described by taking the b second-type elements including element A and element B in sequence as an example. As Figure 6 shown, this process may include but is not limited to S4031 to S4034.

[0217] S4031. The terminal device searches in the hierarchical tracking tree based on the element A and obtains the first-type node A corresponding to the element A.

[0218] S4031 can be implemented as: The terminal device searches in the last layer (leaf node layer) of each branch of the hierarchical tracking tree based on the element A and obtains the first-type node A corresponding to the element A.

[0219] S4032. The terminal device searches for the element B in the first-type nodes B related to the siblings 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, then the terminal device searches for the element B in the first-type nodes C related to the parent and child of the first-type node A to obtain a second search result.

[0220] S4033. If the second search result is not found, the terminal device takes the first-type node C as the new first-type node A, searches for the element B in the new first-type nodes B related to the siblings of the new first-type node A to obtain a new first search result; if the new first search result is not found, then the terminal device searches for the element B in the new first-type nodes C related to the parent and child of the new first-type node A to obtain a fourth search result; until there is no first-type node related to the parent and child of the new first-type node C.

[0221] S4034. When there is no first-type node related to the parent-child relationship in the new first-type node C of the terminal device, determining the relevant first-type nodes corresponding to each of the b second-type elements includes at least: a first-type node A, a first-type node C related to the parent-child relationship of the first-type node A, and the new first-type node C when there is no first-type node related to the parent-child relationship in the new first-type node C.

[0222] Next, the process of S404 for the terminal device to determine the style modification information based on the relevant first-type nodes will be described. This process may include but is not limited to the following S4041 to S4045.

[0223] S4041. The terminal device determines the content of the cascading style sheet CSS to be modified based on the relevant first-type nodes.

[0224] S4041 can be implemented as: based on the relevant first-type nodes, the terminal device determines the content of each CSS corresponding to the relevant first-type nodes as the content of the cascading style sheet CSS to be modified.

[0225] Here, the number of relevant first-type nodes is the same as the number of cascading style sheets to be determined for modification.

[0226] S4042. The terminal device displays the content of the CSS on the display interface.

[0227] The embodiments of the present application do not limit the specific display method, which can be configured according to actual needs.

[0228] Exemplarily, it can be displayed in an array or in a stacked manner.

[0229] S4043. The terminal device determines the modified content of the CSS based on the third operation of the user.

[0230] The embodiments of the present application do not limit the specific type and process of the third operation, which can be configured according to actual needs.

[0231] The third operation here can be one operation or multiple operations.

[0232] Exemplarily, the third operation can be an input operation.

[0233] Exemplarily, the third operation can include: input operation, deletion operation, click operation, etc.

[0234] Exemplarily, S4043 can be implemented as: based on the input operation of the user, the terminal device obtains the input content and determines the modified content of the CSS based on the input content.

[0235] S4044. The terminal device determines the content of the modified CSS as the target declaration block of the style modification information.

[0236] S4044 can be implemented as: The terminal device writes the content of the modified CSS into the target declaration block of the style modification information.

[0237] S4045. The terminal device determines the name of the selector corresponding to the relevant first-type node as the position of the declaration block of the style modification information; and determines the name of the first selector as the selector name of the style modification information.

[0238] The first selector is the selector corresponding to the second-type element whose search result is found.

[0239] S4045 can be implemented as: The terminal device writes the name of the selector corresponding to the relevant first-type node into the position of the declaration block of the style modification information; and writes the name of the first selector as the selector name of the style modification information.

[0240] In this way, the modification of the browser style is completed based on the visual process, and the user experience is high.

[0241] Next, taking the processing process of the browser as an example, a data processing method provided by an embodiment of the present application will be described through an embodiment.

[0242] For ease of understanding, some technical terms will be briefly explained below.

[0243] Module bundler (webpack): It is a static module bundling tool for modern JavaScript applications and is currently used by most mainstream framework projects.

[0244] Webpack loader: The loader in webpack is used to transform the source code of the module.

[0245] Webpack plugin: The plugin in webpack is more powerful than the loader. It can access the life cycle during the entire webpack processing process and perform some operations.

[0246] Cascading Style Sheets (CSS): It is used for designing styles and layouts; HTML is used to define the structure and semantics of the content. Among them, the CSS rules consist of two main parts: the selector, and one or more declarations.

[0247] Exemplarily, such as Figure 7As shown, a CSS rule consists of a selector and a declaration.

[0248] CSS grouped selectors: There are many elements with the same style in the style sheet.

[0249] Such as:

[0250]

[0251] To reduce the amount of code, grouped selectors can be used. Such as:

[0252]

[0253] CSS pseudo-elements: CSS pseudo-elements are used to add special effects to some selectors. Syntax: selector:pseudo-element{property:value;}

[0254] PostCSS: It is a tool for transforming CSS code, which can compile code in less format and scss format into CSS format code, and also provides the ability to compile CSS format into ast tree format.

[0255] CSS child element selector: The child selector can only select elements that are direct / first-level children of a certain element.

[0256]

[0257] In the related technology, the front-end engineering development to the engineering type running on the browser is divided into two types:

[0258] 1. Simple project: For small projects that do not use frameworks, files of html, css, and js types are directly imported into the browser (local debugging scenario), or returned to the browser through the server (production environment scenario), and the above three types of files belong to the runnable code of the browser, which means that the browser can directly read, load, and render them.

[0259] With the development of current front-end development technology, there are fewer projects still using this development method.

[0260] 2. Mainstream framework projects: For medium and large-scale projects using frameworks (such as Vue and React), the source code during development is written using the corresponding Vue or React (JSX) syntax. Thus, since this source code cannot be directly run in a browser, after completion of writing, it needs to be compiled through build tools (such as webpack and rollup) into runnable code in the formats of html, css, and js, and then the runnable code in the formats of html, css, and js is given to the browser for running.

[0261] With the current development of front-end technologies, the development method corresponding to mainstream framework projects is the mainstream. As Figure 8 shown, this process may include: subjecting the source code 81 to code compilation and compression to obtain runnable code 82, and loading the runnable code 82 into the browser 83.

[0262] For the solution of synchronizing style modifications in the browser to the local code, it mainly relies on the workspace function in the browser. Specifically, the runnable code needs to be imported into the workspace. As Figure 9 shown, the code is imported into the workspace for style modification.

[0263] Then, creating a file read-write stream will trigger the browser's rendering and display the page after the code is read in the browser. Similarly, after modification in the workspace, just like editing word or txt files normally, through the write stream, it can directly act on the modification of the runnable code that has been loaded. As Figure 10 shown, trigger style modification on the browser 101, then enter the runnable code 102 to modify the style, and then load the modified runnable code 102 into the browser to complete the modification.

[0264] However, this solution can only be adapted to the simple projects described above and cannot be adapted to mainstream framework projects.

[0265] The main reasons include: The project source code of mainstream frameworks cannot be directly run and needs to generate runnable code after compilation, and the runnable code materials need to be imported into the browser to be run; and the runnable code is a build product, and each time the source code is built, a new build product will be generated. Therefore, if the source code of the mainstream framework is not modified and only changes are made to the runnable code, subsequent builds will still not take effect, and the records of previous modifications in the browser cannot be found. That is, the existing solutions cannot directly act on the source code of mainstream frameworks for code modification.

[0266] As Figure 11As shown, trigger the modification of the style on browser 111, and then enter the runnable code 112 to modify the style. However, each time a build is performed, since the source code 113 has not been modified, the runnable code 112 after compilation and compression of the source code has not been modified, so the runnable code loaded on browser 111 has not been modified either.

[0267] Analyzing the solutions of related technologies, the defects that the modification of the browser style cannot take effect on the framework project mainly include:

[0268] On the one hand, there is no connection established between the browser and the source code of the framework project. The browser and the runnable code are connected through file read and write streams, but the connection from the browser to the source code is missing for related technologies.

[0269] On the other hand, since the modification of the browser style needs to be synchronized to the source code, and what the browser obtains is the runnable code, and the runnable code cannot be decompiled into the source code. Therefore, to modify the source code, the position information of the runnable code block in the source code needs to be known. The difficulty lies in how to maintain a mapping table to associate the positions of code blocks between the source code and the runnable code.

[0270] Therefore, for this application, it mainly includes:

[0271] First, establish a connection from the browser to the source code and provide a solution that can write the modification into the code;

[0272] Second, establish the mapping relationship and position information between each style node of the runnable code and the source code, and then through the connection from the browser to the source code, find the modified source code block for writing.

[0273] This embodiment of this application has the following characteristics:

[0274] This solution needs to transform the construction and running processes of the code project, use a program to sort out the mapping relationship between the runnable code and the style nodes in the source code; at the same time, start a node server to provide the connection between the online browser and the source code.

[0275] 1. By developing a custom webpack plugin, during the build process, obtain the style files, use PostCSS to parse the CSS structure, obtain the rules, and then parse the rules. For each selector (i.e., the "selector" used to match the text object model (document object model, DOM) elements in the web page, the CSS style is defined as: selector (style), and the selector indicates the object to which the style applies, that is, which elements in the web page the style acts on. Sort out the fragments of the selector according to certain rules, construct an object for each fragment, and the object will maintain the corresponding declaration code block and the position of the code block, and connect them with pointer relationships. For the relationships between selectors, use fields in the object to describe them, forming a tree structure, which is declared as a style hierarchy tracking tree. Subsequently, in the browser, by selecting a DOM node, all the selectors that act on it can be traversed in the style hierarchy tracking tree, and information such as the position of the code block in the source code can be obtained.

[0276] 2. Start the Node service, create a directory in the server, use git clone to pull the latest source code, enable the browser and the server to connect via WebSocket, the Node server listens for browser requests, and creates a write stream to the source code. Receiving a notification can trigger the modification of the source code.

[0277] 3. Write an SDK to be embedded in the project code. When the code build is completed and running, the SDK script is automatically loaded. When the user triggers the style debugging function provided by the SDK in any way (such as buttons, floating windows) in the browser interface, a mask layer is loaded to cover the interface. When the user clicks on the interface to select an element, obtain the relevant attributes of the element, search for the element's attributes in the style hierarchy tracking tree, and obtain the code blocks corresponding to the leaf node selectors that all act on the element, and assemble them into a CSS rule code block to be displayed on the front end. When the user modifies the code block, use the insertRuleApi of CSSStyleSheet to modify the local style executable code, causing the browser rendering to trigger a style update. Obtain the position information of the modified node in the style hierarchy tracking tree, and notify the server to reassemble the modified declarations and selectors into a CSS rule and modify it to the specified position in the source code.

[0278] After the code modification is completed, trigger the code submission and rebuild.

[0279] The technical difficulties in the related art include: the effects achieved in the related art are realized through the existing capabilities of the browser. However, the code blocks opened by the browser are construction materials and cannot act on the source code. Therefore, a connection between the browser and the source code needs to be established. The main difficulties are as follows: how to find all the defined CSS rules of the element in the browser, and be able to obtain the style rules and display them on the front end for user operation; and after the user's operation, it is also necessary to know the path of the CSS style in the source code and be able to append the modified rule to the code.

[0280] Next, the processing process of the present application will be described.

[0281] As Figure 12 shown, this process involves browser processing, code construction processing, and server processing.

[0282] S1201. The project construction starts;

[0283] S1202. Determine the AST tree of the style node;

[0284] S1203. Generate a preprocessing selector list;

[0285] S1204. Obtain the style hierarchy tracking tree;

[0286] S1205. The server starts the node service;

[0287] S1206. The server clones a code file in the target directory;

[0288] S1207. The server file listener listens;

[0289] S1208. The server file reading service;

[0290] S1209. The browser starts the SDK;

[0291] S1210. The browser establishes a connection with the server;

[0292] S1211. The server modifies the websocket connection of the file;

[0293] S1212. The browser obtains the style hierarchy tracking tree;

[0294] When the user touches the element and the element click is monitored by the SDK, the following S1213 is executed;

[0295] S1213. The browser creates a mask layer;

[0296] S1214. The browser collects the element style nodes;

[0297] S1215. Comb the browser style nodes and display them on the front-end interface;

[0298] S1216. Render the page;

[0299] S1217. The browser generates stylemodifyrules and sends them to the server;

[0300] S1218. The server receives stylemodifyrules;

[0301] S1219. The server submits the code.

[0302] Next, the processing process will be described in detail through specific examples.

[0303] Example 1. Take a simple.less file as an example. The specific content includes:

[0304]

[0305] Specifically, it may include but is not limited to the following first part to the fourth part.

[0306] The first part: Write a webpack plugin to compile the style hierarchy tracking tree and integrate it into webpack.

[0307] During the webpack compilation process in the project, introduce the written webpack compilation plugin. The plugin mainly performs the following steps 1.1 to 1.6.

[0308] Step 1.1. Integrate the abstract (ast) parsers for css and its extended languages.

[0309] For example, as Figure 13 shown, for css-format source files, use the postcss parser; for less-format source files, use the postcss parser and integrate the postcss-less plugin; for scss-format source files, use the postcss parser and integrate the postcss-scss plugin; for vue-format files, use vue-loader to obtain the content in the style tag and then use the postcss parser for further parsing.

[0310] Integrating the parsing of these four types of files can meet almost all css application scenarios in the market. For files that are not css or its extended languages, no processing is done and they are directly skipped.

[0311] 1.2. Locally maintain a preprocessing list for preparing to collect all selectors used in the project.

[0312] 1.3. Listen to the events in the compile phase of the webpack plugin. This event is a hook created before the webpack compilation work starts. In the callback of compile, listen to the create Module event. At this time, the file is in the state of the source file before the loader executes the compilation.

[0313] 1.4. In the callback of create Module, you can obtain each file traversed during the webpack compilation execution and then process it.

[0314] A. Determine whether the path contains node_modules. Node_modules is a third-party dependency library, and any modification or override of the dependency is not allowed, so it is ignored.

[0315] B. Use the ast parser in 1.1 to obtain the ast tree. The node attributes parsed by the postcss parser are shown in Table 1.

[0316] Table 1 Example of node attributes parsed by the postcss parser

[0317]

[0318] The ast tree is as Figure 14 shown.

[0319] Start traversing the nodes deeply. During the traversal process, maintain an item object that includes a selector, nodes, and path nodes. Among them, path is the file path being processed. When traversing to a deep node each time, the selector of the item is concatenated with the selector of the parent node and separated by a space from its own selector node. When traversing to a declaration node, take the prop, value, and source of the node as an object and insert it into the nodes, and then add it to the preprocessing list. Note that when adding, it is necessary to remove duplicates from the selector of the item in the preprocessing list. If there are already duplicate items, only the nodes need to be merged.

[0320] The preprocessing list obtained after processing based on Example 1 is as Figure 15 shown.

[0321] The logic summary of retrieving the style selector and adding it to the preprocessing style selector list is as Figure 16 shown.

[0322] Specifically, it may include but is not limited to the following S1601 to S1611.

[0323] S1601. Obtain the files within the project;

[0324] S1602. In the webpack compile phase, the create Module is triggered in a loop;

[0325] S1603. Determine whether the loop has ended;

[0326] If not, execute the following S1604; if so, obtain the pre - processed selector list, continue with subsequent processing, and execute the following S1610;

[0327] S1604. Is it a file under node_modules?

[0328] If so, go back to the loop and continue to execute S1602; if not, execute the following S1605;

[0329] S1605. Convert the file into an ast using an ast parser;

[0330] S1606. Traverse the ast nodes;

[0331] S1607. Determine whether the loop has ended;

[0332] If so, move on to the next file and continue to execute S1602; if not, execute the following S1608;

[0333] S1608. Is the type value of the node "rule"?

[0334] If so, traverse the child nodes and continue to execute S1606; if not, execute the following S1609;

[0335] S1609. Is it a declaration node?

[0336] If not, go back to the loop and continue to execute S1606; if so, add it to the list and execute the following S1610;

[0337] S1610. Collect the pre - processed selector list;

[0338] S1611. Subsequent processing.

[0339] 1.5. Locally pre - maintain the style hierarchy tracking tree StyleTraceTree in advance.

[0340] The tree is an array variable, maintained internally by rules, and contains style hierarchy nodes SelectorNode. The content of each style hierarchy node is shown in Table 2 below.

[0341] Example of the content included in the style hierarchy nodes in Table 2

[0342]

[0343] Start traversing the preprocessing list, obtain each node item, and parse the selector. The specific process is as Figure 17 shown, and may include but are not limited to the following S1701 to S1718.

[0344] S1701. Start traversing the preprocessing list;

[0345] S1702. Create a pointer to point to item and maintain tempadjacent;

[0346] S1703. Process each selector node from selector node 1 to selector node N;

[0347] S1704. Determine whether the array is empty;

[0348] If it is empty, execute S1718 below; if it is not empty, execute S1705 below;

[0349] S1705. Take out the nodes from back to front and process them through the operator;

[0350] S1706. Obtain the combinator;

[0351] S1707. Obtain the pseudovalue;

[0352] S1708. Process each element node from element node 1 to element node N;

[0353] S1709. Determine whether there are duplicate nodes in the pointer;

[0354] If so, execute S1712 below; if not, execute S1710 below;

[0355] S1710. Create a new node and process the combinator and temadjacent;

[0356] S1711. Process the poiter node;

[0357] S1712. Determine whether there is a pseudovalue.

[0358] If so, execute S1713; if not, execute S1714 below;

[0359] S1713. The current pointer is the pseudoselectors of the new node;

[0360] S1714. Traverse whether a node is empty;

[0361] If so, execute S1715 below; if not, execute S1716 below;

[0362] S1715. The current pointer is the parent selectors of the new node;

[0363] S1716. The current pointer is the parent selectors of the new node;

[0364] S1717. Determine whether all element nodes have been processed;

[0365] If so; process the next selector, that is, continue to execute S1704; if not; continue to process the element node, that is, continue to execute S1708;

[0366] S1718. End.

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

[0368] S1702 Create a pointer to point to item and maintain tempadjacent.

[0369] A Create a pointer variable pointer and initialize it to point to the root node of the style hierarchy tracking tree. Maintain the nodePointer variable, initially null, and by default point to this object every time a new SelectorNode is created.

[0370] B Create a variable tempAdjacent, initially null.

[0371] For S1703, process each selector node from selector node 1 to selector node N.

[0372] C Match the space rule and truncate it into an array.

[0373] Taking Figure 15 the first node in as an example, the result after processing is Example 2.

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

[0375] For S1705, take out the nodes from back to front and process them through the operators.

[0376] D Traverse the elements in the array from back to front and process each traversed element.

[0377] Determine whether there is a pseudo-class selector, and obtain it using the regular rule / [:]{1,2}\w+ / . For example, when processing the third element in Figure 15 take the "::before" in it, intercept and maintain it as a variable pseudoValue, and leave ".inner".

[0378] F Continue to process. For the mapping value of the operator in Table 2 at the first position, if it can be mapped, obtain the mapping value and delete the first position; if not, map it to the mapping value of the operator "none".

[0379] Table 3 Example of mapping values of operators

[0380] Operator Mapping Value > child None descendant

[0381] Maintain a variable of combinator to store the obtained value. For example, after processing the final ">div.msg" in Example 2, we get "div.msg", and combinator = child.

[0382] G Then, according to the principle that the selector starts with "#", starts with ".", and is "pure letters", extract the elements through the regular rule / [#|.]?\w / g and put them into an array. After processing "div.msg", finally get two elements, div and.msg.

[0383] Then, find the mapping value for the first position of each element in Table 4 through the selector type. Among them, if it can be mapped, obtain the mapping value and delete the first position; if it cannot be mapped, get the mapping value of "none".

[0384] Table 4 Example of mapping values of selectors

[0385] Priority Selector Type Selector Type Value 1 # id 2 . class 3 :: or : pseudo 4 None tag

[0386] Then sort from 1 to 4 according to the priority rules in Table 4. If the selector types are the same, sort them alphabetically. Among them, 1 corresponds to the highest priority.

[0387] Start traversing, create SelectorNode, first start creating the ".msg" object, adjacent is defaulted to false. If there is a value in tempAdjacent in d, assign it to adjacent, and reset tempAdjacent to empty after the assignment.

[0388] Exemplarily,

[0389] selector_type: class,

[0390] selector_name: msg,

[0391] adjacent: false,

[0392] isLeaf: false,

[0393] source_file_path: null,

[0394] SiblingSelectors: [],

[0395] ParentSelectors: [],

[0396] PseudoSelectors: []

[0397] After creation, insert the object into the pointer. Each time an object is inserted into the pointer, it is necessary to traverse the elements in the pointer. Use the same values of selector_type, selector_value, adjacent, and isLeaf as the deduplication logic. If it is a duplicate, do not add it, and nodePointer points to this element. Then pointer points to the SiblingSelectors of nodePointer, which is the SiblingSelectors in ".msg" in the example. Continue to traverse to the lower priority until the final node is processed. After processing, check if there is a saved pseudoValue variable. If it exists, point pointer to the PseudoSelectors of nodePointer and clear the pseudoValue variable. Ensure that the pseudo-elements stored in pseudoValue are introduced after the sibling elements at the same level are processed, which facilitates directly traversing the parent node backward when indexing pseudo-elements in the third step.

[0398] After the above processing, the structures of StyleTraceTree, nodePointer, and pointer are as Figure 18 .

[0399] Get the combinator, map Table 5 to obtain the node mapping value, pointer points to the corresponding attribute of the outermost nodePointer, and tempAdjacent saves the adjacent in the mapped Table 5. Continue to traverse forward.

[0400] Table 5 Combinator Mapping Example

[0401] Operation Value Node Key adjacent child ParentSelectors true descendant ParentSelectors false

[0402] When the program determines that all nodes are completed, set the isLeaf property of nodePointer to true, assign the path parameter of item to source_file_path, and assign the nodes of item to source.

[0403] K Continue to execute the next item to improve the StyleTraceTree. Finally, the structure of the StyleTraceTree.json improved with Example 2 is as Figure 19 shown.

[0404] After the StyleTraceTree.json is processed, export one to the root directory.

[0405] At this time, the style hierarchy trace tree sorts out all the css rules in the source code into a trace file. For DOM nodes, in subsequent steps, all its css rule nodes can be found through this file, and the file directory where the css rule is located and the detailed location information of the code block are provided. Therefore, the position relationship between the browser style nodes and the source code, which is unknown in the existing solutions, is solved.

[0406] Second, start a node server to create a websocket environment linked to the style modifier.

[0407] Specifically, it may include but is not limited to the following steps 2.1 to 2.5.

[0408] Step 2.1: The server starts after the webpack build is successful.

[0409] Step 2.2: The code (git) repository address and branch of the project will be configured on the server. After starting, create a target directory, pull down the project by git clone, and switch to the target branch.

[0410] Step 2.3: The server uses socketio to create a websocket connection, waits for the browser to connect, and reads the target directory.

[0411] The websocket connection can modify the target directory, that is, the source code, after receiving the message, thus solving the problem that the existing solutions cannot be associated with the source code.

[0412] Step 2.4: Provide an interface to read StyleTraceTree.json, and getStyleTraceTree can be obtained through this interface.

[0413] Step 2.5: Through the onMessage event in websocket, an array for modifying styles can be monitored.

[0414] The convention protocol for elements in the array is shown in Table 6.

[0415] Table 6 Example of the convention protocol for elements in the array

[0416]

[0417] Through the message protocol, the protocol is parsed at the code layer to modify the target directory. Therefore, although it is not possible to edit through real-time file read and write streams in the browser, through message triggering, the server can also obtain the node information to be modified and the modified content.

[0418] Part Three: Write the SDK access to provide support for style replacement capabilities during project runtime in the code.

[0419] It mainly can include but is not limited to the following steps 3.1 to 3.9.

[0420] Step 3.1: Start the SDK.

[0421] Step 3.2: Open the connection to the server in the second part and establish a websocket connection.

[0422] Declare the style modification array variable styleModifyRules.

[0423] Step 3.3: Through the StyleTraceTree.json interface in Step 2.4, obtain the style hierarchy trace tree StyleTraceTree.json and store it in memory.

[0424] Step 3.4: Add a transparent mask layer of the current screen size under the body of the html tree, add a mouse movement event listener. When the user clicks on any element, locate the element and save the element (declared as $element) in memory. Obtain the width, height, and position of the element, create a mask element of the same size and position on the mask layer, disable the downward capture event, and prevent $element from triggering events. The purpose is to prevent various triggers such as jumps and pop-ups in the logic bound in the element from affecting the intuitive feeling of style adjustment.

[0425] Step 3.5: Simulate browser console to debug styles. When clicking on the mask element in Step 3.4, start retrieving the information of the current element, and then collect and process the style nodes of the element.

[0426] The process of Step 3.5 is relatively complex, and the overall process is asFigure 20 as shown

[0427] Specifically, it may include but is not limited to the following S2001 to S2016.

[0428] S2001. Obtain the $element element slice;

[0429] Obtain the $element element based on the clicked element.

[0430] Process selectcontentrlist, read pointerqueue, and execute the following S2012;

[0431] S2002. Determine whether it is a pseudo-element node;

[0432] If so, the $element element points to its parent element, and continue to execute S2002; if not, then execute the following S2003;

[0433] S2003. Parse out selectorlist;

[0434] S2004. Determine whether the first node has a value;

[0435] Pop the first node and determine whether the first node has a value; if so, then execute the following S2005; if not, then execute the following S2006;

[0436] S2005. Whether $0 node can be hit in pointer.target;

[0437] If so, then execute the following S2007; if not, delete the first node and continue to execute S2003;

[0438] S2006. Determine whether the current pointer.$0 has a value;

[0439] If so, then execute the following S2014; if not, delete the last element and execute S2012;

[0440] S2007. Determine whether the $0 node is isleaf;

[0441] If so, then execute the following S2008; if not, then execute the following S2009;

[0442] S2008. Insert selectcontentrlist;

[0443] S2009. Determine whether pointer.pseudo has a value;

[0444] If so, then execute the following S2010; if not, then execute the following S2011;

[0445] S2010. Determine whether Pseudo can be found in pointer.$0.Pseudoselectors;

[0446] If not found, execute the following S2011; if there is no value, execute the following S2013;

[0447] S2011. Create an object h1;

[0448] S2012. Insert into pointerqueue;

[0449] After taking out the last element, execute the following S2016;

[0450] S2013. Create an object h2;

[0451] And execute S2012;

[0452] S2014. Determine whether the value of pointer.parentIterate is 0;

[0453] If so, delete the last element and execute S2012; if not, execute the following S2015;

[0454] S2015. Obtain the parent element of $element and create a new pointer, where pointer.target points to pointer.$0.Pointerselector.

[0455] S2016. Find pointer.targer;

[0456] And continue to execute S2005.

[0457] Next, the process of step 3.5 will be described by Example 3.

[0458] Example 3 may include:

[0459]

[0460] For Example 3, the process of step 3.5 may include but is not limited to the following steps a to i.

[0461] a. If the click event is triggered on a pseudo-element, $element points to its upper-level node, and a variable pseudo is created to save the pseudo-element label.

[0462] Step b. Obtain the three major element information of the element, id, class array, and tag.

[0463] Append the selector type values forward according to the selector type values in Table 3.

[0464] Then sort them by priority and maintain them as an array. Taking Example 3 as an example, if the selected $element is the pointed node, the final array SelectorList['#username', '.msg', 'div'] is obtained.

[0465] Step c: Obtain StyleTraceTree.json, create an empty queue pointerQueue, and the internal node is queueItem. The meanings of the queueItem attributes are shown in Table 7.

[0466] Table 7 Example of the meanings of queueItem attributes

[0467]

[0468] Create the first queueItem object according to the default values of each attribute in Table 7 and insert it into pointerQueue.

[0469] Step d: Declare an array variable SelectorContentList to collect the cssrule nodes owned by $element.

[0470] Step e: Obtain the last element pointer from the pointerQueue list.

[0471] Step f: Pop the first node selector from pointer.selectorList and process it according to the processing logic in Table 8.

[0472] Table 8 Example of the processing logic of the node selector

[0473]

[0474]

[0475] Taking SelectorList['#username', '.msg', 'div'] obtained in Step b of 3.5 (which can also be simply referred to as 3.5b) as an example, the '#'username' electorList is updated to ['.msg', 'div']; according to the rules in Table 8, since the selector has a value, execute Step g in 3.5 downward.

[0476] Step g: Map the selector type value with the first digit according to Table 3. If it cannot be mapped, take the value of the tag. Obtain the selector type value.

[0477] Taking Example 3 as an example, after processing in step f, the #username is obtained, and the selector type value id and the element username are obtained. Using the selector type value and the element value, map selector_type and selector_value in pointer.target to obtain the consistent node A, and all subsequent node searches for pointer.target use this rule.

[0478] 1. Judge A: If pointer.type is parent and the adjacent of A is true (the CSS selector rule is a child element selector and can only select direct first-level child elements), judge whether pointer.parentLevel is greater than 1. If it is greater, continue to select and ignore node A and continue to traverse downward. In other cases, assign A to pointer.$0.

[0479] Declare the creation rule of lastSelector, Table 9.

[0480] Table 9 Example of the creation rule of lastSelector

[0481]

[0482] If the isLeaf of pointer.$0 is true, it means that the leaf node of the StyleTraceTree is reached, and an object is created: key: The value according to the rule in Table 9 includes:

[0483] source_file_path: The source_file_path of pointer.$0,

[0484] source: The source of pointer.$0,

[0485] nodes: The nodes of pointer.$0

[0486] Add it to the SelectorContentList. Otherwise, continue to execute downward.

[0487] 2. If the node cannot be obtained, repeat step f.

[0488] Step h, judge that pointer.pseudo has a value. If it has a value, take out pointer.$0.PseudoSelectors and scan whether there is a node whose selector_value is equal to pointer.pseudo.

[0489] 1. If successful, create an object.

[0490] Exemplarily, target: pointer.$0.SiblingSelectors

[0491] selectorList: [],

[0492] lastSelector: First obtain the value in Table 9, and then append it at the end

[0493] type:'sibling',

[0494] parentLevel: 0

[0495] pseudo: ''

[0496] Insert it into the pointerQueue. Go back to step e and continue execution. Because according to the running logic, the pseudo-element pseudo will only follow after the last node of the sibling, so when the pseudo-element node can be hit, the parent node can be searched upward.

[0497] 2. Fail or have no value, create an object.

[0498] Exemplarily, target: pointer.$0.SiblingSelectors

[0499] selectorList: Deep copy of pointer.selectorList,

[0500] lastSelector: Obtain the value according to the rules in Table 9

[0501] type:'sibling',

[0502] parentLevel: 0

[0503] pseudo: pointer.pseudo

[0504] Insert it into the pointerQueue. Go back to step e and continue execution.

[0505] i. When all values in pointer.selectorList are traversed, check if the length of the ParentSelectors of pointer.$0 is 0. If it is 0, set pointer.parentIterate to true and go back to step e to continue execution. If it is not 0, obtain the parent element of $element through $element.parentElement. If the parent element is html or an empty element, set pointer.parentIterate to true and go back to step e to continue execution. Otherwise, obtain the three major element information of the parent element: id, class array, and tag. Add selector types forward according to the selector type values in Table 3. Then, sort them by priority and merge and maintain them into an array parentSelectorList.

[0506] Create an object

[0507] target: pointer.$0.parentElement,

[0508] selectorList = parentSelectorList,

[0509] type: 'parent'

[0510] lastSelector: Insert the value according to the rules in Table 9, and parentLevel: pointer.parentLevel + 1 into pointerQueue. Go back to step e to continue execution.

[0511] When all steps in step 3.5 reach the isLeaf completion node in step g of step 3.5 and the pointerQueue array becomes zero, it means the execution is completed.

[0512] The above logic is a bit complex. The complete process is as Figure 21 shown.

[0513] The storage process of the entire pointerQueue is as follows, as Figure 22 shown.

[0514] After clicking on the element, push StyleTraceTree into pointerQueue. Then, the currently processed selectors are #username,.msg, div, as Figure 22 shown in the first line.

[0515] Then pop the last element of #username in the pointerQueue, which is StyleTraceTree, and search for the element corresponding to #username. After finding it, according to the rule of h, obtain the SiblingSelector of #username. The remaining selectors to be processed are.msg,div, as Figure 22 shown in the second line.

[0516] Then continue to process.msg. Search in the last element of the pointerQueue, which is the SiblingSelector of #username. If not found, continue to search for div, as Figure 22 shown in the third and fourth lines.

[0517] When the selectors to be processed are empty, according to the logic of i, search for the parent element upwards. At this time, push the parentSelectors of #username into the pointerQueue to process the selector.group,div of the parent element. Keep repeating the search according to the above rules, as Figure 22 shown in the fifth, sixth, and seventh lines.

[0518] When the isLeaf element is finally found, such as Figure 22 .login in the eighth line, insert the processing node into the SelectorContentList, then pop the last element from the pointerQueue and continue processing. If the selector processing list is empty, continue to pop the last element from the pointerQueue and then repeat the processing until the pointerQueue stack is finally empty, then the processing is completed.

[0519] Step 3.6: When step 3.5 is executed and completed, all the css rule nodes written in the code are scanned out. At this time, the ability to obtain all css nodes on the browser is achieved, which is a step that the existing solution cannot do. Save the SelectorContentList to sessionStorage, then traverse the SelectorContentList to get selectorContent, where the key is the selector and the nodes are the css declaration block code. Traverse the nodes, combine the prop and value in the nodes into the form of key: value, reassemble them into declarationsBlock, and display them together with the selector in the css rule syntax. Through the visible window, assign values in the browser input box, display them to the user, and provide the ability to modify.

[0520] Step 3.7: When the user modifies the declaration block rules, use the insertRule Api of CSSStyleSheet, and the local browser overwrites the latest style to update the browser display.

[0521] 3.8. Then, use the key of selectorContent to deduplicate the elements selector in the styleModifyRules list created in Step 3.1 with the key as the unique value. If there are identical elements, replace the old rules with the modified declarationsBlock; if there are no identical elements, create an object:

[0522] selector: selectorContent.key,

[0523] source_path: selectorContent.source_path,

[0524] declarationsBlock: declarationsBlock

[0525] source: selectorContent.source

[0526] Add it to the end of styleModifyRules.

[0527] Step 3.9: When the user calls the sdk to confirm the style modification, create a websocket connection with the server through 3.1, and call sendMessage to send styleModifyRules to the server side.

[0528] For the partially generated style hierarchy tracking tree, through the hierarchical index of the element to the style hierarchy tracking tree, find all the selectors that act on it under the element, and can obtain the position information of the corresponding selector, achieving the tracking information of the code block of the source file after the element is reached. Subsequently, through the analysis of this part of the information, the operation on the source code can be completed.

[0529] Part Four: The server receives styleModifyRules.

[0530] Specifically, it can include but is not limited to the following steps 4.1 to 4.2.

[0531] Step 4.1: After the server receives styleModifyRules, it traverses to obtain each styleRule of the element, creates a file modification stream, opens the file corresponding to source_path in the target directory, and then parses it into an ast using a parser. By the source of styleRule (start, end includes the coordinates of the old declarations block in the code block), the declarationsBlock in styleRule is replaced on the ast through the postcss Api, and the code is replaced.

[0532] 4.2: Execute code submission and rebuild. The process of 1 will be automatically executed to generate a new styleTraceTree.json, which is provided to the browser to update the just-replaced style.

[0533] The front-end and back-end interaction logic is as Figure 23 shown.

[0534] This embodiment solves the problem that it is impossible to directly act on the source code from the browser. After collecting the StyleTraceTree, it provides an index file for the hit style rules, providing a basis for the user to find the style rules on the front end and output the code.

[0535] The server is started to establish a connection with the browser through websocket. The modified result is cached locally through sessionStorage to achieve persistence. After submission, the project code is pulled from the git repository and rebuilt to ensure that the project and the code running in the browser are the latest.

[0536] In a third aspect, to implement the above data processing method, a first data processing device according to an embodiment of the present application will be described below in conjunction with Figure 24 the structural schematic diagram of the data processing device shown.

[0537] As Figure 24 shown, the first data processing device 240 includes: an obtaining unit 2401, a first sending unit 2402, a first receiving unit 2403, and a modifying unit 2404. Among them:

[0538] The obtaining unit 2401 is configured to: obtain a hierarchical trace tree of browser styles; the hierarchical trace tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style;

[0539] The first sending unit 2402 is configured to: send the hierarchical tracking tree to the terminal device through the first connection; so that the terminal device obtains style modification information according to the hierarchical tracking tree; the first connection is a connection established between the server and the terminal device for modifying the style of the source code of the browser;

[0540] The first receiving unit 2403 is configured to: receive the style modification information sent by the terminal device through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name;

[0541] The modification unit 2404 is configured to: obtain the source file through the file path, and replace the declaration block corresponding to the selector name at the declaration block position in the source file with the target declaration block, thereby completing the modification of the browser style.

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

[0543] Convert the source file of the browser into an Abstract Syntax Tree (AST); the AST includes n branches, and one branch includes m type-2 nodes;

[0544] Determine a preprocessing list based on the AST; wherein, perform a first process on each branch of the AST respectively to obtain a preprocessing object corresponding to each branch; the preprocessing list includes n preprocessing objects; one preprocessing object includes: first information, path information, and leaf node information; the first information is used to represent the information of the selectors included in the branch in sequence; the path information is used to represent the storage path of the source file; the leaf node information is used to represent the second information of the type-2 leaf nodes corresponding to the branch;

[0545] Build the hierarchical tracking tree based on the preprocessing list; wherein, perform a second process on each preprocessing object in the preprocessing list to obtain a level corresponding to each preprocessing object.

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

[0547] Traverse each type-2 node in the branch, and sequentially obtain the information of the selectors in the type-2 node;

[0548] Connect the information of the selectors in each type-2 node through a first symbol to obtain the first information in the preprocessing object;

[0549] Determine the storage path of the source file as the path information in the preprocessing object;

[0550] Determine the second information of the leaf nodes of the branch as the leaf node information in the preprocessing object; the second information includes the declared items of the leaf nodes, the declared values of the leaf nodes, and the declared block positions.

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

[0552] Split the first information in the preprocessing object into k first-type elements through a first symbol; the first-type elements at least include selector names; k is greater than or equal to 1;

[0553] Process each of the k first-type elements to obtain s first-type nodes; the first-type nodes at least include: selector names, first indication information, and second indication information; the first indication information is used to characterize whether there are sibling-related first-type nodes, and the second indication information is used to characterize whether there are parent-child-related first-type nodes;

[0554] Determine the relationship between adjacent first-type nodes among the s first-type nodes based on the first-type elements; the relationship includes a parent-child relationship or a sibling relationship; s is greater than 1;

[0555] Connect the adjacent first-type nodes in sequence based on the relationship between the adjacent first-type nodes to obtain a hierarchy corresponding to the preprocessing object.

[0556] In some embodiments, the first data processing device 240 may further include a processing unit, and the processing unit is configured to:

[0557] Submit the source code with modified browser styles;

[0558] Build based on the modified source code to obtain a runnable code corresponding to the modified source code;

[0559] Send the runnable code corresponding to the modified source code to the terminal device; so that the terminal device runs the browser based on the runnable code corresponding to the modified source code.

[0560] Fourthly, to implement the above data processing method, a second data processing device according to an embodiment of the present application will be described below in conjunction with Figure 25 the structural schematic diagram of the data processing device shown.

[0561] As Figure 25 shown, the second data processing device 250 includes: a second receiving unit 2501, a first determining unit 2502, a searching unit 2503, a second determining unit 2504, and a second sending unit 2505.

[0562] Wherein: The second receiving unit 2501 is configured to: receive, through the first connection, a hierarchical trace tree in the browser style sent by the server; the hierarchical trace tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style.

[0563] The first determining unit 2502 is configured to: determine b second-type elements based on the user's operation; b is greater than or equal to 1.

[0564] The searching unit 2503 is configured to: sequentially search in the hierarchical trace tree for the relevant first-type nodes corresponding to each of the b second-type elements.

[0565] The second determining unit 2504 is configured to: determine 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 position, and a selector name.

[0566] The second sending unit 2505 is configured to: send 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.

[0567] In some embodiments, the first determining unit 2502 is further configured to:

[0568] Based on the user's first operation, enable the style modification function of the browser;

[0569] Add a transparent overlay on the interface of the browser;

[0570] Based on the second operation on the transparent overlay, determine the b second-type elements;

[0571] The method further includes:

[0572] Based on the b second-type elements, create a mask element on the overlay; shield the trigger events corresponding to the b second-type elements through the mask element.

[0573] In some embodiments, if the b second-type elements sequentially include: element A and element B; the searching unit 2503 is further configured to:

[0574] Search in the hierarchical trace tree based on element A to obtain the first-type node A corresponding to element A;

[0575] In the hierarchical tracking tree, search for the element B in the first type of node B related to the sibling of the first type of node A to obtain a first search result; if the result of the first search result is not found, search for the element B in the first type of node C related to the parent-child of the first type of node A to obtain a second search result;

[0576] If the second search result is not found, then use the first type of node C as the new first type of node A, and search for the element B in the new first type of node B related to the sibling of the new first type of node A to obtain a new first search result; if the new first search result is not found, search for the element B in the new first type of node C related to the parent-child of the new first type of node A to obtain a fourth search result; until there is no first type of node related to the parent-child of the new first type of node C;

[0577] In the case where there is no first type of node related to the parent-child of the new first type of node C, it is determined that the relevant first type of node corresponding to each of the b second type of elements includes at least: the first type of node A, the first type of node C related to the parent-child of the first type of node A, and the new first type of node C in the case where there is no first type of node related to the parent-child of the new first type of node C.

[0578] In some embodiments, the second determination unit 2504 is further configured to:

[0579] Determine the content of the cascading style sheet CSS to be modified based on the relevant first type of node;

[0580] Display the content of the CSS on the display interface;

[0581] Determine the modified content of the CSS based on the third operation of the user;

[0582] Determine the modified content of the CSS as the target declaration block of the style modification information;

[0583] Determine the name of the selector corresponding to the relevant first type of node as the position of the declaration block of the style modification information; determine the name of the first selector as the selector name of the style modification information; the first selector is the selector corresponding to the second type of element whose search result is found.

[0584] It should be noted that the data processing device provided in the embodiments of the present application includes each unit included, which can be implemented by a processor in an electronic device; of course, it can also be implemented by specific logic circuits; in the process of implementation, the processor can be a central processing unit (CPU, Central Processing Unit), a microprocessor (MPU, Micro Processor Unit), a digital signal processor (DSP, Digital Signal Processor), or a field programmable gate array (FPGA, Field-Programmable Gate Array), etc.

[0585] The description of the above device embodiments is similar to the description of the above method embodiments and has similar beneficial effects to the method embodiments. For the technical details not disclosed in the device embodiments of the present application, please refer to the description of the method embodiments of the present application for understanding.

[0586] It should be noted that in the embodiments of the present application, if the above data processing method is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the embodiments of the present application, in essence, or the part that contributes to the related technology, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in the various embodiments of the present application. The foregoing storage medium includes: various media such as a USB flash drive, a mobile hard disk, a read-only memory (ROM, Read Only Memory), a magnetic disk, or an optical disc that can store program codes. In this way, the embodiments of the present application are not limited to any specific combination of hardware and software.

[0587] In a fifth aspect, to implement the above data processing method, an embodiment of the present application provides an electronic device, including a memory and a processor. The memory stores a computer program that can run on the processor, and when the processor executes the program, it implements the steps in the data processing method provided in the above embodiments.

[0588] Next, in conjunction with Figure 26 the electronic device 260 shown, the structural diagram of the electronic device will be described.

[0589] In one example, the electronic device 260 can be the above electronic device. As Figure 26As shown, 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 a memory 2605. Among them, the communication bus 2602 is configured to enable connection communication between these components. Among them, the user interface 2603 may include a display screen, and the external communication interface 2604 may include a standard wired interface and a wireless interface.

[0590] The memory 2605 is configured to store instructions and applications executable by the processor 2601, and can also cache data to be processed or already processed by the processor 2601 and each module in the electronic device (for example, image data, audio data, voice communication data, and video communication data), and can be implemented by flash memory (FLASH) or random access memory (Random Access Memory, RAM).

[0591] In a sixth aspect, an embodiment of the present application provides a storage medium, that is, a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps in the data processing method provided in the above embodiment are implemented.

[0592] It should be noted here that: the descriptions of the above storage medium and device embodiments are similar to the descriptions of the above method embodiments, and have beneficial effects similar to those of the method embodiments. For the technical details not disclosed in the storage medium and device embodiments of the present application, please refer to the descriptions of the method embodiments of the present application for understanding.

[0593] It should be understood that the "one embodiment" or "an embodiment" mentioned throughout the specification means that a specific feature, structure, or characteristic related to the embodiment is included in at least one embodiment of the present application. Therefore, the appearances of "in one embodiment" or "in some embodiments" throughout the specification do not necessarily refer to the same embodiment. In addition, these specific features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. It should be understood that in various embodiments of the present application, the magnitudes of the sequence numbers of the above processes do not mean the order of execution, and the execution order of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present application. The sequence numbers of the embodiments of the present application above are only for description and do not represent the advantages or disadvantages of the embodiments.

[0594] It should be noted that in this text, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, such that a process, method, article or device comprising a series of elements not only includes those elements but also includes other elements not expressly listed, or further includes elements inherent to such process, method, article or device. Without further limitation, an element defined by the statement "comprising one..." does not exclude the existence of additional identical elements in the process, method, article or device comprising such element.

[0595] In several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of the units is only a logical functional division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling or communication connection between the displayed or discussed components can be through some interfaces. The indirect coupling or communication connection of devices or units can be electrical, mechanical or other forms.

[0596] The units described above as separate components may or may not be physically separated. The components displayed as units may or may not be physical units. They can be located in one place or distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0597] In addition, in each embodiment of the present application, each functional unit can be all integrated in a processing unit, or each unit can be separately a unit, or two or more units can be integrated in a unit. The above integrated units can be implemented in the form of hardware or in the form of a combination of hardware and software functional units.

[0598] Those of ordinary skill in the art can understand that all or part of the steps to implement the above method embodiments can be completed by hardware related to program instructions. The foregoing program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps including the above method embodiments. The foregoing storage media include various media that can store program codes, such as removable storage devices, read-only memory (ROM), magnetic disks or optical discs.

[0599] Alternatively, if the above integrated units of the present application are implemented in the form of software functional modules and sold or used as independent products, they can also be stored in a computer-readable storage medium. Based on such an understanding, the technical solution of the embodiments of the present application, in essence or the part that contributes to the related art, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the methods described in the various embodiments of the present application. The aforementioned storage medium includes: various media that can store program codes, such as removable storage devices, ROMs, magnetic disks, or optical discs.

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

Claims

1. A data processing method, characterized in that, The method is applied to a server, and the method includes: Obtaining a hierarchical trace tree of browser styles; the hierarchical trace tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; Sending the hierarchical trace tree to a terminal device through a first connection; so that the terminal device obtains style modification information according to the hierarchical trace tree; the first connection is a connection established between the server and the terminal device for modifying the source code of the browser; Receiving the style modification information sent by the terminal device through the first connection; the style modification information includes: a target declaration block, a file path, a declaration block position, and a selector name; Obtaining a source file through the file path, and replacing the declaration block corresponding to the selector name at the declaration block position in the source file with the target declaration block, thereby completing the modification of the browser style.

2. The method according to claim 1, characterized in that, The obtaining of the hierarchical trace tree of browser styles includes: Converting the source file of the browser into an abstract syntax tree AST; the AST includes n branches, and one branch includes m second-type nodes; Determining a preprocessing list based on the AST; wherein, performing a first process on each branch of the AST respectively to obtain a preprocessing object corresponding to each branch; the preprocessing list includes n preprocessing objects; one preprocessing object includes: first information, path information, and leaf node information; the first information is used to represent the information of the selectors sequentially included in the branch; the path information is used to represent the storage path of the source file; the leaf node information is used to represent the second information of the second-type leaf node corresponding to the branch; Establishing the hierarchical trace tree based on the preprocessing list; wherein, performing a second process on each preprocessing object in the preprocessing list to obtain a level corresponding to each preprocessing object.

3. The method according to claim 2, wherein The performing a first process on each branch of the AST respectively to obtain a preprocessing object corresponding to each branch includes: Traversing each second-type node in the branch, and sequentially obtaining the information of the selectors in the second-type node; Connecting the information of the selectors in each second-type node through a first symbol to obtain the first information in the preprocessing object; Determining the storage path of the source file as the path information in the preprocessing object; Determining the second information of the leaf node of the branch as the leaf node information in the preprocessing object; the second information includes the declaration item of the leaf node, the declaration value of the leaf node, and the declaration block position.

4. The method according to claim 2, wherein The performing a second process on each preprocessing object in the preprocessing list to obtain a level corresponding to each preprocessing object includes: Split the first information in the preprocessed object into k first-type elements through a first symbol; the first-type elements at least include a selector name; k is greater than or equal to 1; Process each of the k first-type elements to obtain s first-type nodes; the first-type nodes at least include: a selector name, first indication information, and second indication information; the first indication information is used to indicate whether there are sibling-related first-type nodes, and the second indication information is used to indicate whether there are parent-child-related first-type nodes; Determine the relationship between adjacent first-type nodes among the s first-type nodes based on the first-type elements; the relationship includes a parent-child relationship or a sibling relationship; s is greater than 1; Connect adjacent first-type nodes in sequence based on the relationship between adjacent first-type nodes to obtain a hierarchy corresponding to the preprocessed object.

5. The method according to claim 1, characterized in that The method further includes: Submit the source code with modified browser styles; Build based on the modified source code to obtain a runnable code corresponding to the modified source code; Send the runnable code corresponding to the modified source code to a terminal device; so that the terminal device runs the browser based on the runnable code corresponding to the modified source code.

6. A data processing method, characterized in that, The method is applied to a terminal device on which a browser is running; the method includes: Receive a hierarchical trace tree of browser styles sent by a server through a first connection; the hierarchical trace tree includes n levels; n is greater than 0; one level sequentially includes m first-type nodes, m is greater than 1; two adjacent first-type nodes among the m first-type nodes are parent-child related or sibling related; one first-type node corresponds to a selector of the browser style; Determine b second-type elements based on a user's operation; b is greater than or equal to 1; Sequentially search in the hierarchical trace tree for relevant first-type nodes corresponding to each of the b second-type elements; Determine 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 position, and a selector name; Send 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 according to claim 6, wherein The determining b second-type elements based on a user's operation includes: Based on a first operation of the user, enable the style modification function of the browser; Add a transparent mask layer to the interface of the browser; Determine the b second-type elements based on a second operation on the transparent mask layer; The method further includes: Create a mask element on the mask layer based on the b second-type elements; shield the trigger events corresponding to the b second-type elements through the mask element.

8. The method according to claim 6, wherein If the b second-type elements sequentially include: element A and element B; the sequentially searching in the hierarchical trace tree for relevant first-type nodes corresponding to each of the b second-type elements includes: Search in the hierarchical trace tree based on the element A to obtain the first type of node A corresponding to the element A; In the hierarchical trace tree, search for the element B among the first type of nodes B related to the siblings of the first type of node A to obtain a first search result; if the result of the first search result is not found, then search for the element B among the first type of nodes C related to the parent-child of the first type of node A to obtain a second search result; If the second search result is not found, then use the first type of node C as the new first type of node A, search for the element B among the new first type of nodes B related to the siblings of the new first type of node A to obtain a new first search result; if the new first search result is not found, then search for the element B among the new first type of nodes C related to the parent-child of the new first type of node A to obtain a fourth search result; until there is no first type of node related to the parent-child of the new first type of node C; In the case where there is no first type of node related to the parent-child of the new first type of node C, determine that the relevant first type of nodes corresponding to each of the b second type of elements include at least: the first type of node A, the first type of node C related to the parent-child of the first type of node A, and the new first type of node C in the case where there is no first type of node related to the parent-child of the new first type of node C.

9. The method according to claim 6, wherein The determining the style modification information based on the relevant first type of nodes includes: Determine the content of the Cascading Style Sheet (CSS) to be modified based on the relevant first type of nodes; Display the content of the CSS on the display interface; Based on the third operation of the user, determine the modified content of the CSS; Determine the modified content of the CSS as the target declaration block of the style modification information; Determine the name of the selector corresponding to the relevant first type of node as the position of the declaration block of the style modification information; determine the name of the first selector as the selector name of the style modification information; the first selector is the selector corresponding to the second type of element whose search result is found.

10. An electronic device, comprising a memory and a processor, the memory stores a computer program that can run on the processor, and when the processor executes the program, it implements the data processing method according to any one of claims 1 to 9.

11. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the data processing method according to any one of claims 1 to 9.

Images