Method and device for determining page style pollution, storage medium and device

Abstract

The present disclosure relates to a method and apparatus, storage medium and device for determining page style pollution, the method comprising: loading a component library style file in a style file of a target page based on a test page; determining the attribute value of each child node of the test page that has loaded the component library style file; loading a non-component library style file in a style file of the target page based on the test page that has loaded the component library style file; determining the attribute value of each child node of the test page that has loaded the non-component library style file; for each child node of the test page, determining whether the attribute value of the child node after the component library style file is loaded on the test page and the attribute value of the child node after the non-component library style file is loaded on the test page have changed, if the attribute value of any child node has changed, it is determined that the style of the target page is polluted.

Description

Technical Field

[0001] The present disclosure relates to the field of information technology, and in particular, to a method and apparatus for determining page style pollution, a storage medium and a device. Background Art

[0002] With the development trend of front-end technology, front-end component development has become a common software development method. Componentization can easily abstract, isolate, and reuse functions, and the component library developed can provide many basic components, including buttons, form controls, pop-up boxes, information layout, etc. A component contains the HTML, CSS styles, JS code, etc. that it renders. When using it, some scenarios can directly call the CSS styles in the component library, while some scenarios need to be customized.

[0003] When customizing CSS styles, if there is a mistake in modifying the style of a component, and if there is no restriction on the modified object when modifying a component, it will affect the global style of the system, that is, it will cause style pollution of the page. Because a page usually has many components and the content of the CSS file is large, it is difficult to detect whether the style of the page is polluted before loading, and it is difficult to find out which component's style is modified to cause global style pollution. Summary of the invention

[0004] The purpose of the present disclosure is to provide a method and apparatus for determining page style pollution, a storage medium and a device to solve the above technical problems.

[0005] A first aspect of the present disclosure provides a method for determining page style pollution, comprising: loading a component library style file in a style file of a target page based on a test page, the test page being a preset page constructed by a component library style; determining the attribute value of each child node of the test page that has loaded the component library style file; loading a non-component library style file in a style file of the target page based on the test page that has loaded the component library style file; determining the attribute value of each child node of the test page that has loaded the non-component library style file; for each child node of the test page, determining whether the attribute value of the child node after the component library style file is loaded on the test page and the attribute value of the child node after the non-component library style file is loaded on the test page have changed, and if the attribute value of any child node has changed, it is determined that the style of the target page is polluted.

[0006] Optionally, after determining that the style of the target page is polluted, the method further includes: determining the element type of the child node whose attribute value has changed; and determining the loaded item that causes the style pollution in the non-component library style file based on the element type and the changed attribute value of the child node.

[0007] Optionally, before loading the component library style file in the style file of the target page based on the test page, the method further includes: determining the component library style file in the style file of the target page; and determining the non-component library style file in the style file of the target page.

[0008] Optionally, the style file is a CSS file, and the child node is an HTML tag.

[0009] Optionally, the loading of the component library style file in the style file of the target page includes: removing the non-component library CSS file from the HTML document; the loading of the non-component library style file in the style file of the target page includes: adding the removed CSS file to the HTML document.

[0010] According to a second aspect of the present disclosure, there is provided a device for determining page style pollution, comprising: a first loading module, for loading a component library style file in a style file of a target page based on a test page, wherein the test page is a preset page constructed by a component library style; a first determining module, for determining the attribute value of each child node of the test page that has been loaded with the component library style file; a second loading module, for loading a non-component library style file in a style file of the target page based on the test page that has been loaded with the component library style file; a second determining module, for determining the attribute value of each child node of the test page that has been loaded with the non-component library style file; a judging module, for judging, for each child node of the test page, whether the attribute value of the child node after the component library style file is loaded on the test page and the attribute value of the child node after the non-component library style file is loaded on the test page have changed, and if the attribute value of any child node has changed, it is determined that the style of the target page is polluted.

[0011] Optionally, the device also includes a third determination module, which is used to determine the element type of the child node whose attribute value has changed, and determine the loaded items that cause style pollution in the non-component library style file based on the element type and the changed attribute value of the child node.

[0012] Optionally, the device further comprises a distinguishing module, configured to determine a component library style file in the style file of the target page, and to determine a non-component library style file in the style file of the target page.

[0013] Optionally, the style file is a CSS file, and the child node is an HTML tag.

[0014] Optionally, the first loading module is used to remove the CSS files of the non-component library from the HTML document; the second loading module is used to add the removed CSS files to the HTML document.

[0015] According to a third aspect of the present disclosure, a storage medium is provided, on which a program is stored, and when the program is executed by a processor, the steps of any one of the methods described in the first aspect of the present disclosure are implemented.

[0016] The fourth aspect of the present disclosure provides a device, comprising: at least one processor, and at least one memory and a bus connected to the processor; wherein the processor and the memory communicate with each other through the bus; and the processor is used to call program instructions in the memory to execute the steps of any one of the methods described in the first aspect of the present disclosure.

[0017] Through the above technical solution, the attribute value differences of each sub-node of the test page before and after loading the customized non-component library style of the target page can be compared. When the attribute values ​​are different, it can be determined that the style of the target page is contaminated. Before the target page goes online, the style pollution that may be caused to other pages of the system can be checked, which can reduce the impact of style pollution on the overall system and improve user experience.

[0018] Other features and advantages of the present disclosure will be described in detail in the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The accompanying drawings are used to provide a further understanding of the present disclosure and constitute a part of the specification. Together with the following specific embodiments, they are used to explain the present disclosure but do not constitute a limitation of the present disclosure. In the accompanying drawings:

[0020] Figure 1 The invention is a flow chart showing a method for determining page style pollution according to an exemplary disclosed embodiment.

[0021] Figure 2 The invention is a block diagram showing an apparatus for determining page style pollution according to an exemplary disclosed embodiment.

[0022] Figure 3 is a block diagram of a device according to an exemplary disclosed embodiment. DETAILED DESCRIPTION

[0023] The specific implementation of the present disclosure is described in detail below in conjunction with the accompanying drawings. It should be understood that the specific implementation described here is only used to illustrate and explain the present disclosure, and is not used to limit the present disclosure.

[0024] First, the implementation scenario of the present disclosure is described. When developing a system page, it is usually involved in the situation of fine-tuning the style of the component. For example, there is a button component with an internal spacing of 8 pixels in the system. When making a new page, in order to make the page beautiful, the internal spacing of the button component used for submitting the form of the new page needs to be changed to 4 pixels. When making modifications, the developer usually adds a submit class restriction for the new page to modify the style of the button used for submitting the form in the new page. However, if the developer is negligent or has other reasons, resulting in no restrictions on the customized components when customizing the style, once the style file of the new page without restrictions is loaded, it will affect the components of all other pages in the system, causing the customized settings to be globalized, reducing the beauty and practicality of the system page, and affecting the user experience. Under normal circumstances, before the style file of the new page is loaded, there is no effective way to check whether the style file will cause global style pollution to the system page, and the new page with an incorrect style file may have an adverse effect on the system once it goes online.

[0025] Figure 1 is a flow chart showing a method for determining page style pollution according to an exemplary disclosed embodiment. Figure 1 As shown, the method comprises the following steps:

[0026] S11. Based on the test page, a component library style file in a style file of a target page is loaded. The test page is a preset page constructed by a component library style.

[0027] In the present disclosure, the style file may be a CSS file. The test page is a page consisting of only the initial style of the component library and using the same set of style files as the system where the target page is located. Typically, the test page may be part of the system to which the target page belongs, but will not be displayed in the system.

[0028] When loading the component library style files of the target page, you can only load the component library CSS files that have been packaged separately from the component library CSS files and customized CSS files, or after loading all CSS files, remove the non-component library CSS files from the HTML document.

[0029] Optionally, before loading the component library style file in the style file of the target page, the component library style file can be determined in the style file of the target page, and the non-component library style file can be determined in the style file of the target page. Grouping the component library style file and the non-component library style file separately can more efficiently find the style file that needs to be loaded during loading. The component library style file is the general style file used by the system to which the target page belongs, and the non-component library style file is the customized style file used by the system to which the target page belongs.

[0030] S12: Determine the attribute value of each sub-node of the test page that has loaded the component library style file.

[0031] Subnode attributes can be HTML tags. After loading the component library style file, the subnode attributes of the test page may be assigned values. Therefore, all subnodes in the page can be traversed, and the attribute values ​​of their different attributes can be calculated (traversing all HTML tag values), and the attributes and attribute values ​​of the subnodes can be recorded as a collection.

[0032] For example, the test page has five attributes: title font A, body font B, text spacing C, button type D, and button size E. The attribute values ​​are a1, b1, c1, d1, and e1 respectively. The attributes and attribute values ​​can be recorded as a set O{A:a1,B:b1,C:c1,D:d1,E,e1}.

[0033] S13. Based on the test page that has loaded the component library style file, load the non-component library style file in the style file of the target page.

[0034] When loading non-component library style files, there are two different ways corresponding to loading component library style files. You can also load the component library style files (i.e., component library CSS files) that have been packaged separately from the component library style files (which can be component library CSS files) and non-component library style files (which can be customized CSS files), or resume loading the CSS files that were removed from the HTML document during the last loading.

[0035] S14: Determine the attribute value of each sub-node of the test page that has loaded the non-component library style file.

[0036] Similarly, the sub-node attributes can be HTML tags. After loading the non-component library style file, if the component customization for the target page does not restrict the components that need to be customized, the non-component library style file will affect the sub-node attributes of the test page; if the component customization of the target page restricts the customized components, the sub-node attributes of the test page will not change due to the loading of the non-component library style file.

[0037] After loading the non-component library style file, the attribute values ​​of the subnodes of the test page may change. Therefore, all subnodes in the test page can be traversed, and the attribute values ​​of their different attributes can be calculated (traversing all HTML tag values), and the attributes and attribute values ​​of the subnodes can be recorded as a new collection.

[0038] For example, the test page has five attributes: title font A, body font B, text spacing C, button type D, and button size E. After loading the non-component library style file, the attribute values ​​are a1, b1, c2, d1, and e1, respectively. The attributes and attribute values ​​can be recorded as a set P{A:a1,B:b1,C:c2,D:d1,E,e1}.

[0039] S15. For each child node of the test page, determine whether the attribute value of the child node after the test page loads the component library style file and the attribute value of the child node after the test page loads the non-component library style file are changed. If the attribute value of any child node is changed, it is determined that the style of the target page is contaminated.

[0040] As described above, after loading the non-component library style file, if the component customization for the target page does not restrict the components that need to be customized, the non-component library style file will affect the sub-node attributes of the test page; and if the component customization of the target page restricts the customized components, the sub-node attributes of the test page will not change due to the loading of the non-component library style file. Therefore, by comparing whether the sub-node attribute values ​​of the test page before and after loading the non-component library style file have changed, it can be determined whether the non-component library style file will cause style pollution, so as to pre-detect whether loading the style file of the target page will affect the global component style of the system where the target page is located.

[0041] For example, the test page has five attributes: title font A, body font B, text spacing C, button type D, and button size E. The attribute values ​​are a1, b1, c1, d1, and e1, that is, set O{A:a1,B:b1,C:c1,D:d1,E,e1}; after loading the non-component library style file, the attribute values ​​are a1, b1, c2, d1, and e1, that is, set P{A:a1,B:b1,C:c2,D:d1,E,e1}. Comparing set O and set P, it can be seen that the attribute value of text spacing C has changed. Therefore, after loading the style file of the target page, the attribute values ​​of all text spacing C in the system will change, and the system pages will be polluted by style.

[0042] Optionally, after determining that the style of the target page is polluted, the element type of the child node whose attribute value has changed can also be determined, and based on the element type and the changed attribute value of the child node, the loaded item that causes the style pollution can be determined in the non-component library style file.

[0043] For example, the test page has five attributes: title font A, body font B, text spacing C, button type D, and button size E. The attribute values ​​are a1, b1, c1, d1, and e1, that is, set O{A:a1,B:b1,C:c1,D:d1,E,e1}; after loading the non-component library style file, the attribute values ​​are a1, b1, c2, d1, and e1, that is, set P{A:a1,B:b1,C:c2,D:d1,E,e1}. By comparing set O and set P, it can be seen that the attribute value of text spacing C has changed. Therefore, it can be determined that the loading item that adjusts text spacing C in the non-component library style file causes style pollution. When there are three loading items that adjust text spacing C in the non-component library style file, text spacing C can be adjusted to c2, c3, and c4 respectively. According to the attribute value c2 of the child node text spacing C after the change, it can be determined that the loading item that causes style pollution is the loading item that adjusts text spacing C to c2.

[0044] In a possible implementation, after the loaded item causing style pollution is determined, an alarm message may be generated to remind the user that there is a file causing style pollution in the style file. The alarm message may include at least one of the attribute causing style pollution, the style file causing style pollution, and the loaded item causing style pollution.

[0045] Through the above technical solution, the attribute value differences of each sub-node of the test page before and after loading the customized non-component library style of the target page can be compared. When the attribute values ​​are different, it can be determined that the style of the target page is contaminated. Before the target page goes online, the style pollution that may be caused to other pages of the system can be checked, which can reduce the impact of style pollution on the overall system and improve user experience.

[0046] Figure 2 is a block diagram of an apparatus for determining page style pollution according to an exemplary disclosed embodiment. Figure 2 As shown, the device 200 includes a first loading module 210 , a first determining module 220 , a second loading module 230 , a second determining module 240 and a judging module 250 .

[0047] The first loading module 210 is used to load the component library style file in the style file of the target page based on the test page, and the test page is a preset page constructed by the component library style;

[0048] The first determination module 220 is used to determine the attribute value of each sub-node of the test page that has loaded the component library style file;

[0049] The second loading module 230 is used to load the non-component library style file in the style file of the target page based on the test page that has loaded the component library style file;

[0050] The second determination module 240 is used to determine the attribute value of each sub-node of the test page that has loaded the non-component library style file;

[0051] The judgment module 250 is used to judge, for each child node of the test page, whether the attribute value of the child node after the test page loads the component library style file and the attribute value of the child node after the test page loads the non-component library style file. If the attribute value of any child node changes, it is determined that the style of the target page is contaminated.

[0052] Optionally, the device also includes a third determination module, which is used to determine the element type of the child node whose attribute value has changed, and determine the loaded items that cause style pollution in the non-component library style file based on the element type and the changed attribute value of the child node.

[0053] Optionally, the device further comprises a distinguishing module, configured to determine a component library style file in the style file of the target page, and to determine a non-component library style file in the style file of the target page.

[0054] Optionally, the style file is a CSS file, and the child node is an HTML tag.

[0055] Optionally, the first loading module is used to remove the CSS files of the non-component library from the HTML document; the second loading module is used to add the removed CSS files to the HTML document.

[0056] The device for determining page style pollution includes a processor and a memory. The above-mentioned first loading module, first determination module, second loading module, second determination module and judgment module are all stored in the memory as program units, and the processor executes the above-mentioned program units stored in the memory to implement corresponding functions.

[0057] The processor includes a kernel, which calls the corresponding program unit from the memory. The kernel can be set to one or more, and the page style pollution is determined by adjusting the kernel parameters.

[0058] An embodiment of the present invention provides a storage medium on which a program is stored. When the program is executed by a processor, the method for determining page style pollution is implemented.

[0059] An embodiment of the present invention provides a processor, which is used to run a program, wherein the method for determining page style pollution is executed when the program is running.

[0060] The embodiment of the present invention provides a device 300, which includes at least one processor 301, at least one memory 302 and a bus 303 connected to the processor 301; wherein the processor 301 and the memory 302 communicate with each other through the bus 303; the processor 301 is used to call the program instructions in the memory 302 to execute the above-mentioned method for determining page style pollution. The device in this article can be a server, a PC, a PAD, a mobile phone, etc.

[0061] The present application also provides a computer program product, which, when executed on a data processing device, is suitable for executing a program that is initialized with the following method steps: based on a test page, loading a component library style file in a style file of a target page, the test page being a preset page constructed by a component library style; determining the attribute values ​​of each child node of the test page that has loaded the component library style file; based on the test page that has loaded the component library style file, loading a non-component library style file in a style file of the target page; determining the attribute values ​​of each child node of the test page that has loaded the non-component library style file; for each child node of the test page, determining whether the attribute value of the child node after the component library style file is loaded on the test page and the attribute value of the child node after the non-component library style file is loaded on the test page have changed, and if the attribute value of any child node has changed, it is determined that the style of the target page is contaminated.

[0062] Optionally, after determining that the style of the target page is polluted, the method further includes: determining the element type of the child node whose attribute value has changed; and determining the loaded item that causes the style pollution in the non-component library style file based on the element type and the changed attribute value of the child node.

[0063] Optionally, before loading the component library style file in the style file of the target page based on the test page, the method further includes: determining the component library style file in the style file of the target page; and determining the non-component library style file in the style file of the target page.

[0064] Optionally, the style file is a CSS file, and the child node is an HTML tag.

[0065] Optionally, the loading of the component library style file in the style file of the target page includes: removing the non-component library CSS file from the HTML document; the loading of the non-component library style file in the style file of the target page includes: adding the removed CSS file to the HTML document.

[0066] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0067] In a typical configuration, the device includes one or more processors (CPU), memory and bus. The device may also include input / output interface, network interface and the like.

[0068] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip. The memory is an example of a computer-readable medium.

[0069] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0070] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0071] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0072] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A method for determining page style pollution, characterized in that: The method comprises: Determine a component library style file in the style file of the target page, wherein the component library style file is a common style file used by the system to which the target page belongs; Determine a non-component library style file in the style file of the target page, where the non-component library style file is a customized style file used by the system to which the target page belongs; Based on the test page, the component library style file in the style file of the target page is loaded, and the test page is a preset page constructed by the component library style; Determine the attribute value of each sub-node of the test page that has loaded the component library style file; Based on the test page that has loaded the component library style file, load the non-component library style file in the style file of the target page; Determine the attribute value of each sub-node of the test page that has loaded the non-component library style file; For each child node of the test page, determine whether the attribute value of the child node after the test page loads the component library style file and the attribute value of the child node after the test page loads the non-component library style file change; if the attribute value of any child node changes, determine that the style of the target page is polluted; After determining that the style of the target page is polluted, the method further includes: Determine the element type of the child node whose attribute value has changed; According to the element type and the changed attribute value of the child node, a loaded item causing style pollution is determined in the non-component library style file.

2. The method according to claim 1, characterized in that The style file is a CSS file, and the child nodes are HTML tags.

3. The method according to claim 2, characterized in that The component library style file in the style file of the target page is loaded, including: Remove non-component library CSS files from HTML documents; The non-component library style file in the style file of the target page is loaded, including: The removed CSS file is added to the HTML document.

4. A device for determining page style pollution, characterized in that: The device comprises: A distinguishing module, used to determine a component library style file in the style file of the target page, and to determine a non-component library style file in the style file of the target page, wherein the component library style file is a common style file adopted by the system to which the target page belongs, and the non-component library style file is a customized style file adopted by the system to which the target page belongs; A first loading module is used to load a component library style file in a style file of a target page based on a test page, wherein the test page is a preset page constructed by a component library style; A first determination module is used to determine the attribute value of each sub-node of the test page that has loaded the component library style file; A second loading module is used to load the non-component library style file in the style file of the target page based on the test page that has loaded the component library style file; A second determination module is used to determine the attribute value of each sub-node of the test page that has loaded the non-component library style file; A judgment module is used to judge, for each child node of the test page, whether an attribute value of the child node after the test page loads the component library style file and an attribute value of the child node after the test page loads the non-component library style file have changed; if the attribute value of any child node has changed, it is determined that the style of the target page is polluted; The device also includes a third determination module, which is used to determine the element type of the child node whose attribute value has changed, and determine the loaded items that cause style pollution in the non-component library style file according to the element type and the attribute value of the child node after the change.

5. A storage medium having a program stored thereon, characterized in that: When the program is executed by a processor, the steps of the method described in any one of claims 1 to 3 are implemented.

6. A device, characterized in that: The device comprises: At least one processor, and at least one memory and bus connected to the processor; Wherein, the processor and the memory communicate with each other through the bus; The processor is used to call the program instructions in the memory to execute the steps of the method according to any one of claims 1 to 3.

Images