A webpage source code processing method, device, equipment and storage medium
By analyzing the abstract syntax tree and adding click areas during the compilation stage of the H5 page, the problem of low click sensitivity of elements on the H5 page is solved, improving the user experience.
Patent Information
- Application Number
- CN202210862149.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-07-20
- Publication Date
- 2025-09-02
- Estimated Expiration
- 2042-07-20
AI Technical Summary
Users have low click sensitivity to H5 page elements, resulting in poor user experience.
In the compilation stage of the target web page source code, the abstract syntax tree is obtained, the web page element bound to the click event is parsed and determined as the target element, the preset child elements are added and the function identifier is carried, and the click area is stored in the CSS code.
Improves the click sensitivity of target elements and improves user experience.
Smart Images

Figure CN115016796B_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of data processing, and in particular to a method, apparatus, device, and storage medium for processing web page source code. Background Art
[0002] With the development of the Internet and the popularization of mobile terminals such as smartphones and tablets, H5 pages have been more widely used.
[0003] Users can achieve page interaction by clicking on H5 page elements. However, when users click on H5 page elements, the click sensitivity of the page elements is low, resulting in a poor user experience. Summary of the Invention
[0004] In order to solve the above technical problems, the present disclosure provides a method, apparatus, device and storage medium for processing web page source code.
[0005] In a first aspect, the present disclosure provides a method for processing webpage source code, the method comprising:
[0006] During the compilation phase of the target webpage source code, an abstract syntax tree of a preset programming language code in the target webpage source code is obtained;
[0007] Parsing the abstract syntax tree to determine a webpage element bound to a click event in the abstract syntax tree as a target element;
[0008] In the abstract syntax tree, a preset sub-element is added to the target element to obtain an updated abstract syntax tree; wherein the preset sub-element carries a preset function identifier, and the target function corresponding to the preset function identifier is stored in the Cascading Style Sheet (CSS) code in the source code of the target webpage, and the target function is used to add a preset click area to the target element;
[0009] Based on the target function and the updated abstract syntax tree in the CSS code, a compilation result corresponding to the target webpage source code is obtained.
[0010] In an optional embodiment, the preset programming language code includes JS code; and parsing the abstract syntax tree to determine a webpage element in the abstract syntax tree that is bound to a click event as a target element includes:
[0011] Parsing the abstract syntax tree of the JS code to determine whether there is an added listening click event in the abstract syntax tree; wherein the added listening click event is used to add a listening function for the click event to the web page element;
[0012] If it is determined that the add listener click event exists in the abstract syntax tree, the web page element corresponding to the add listener click event is determined as the target element.
[0013] In an optional embodiment, the preset programming language code includes HTML code; and parsing the abstract syntax tree to determine a web page element in the abstract syntax tree that is bound to a click event as a target element includes:
[0014] Parsing the abstract syntax tree of the HTML code to determine a web page element whose attribute name is a preset click identifier in the abstract syntax tree;
[0015] The webpage element whose attribute name is the preset click identifier is determined as the target element.
[0016] In an optional implementation, adding a preset sub-element to the target element in the abstract syntax tree to obtain an updated abstract syntax tree includes:
[0017] In the abstract syntax tree, adding a preset sub-element for the target element;
[0018] The preset function identifier carried by the preset sub-element is used as an attribute class name and added to the attributes of the preset sub-element to obtain an updated abstract syntax tree.
[0019] In an optional embodiment, before obtaining the compilation result corresponding to the target webpage source code based on the CSS code in the target webpage source code and the updated abstract syntax tree, the method further includes:
[0020] The target function corresponding to the preset function identifier is added as a global function to the CSS code in the target web page source code.
[0021] In a second aspect, the present disclosure provides a device for processing webpage source code, the device comprising:
[0022] A first acquisition module is configured to acquire an abstract syntax tree of a preset programming language code in the target webpage source code during a compilation phase of the target webpage source code;
[0023] a determination module, configured to parse the abstract syntax tree and determine a web page element bound to a click event in the abstract syntax tree as a target element;
[0024] a first adding module, configured to add a preset sub-element to the target element in the abstract syntax tree to obtain an updated abstract syntax tree; wherein the preset sub-element carries a preset function identifier, a target function corresponding to the preset function identifier is stored in Cascading Style Sheets (CSS) code in the source code of the target webpage, and the target function is used to add a preset click area to the target element;
[0025] The second acquisition module is used to acquire the compilation result corresponding to the target webpage source code based on the target function and the updated abstract syntax tree in the CSS code.
[0026] A first determination submodule is configured to parse the abstract syntax tree of the JS code to determine whether there is an added listening click event in the abstract syntax tree; wherein the added listening click event is used to add a listening function for click events to the web page element;
[0027] The second determining submodule is configured to determine, when determining that the add listener click event exists in the abstract syntax tree, a web page element corresponding to the add listener click event as a target element.
[0028] In a third aspect, the present disclosure provides a computer-readable storage medium, wherein instructions are stored in the computer-readable storage medium. When the instructions are executed on a terminal device, the terminal device implements the above method.
[0029] In a fourth aspect, the present disclosure provides a web page source code processing device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned method when executing the computer program.
[0030] In a fifth aspect, the present disclosure provides a computer program product, which includes a computer program / instructions, and the computer program / instructions implement the above method when executed by a processor.
[0031] The technical solution provided by the embodiments of the present disclosure has at least the following advantages compared with the prior art:
[0032] In the method for processing the web page source code provided by the embodiment of the present disclosure, first, in the compilation stage of the target web page source code, the abstract syntax tree of the preset programming language code in the target web page source code is obtained, the abstract syntax tree is parsed, and the web page element bound to the click event in the abstract syntax tree is determined as the target element. In the abstract syntax tree, a preset sub-element is added to the target element to obtain an updated abstract syntax tree, wherein the preset sub-element carries a preset function identifier, and the target function corresponding to the preset function identifier is stored in the cascading style sheet CSS code in the target web page source code. The target function is used to add a preset click area to the target element. Based on the target function in the CSS code and the updated abstract syntax tree, the compilation result corresponding to the target web page source code is obtained. It can be seen that the embodiment of the present disclosure increases the click area of the target element by adding a preset sub-element to the target element in the abstract syntax tree during the compilation stage of the target web page source code, so that when the compilation result is run, the click sensitivity of the target element can be improved, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0033] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.
[0034] In order to more clearly illustrate the embodiments of the present disclosure or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.
[0035] Figure 1 A flow chart of a method for processing web page source code provided by an embodiment of the present disclosure;
[0036] Figure 2 A schematic diagram of a web page provided in an embodiment of the present disclosure;
[0037] Figure 3 A flow chart of another method for processing web page source code provided by an embodiment of the present disclosure;
[0038] Figure 4 A schematic diagram of the structure of a webpage source code processing device provided by an embodiment of the present disclosure;
[0039] Figure 5 A schematic diagram of the structure of a web page source code processing device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION
[0040] In order to more clearly understand the above-mentioned objectives, features and advantages of the present disclosure, the scheme of the present disclosure will be further described below. It should be noted that the embodiments of the present disclosure and the features therein can be combined with each other in the absence of conflict.
[0041] In the following description, many specific details are set forth to facilitate a full understanding of the present disclosure, but the present disclosure may also be implemented in other ways different from those described herein; it is obvious that the embodiments in the specification are only part of the embodiments of the present disclosure, rather than all of the embodiments.
[0042] In H5 pages, click events are usually triggered based on whether the contact area of the screen when the user clicks the screen intersects with the web page elements.
[0043] However, when users click on H5 page elements, the click sensitivity of the page elements is low, resulting in a poor user experience.
[0044] To this end, the present disclosure provides a method for processing web page source code, first, in the compilation stage of the target web page source code, an abstract syntax tree of a preset programming language code in the target web page source code is obtained, the abstract syntax tree is parsed, and a web page element in the abstract syntax tree that is bound to a click event is determined as a target element. In the abstract syntax tree, a preset sub-element is added to the target element to obtain an updated abstract syntax tree, wherein the preset sub-element carries a preset function identifier, and the target function corresponding to the preset function identifier is stored in the cascading style sheet CSS code in the target web page source code. The target function is used to add a preset click area to the target element, and based on the target function in the CSS code and the updated abstract syntax tree, the compilation result corresponding to the target web page source code is obtained. It can be seen that the embodiment of the present disclosure increases the click area of the target element by adding a preset sub-element to the target element in the abstract syntax tree during the compilation stage of the target web page source code, so that when the compilation result is run, the click sensitivity of the target element can be improved, thereby improving the user experience.
[0045] Based on this, the embodiment of the present disclosure provides a method for processing web page source code, referring to Figure 1 , is a flow chart of a method for processing webpage source code provided by an embodiment of the present disclosure, the method comprising:
[0046] S101. During the compilation phase of the target webpage source code, an abstract syntax tree of a preset programming language code in the target webpage source code is obtained.
[0047] The target web page source code refers to the code of the original program for writing web page elements in any H5 page.
[0048] The preset programming language code refers to a pre-set programming language code, such as JS (javascript, script programming language) code, Hypertext Markup Language HTML code, etc.
[0049] Specifically, JS code refers to code written based on JavaScript scripting programming language, and HTML code refers to code written based on Hypertext Markup Language.
[0050] In the embodiment of the present disclosure, the abstract syntax tree refers to a tree-like representation of the abstract syntax structure in the target web page source code, that is, the target web page source code is displayed in a structured manner. Specifically, during the compilation stage of the target web page source code, the abstract syntax tree of the preset programming language code in the target web page source code is obtained by performing syntax analysis on the preset programming language code. For example, when the preset programming language code is JS code, the abstract syntax tree of the JS code in the target web page source code can be obtained by performing syntax analysis on JS.
[0051] S102: Parse the abstract syntax tree and determine a web page element bound to a click event in the abstract syntax tree as a target element.
[0052] In an embodiment of the present disclosure, after obtaining the abstract syntax tree of the preset programming language code in the target web page source code, the abstract syntax tree is parsed to determine whether there is a web page element bound to a click event in the abstract syntax tree. If it is determined that there is a web page element bound to a click event in the abstract syntax tree, the web page element is used as the target element.
[0053] Different preset programming language codes have different ways of obtaining target elements.
[0054] In an optional implementation, when the preset programming language code is JS code, after obtaining the abstract syntax tree of the JS code, the abstract syntax tree of the JS code is parsed to determine whether there is an added listening click event in the abstract syntax tree. If it is determined that there is an added listening click event in the abstract syntax tree, the web page element corresponding to the added listening click event is determined as the target element.
[0055] Among them, adding a click event monitor is used to add a click event monitor function to the web page element.
[0056] Specifically, the abstract syntax tree of the JS code can add listening events to web page elements based on addEventListener. Therefore, when parsing the abstract syntax tree of the JS code, if it is determined whether there is an added listening click event in the abstract syntax tree, it is only necessary to determine whether there is an added clicking listening event in addEventListener in the abstract syntax tree. If a click event is bound to addEventListener, it means that there is an added listening click event in the abstract syntax tree. Furthermore, after determining that there is an added listening click event in the abstract syntax tree, the web page element corresponding to the added listening click event will be used as the target element.
[0057] In order to understand the present disclosure more clearly, the following JS code is used as an example:
[0058]
[0059] As shown in the above code, the value corresponding to addEventListener is click, that is, the click event is bound to addEventListener in the abstract syntax tree, which means that a click event listener is added in the abstract syntax tree. The web page element test corresponding to the added click event listener is obtained, and the web page element test is used as the target element.
[0060] In another optional implementation, when the preset programming language code is HTML code, after obtaining the abstract syntax tree of the HTML code, the abstract syntax tree of the HTML code is parsed to determine the web page element whose attribute name in the abstract syntax tree is the preset click identifier, and the web page element whose attribute name is the preset click identifier is determined as the target element.
[0061] The preset click identifier is a pre-set click identifier, which can be set to onclick. When it is determined that the attribute name in the abstract syntax tree is onclick, the web page element corresponding to the attribute name onclick is determined as the target element.
[0062] For a clearer understanding of the present disclosure, the following HTML code is used as an example:
[0063]
[0064] As shown in the above code, the web page element with the attribute name of onclick in the abstract syntax tree of the HTML code is h1, so h1 is determined as the target element.
[0065] S103: Add a preset sub-element to the target element in the abstract syntax tree to obtain an updated abstract syntax tree.
[0066] The preset child element carries a preset function identifier, and the target function corresponding to the preset function identifier is stored in the cascading style sheet CSS code in the target web page source code. The target function is used to add a preset click area to the target element.
[0067] The preset function identifier has a corresponding relationship with the target function. For example, the preset function identifier may be the name of the target function.
[0068] In an optional implementation, after determining that there is a target element in the abstract syntax tree, a preset sub-element is added to the target element in the abstract syntax tree, and the preset function identifier carried by the preset sub-element is added as the attribute class name to the attributes of the preset sub-element to obtain an updated abstract syntax tree.
[0069] The preset sub-element is used to add a preset click area to the target element.
[0070] In an embodiment of the present disclosure, if the abstract syntax tree is the abstract syntax tree of the HTML code in the source code of the target web page, if the target element is determined to exist in the abstract syntax tree of the HTML code, first, in the abstract syntax tree, the node corresponding to the target element is used as the parent node, a child node is added to it, and a preset function identifier carried by the preset child element is added to the attribute of the child node, thereby obtaining an updated abstract syntax tree.
[0071] In another embodiment of the present disclosure, if the abstract syntax tree is the abstract syntax tree of the JS code in the target web page source code, if the target element is determined to be in the abstract syntax tree of the JS code, first, in the abstract syntax tree of the JS code, a preset sub-element is added to the target element, and the preset function identifier carried by the preset sub-element is used as the attribute class name and added to the attributes of the preset sub-element, thereby obtaining an updated abstract syntax tree.
[0072] In the embodiment of the present disclosure, before adding a preset sub-element to the target element, it is also necessary to add the target function corresponding to the preset function identifier as a global function to the CSS code in the target web page source code.
[0073] Among them, global functions refer to functions that can be called by functions in other files and can be called by functions in preset programming language codes.
[0074] Specifically, in the CSS code, the target function can be shown as follows:
[0075]
[0076] As shown in the above code, global-hot-zone is the name of the target function, and width, height, left, and top are preset click areas added to the target element. Specifically, the preset click area can be added to the target element by setting width, height, left, and top.
[0077] It should be noted that in order not to affect the user's viewing experience, the layer corresponding to the preset click area can be set to transparent.
[0078] S104: Based on the target function in the CSS code and the updated abstract syntax tree, obtain a compilation result corresponding to the target webpage source code.
[0079] In the embodiment of the present disclosure, after obtaining the compilation result corresponding to the target web page source code, when the compilation result is run, after receiving the user's trigger operation on the target element, the target function can be called to add a preset click area to the target element.
[0080] For a clearer understanding of this disclosure, refer to Figure 2 , is a schematic diagram of a web page provided by an embodiment of the present disclosure, such as Figure 2 As shown, a target element 201 and a preset click area 202 are displayed on the page. When the user clicks any position in the preset click area 202, a click operation on the target element 201 can be achieved.
[0081] In the method for processing the web page source code provided by the embodiment of the present disclosure, first, in the compilation stage of the target web page source code, the abstract syntax tree of the preset programming language code in the target web page source code is obtained, the abstract syntax tree is parsed, and the web page element bound to the click event in the abstract syntax tree is determined as the target element. In the abstract syntax tree, a preset sub-element is added to the target element to obtain an updated abstract syntax tree, wherein the preset sub-element carries a preset function identifier, and the target function corresponding to the preset function identifier is stored in the cascading style sheet CSS code in the target web page source code. The target function is used to add a preset click area to the target element. Based on the target function in the CSS code and the updated abstract syntax tree, the compilation result corresponding to the target web page source code is obtained. It can be seen that the embodiment of the present disclosure increases the click area of the target element by adding a preset sub-element to the target element in the abstract syntax tree during the compilation stage of the target web page source code, so that when the compilation result is run, the click sensitivity of the target element can be improved, thereby improving the user experience.
[0082] In order to understand the embodiments of the present disclosure more clearly, refer to Figure 3 , which is a flow chart of another method for processing web page source code provided by an embodiment of the present disclosure.
[0083] like Figure 3 As shown, during the compilation phase of the target webpage source code, the target webpage source code includes HTML code, JS code, and CSS code. Specifically, an HTML abstract syntax tree is obtained from the HTML code, and then the HTML abstract syntax tree is parsed to determine the webpage element whose attribute name is a preset click identifier in the HTML abstract syntax tree. The webpage element whose attribute name is the preset click identifier is determined as the target element. After obtaining the target element, the node corresponding to the target element is used as the parent node, and a child node is added to it. The preset function identifier carried by the preset child element is added to the attribute of the child node, thereby obtaining an updated abstract syntax tree.
[0084] Obtain the JS abstract syntax tree from the JS code, and then parse the JS abstract syntax tree to determine whether there is an added listening click event in the JS abstract syntax tree. If there is an added listening click event, the web page element corresponding to the added listening click event is determined as the target element. After obtaining the target element, add a preset child element to the target element. Specifically, the preset function identifier carried by the preset child element can be used as the attribute class name and added to the attributes of the preset child element, thereby obtaining an updated abstract syntax tree.
[0085] The target function corresponding to the preset function identifier is added as a global function to the CSS code in the target web page source code, so that the target function can be called by the function in the preset programming language code. Then, based on the target function in the CSS code and the updated abstract syntax tree, the compilation result corresponding to the target web page source code is obtained, so that when the compilation result is run, the click sensitivity of the target element can be improved, thereby improving the user experience.
[0086] Corresponding to the above method embodiment, the present disclosure also provides a web page source code processing device, referring to Figure 4 , is a schematic diagram of the structure of a webpage source code processing device provided by an embodiment of the present disclosure, the device comprising:
[0087] The first acquisition module 401 is configured to acquire an abstract syntax tree of a preset programming language code in the target webpage source code during the compilation phase of the target webpage source code;
[0088] A determination module 402 is configured to parse the abstract syntax tree and determine a web page element bound to a click event in the abstract syntax tree as a target element;
[0089] A first adding module 403 is configured to add a preset sub-element to the target element in the abstract syntax tree to obtain an updated abstract syntax tree; wherein the preset sub-element carries a preset function identifier, and the target function corresponding to the preset function identifier is stored in the Cascading Style Sheet (CSS) code in the source code of the target webpage, and the target function is used to add a preset click area to the target element;
[0090] The second acquisition module 404 is configured to acquire a compilation result corresponding to the target webpage source code based on the target function and the updated abstract syntax tree in the CSS code.
[0091] In an optional implementation, the preset programming language code includes JS code; the determining module 402 includes:
[0092] A first determination submodule is configured to parse the abstract syntax tree of the JS code to determine whether there is an added listening click event in the abstract syntax tree; wherein the added listening click event is used to add a listening function for click events to the web page element;
[0093] The second determining submodule is configured to determine, when determining that the add listener click event exists in the abstract syntax tree, a web page element corresponding to the add listener click event as a target element.
[0094] In an optional implementation, the preset programming language code includes HTML code; the determining module 402 includes:
[0095] A third determining submodule is configured to parse the abstract syntax tree of the HTML code and determine a web page element having an attribute name of a preset click identifier in the abstract syntax tree;
[0096] The fourth determining submodule is configured to determine the webpage element whose attribute name is the preset click identifier as a target element.
[0097] In an optional implementation, the first adding module 403 includes:
[0098] A first adding submodule, configured to add a preset sub-element to the target element in the abstract syntax tree;
[0099] The second adding submodule is used to add the preset function identifier carried by the preset sub-element as the attribute class name to the attributes of the preset sub-element to obtain an updated abstract syntax tree.
[0100] In an optional embodiment, it is characterized in that the device further includes:
[0101] The second adding module is used to add the target function corresponding to the preset function identifier as a global function to the CSS code in the target web page source code.
[0102] In the web page source code processing device provided by the embodiment of the present disclosure, first, in the compilation stage of the target web page source code, the abstract syntax tree of the preset programming language code in the target web page source code is obtained, the abstract syntax tree is parsed, and the web page element bound to the click event in the abstract syntax tree is determined as the target element. In the abstract syntax tree, a preset sub-element is added to the target element to obtain an updated abstract syntax tree, wherein the preset sub-element carries a preset function identifier, and the target function corresponding to the preset function identifier is stored in the cascading style sheet CSS code in the target web page source code. The target function is used to add a preset click area to the target element. Based on the target function in the CSS code and the updated abstract syntax tree, the compilation result corresponding to the target web page source code is obtained. It can be seen that the embodiment of the present disclosure increases the click area of the target element by adding a preset sub-element to the target element in the abstract syntax tree during the compilation stage of the target web page source code, so that when the compilation result is run, the click sensitivity of the target element can be improved, thereby improving the user experience.
[0103] In addition to the above-mentioned method and apparatus, the embodiments of the present disclosure further provide a computer-readable storage medium, which stores instructions. When the instructions are executed on a terminal device, the terminal device implements the web page source code processing method described in the embodiments of the present disclosure.
[0104] The embodiments of the present disclosure further provide a computer program product, which includes a computer program / instructions. When the computer program / instructions are executed by a processor, the method for processing web page source code described in the embodiments of the present disclosure is implemented.
[0105] In addition, the present disclosure also provides a web page source code processing device, see Figure 5 As shown, this may include:
[0106] Processor 501, memory 502, input device 503 and output device 504. The number of processors 501 in the webpage source code processing device can be one or more. Figure 5 In some embodiments of the present disclosure, the processor 501, the memory 502, the input device 503 and the output device 504 may be connected via a bus or other means, wherein: Figure 5 The bus connection is taken as an example.
[0107] The memory 502 can be used to store software programs and modules. The processor 501 runs the software programs and modules stored in the memory 502, thereby performing various functional applications of the web page source code processing device and processing of the web page source code. The memory 502 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, at least one application required for a function, etc. In addition, the memory 502 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage device. The input device 503 may be used to receive input digital or character information, and to generate signal input related to user settings and function control of the web page source code processing device.
[0108] Specifically in this embodiment, the processor 501 will load the executable files corresponding to the processes of one or more applications into the memory 502 according to the following instructions, and the processor 501 will run the applications stored in the memory 502, thereby realizing the various functions of the above-mentioned web page source code processing device.
[0109] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or device comprising the element.
[0110] The foregoing description is intended only to provide specific embodiments of the present disclosure, intended to enable those skilled in the art to understand and implement the present disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the embodiments described herein, but rather to be construed in the broadest manner consistent with the principles and novel features disclosed herein.
Claims
1. A method for processing web page source code, characterized in that: The method comprises: During the compilation phase of the target webpage source code, an abstract syntax tree of a preset programming language code in the target webpage source code is obtained; Parsing the abstract syntax tree to determine a webpage element bound to a click event in the abstract syntax tree as a target element; In the abstract syntax tree, a preset sub-element is added to the target element to obtain an updated abstract syntax tree; wherein the preset sub-element carries a preset function identifier, and the target function corresponding to the preset function identifier is stored in the Cascading Style Sheet (CSS) code in the source code of the target webpage, and the target function is used to add a preset click area to the target element; Based on the target function and the updated abstract syntax tree in the CSS code, a compilation result corresponding to the target webpage source code is obtained.
2. The method according to claim 1, characterized in that The preset programming language code includes JS code; and parsing the abstract syntax tree to determine a webpage element bound to a click event in the abstract syntax tree as a target element includes: Parsing the abstract syntax tree of the JS code to determine whether there is an added listening click event in the abstract syntax tree; wherein the added listening click event is used to add a listening function for the click event to the web page element; If it is determined that the add listener click event exists in the abstract syntax tree, the web page element corresponding to the add listener click event is determined as the target element.
3. The method according to claim 1, characterized in that The preset programming language code includes HTML code; The parsing of the abstract syntax tree to determine a webpage element bound to a click event in the abstract syntax tree as a target element includes: Parsing the abstract syntax tree of the HTML code to determine a web page element whose attribute name is a preset click identifier in the abstract syntax tree; The webpage element whose attribute name is the preset click identifier is determined as the target element.
4. The method according to claim 1, wherein Adding a preset sub-element to the target element in the abstract syntax tree to obtain an updated abstract syntax tree includes: In the abstract syntax tree, adding a preset sub-element for the target element; The preset function identifier carried by the preset sub-element is used as an attribute class name and added to the attributes of the preset sub-element to obtain an updated abstract syntax tree.
5. The method according to any one of claims 1 to 4, characterized in that Before obtaining the compilation result corresponding to the target webpage source code based on the target function and the updated abstract syntax tree in the CSS code, the method further includes: The target function corresponding to the preset function identifier is added as a global function to the CSS code in the target web page source code.
6. A web page source code processing device, characterized in that: The device comprises: A first acquisition module is configured to acquire an abstract syntax tree of a preset programming language code in the target webpage source code during a compilation phase of the target webpage source code; a determination module, configured to parse the abstract syntax tree and determine a web page element bound to a click event in the abstract syntax tree as a target element; a first adding module, configured to add a preset sub-element to the target element in the abstract syntax tree to obtain an updated abstract syntax tree; wherein the preset sub-element carries a preset function identifier, a target function corresponding to the preset function identifier is stored in Cascading Style Sheets (CSS) code in the source code of the target webpage, and the target function is used to add a preset click area to the target element; The second acquisition module is used to acquire the compilation result corresponding to the target webpage source code based on the target function and the updated abstract syntax tree in the CSS code.
7. The device according to claim 6, characterized in that The preset programming language code includes JS code; The determining module includes: A first determination submodule is configured to parse the abstract syntax tree of the JS code to determine whether there is an added listening click event in the abstract syntax tree; wherein the added listening click event is used to add a listening function for click events to the web page element; The second determining submodule is configured to determine, when determining that the add listener click event exists in the abstract syntax tree, a web page element corresponding to the add listener click event as a target element.
8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores instructions, and when the instructions are executed on a terminal device, the terminal device implements the method according to any one of claims 1 to 5.
9. A webpage source code processing device, characterized in that: include: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the method according to any one of claims 1 to 5 is implemented.
10. A computer program product, characterized in that The computer program product comprises a computer program / instruction, and when the computer program / instruction is executed by a processor, the method according to any one of claims 1 to 5 is implemented.
Citation Information
Patent Citations
Webpage development method and device, computer equipment and storage medium
CN112732254A
Touch event response method and device
CN113867584A