A front-end layout processing method, device and equipment of a webpage and a storage medium

Abstract

The application provides a webpage front-end layout processing method, device and equipment and a storage medium. The method comprises the following steps: obtaining target configuration information according to acquired global configuration information and independent configuration information of a front-end layout container; determining that there is a breadcrumb under the condition that the target configuration information exists; determining that there is a pre-configured breadcrumb construction method corresponding to the breadcrumb; acquiring a current address path corresponding to the breadcrumb construction method; inputting the current address path as a target address path into the breadcrumb construction method, acquiring the breadcrumb, and performing rendering processing on the breadcrumb; and listening to the change of the current address path. If it is determined that the current address path has changed, the changed current address path is acquired, the changed current address path is taken as the target address path, the target address path is input into the breadcrumb construction method, the breadcrumb is acquired, and the rendering processing is performed again. The method provided by the application reduces the development workload and improves the development efficiency.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, device and storage medium for front-end layout processing of web pages. Background Technology

[0002] With the popularization of paperless office, cloud computing, and cloud services, various business management, big data, SaaS, and Pass systems have emerged. Although these systems generally have similar layouts for the main content areas of web pages and very similar functions, each system requires independent development. Therefore, for similar content across different systems, each system needs to perform repetitive tasks, resulting in a significant workload.

[0003] Therefore, to address the issue of excessive workload, existing technologies primarily employ Layout components to lay out the main content areas of web pages for various business systems. Specifically, this Layout component defines the overall page framework structure, including Header, Content, Footer, and Sider, and supports flexible nesting. However, existing Layout components lack breadcrumbs and other elements; therefore, additional breadcrumb components need to be introduced. Furthermore, when introducing breadcrumb components, they also need to be bound to menu content.

[0004] Therefore, although this reduces the workload of various business systems to some extent, it also increases the development workload due to the repeated import of components and the operation of finding menu content for binding, resulting in low development efficiency. Summary of the Invention

[0005] This application provides a front-end layout processing method, apparatus, device, and storage medium for web pages, in order to solve the technical problem of low development efficiency.

[0006] Firstly, this application provides a front-end layout processing method for web pages, including:

[0007] Get the front-end layout request of the webpage, and get the front-end layout container that matches the front-end layout request of the webpage; wherein, the matching front-end layout container includes a header container and a pure container, and the header container includes a breadcrumb component.

[0008] Retrieve the global and independent configuration information of the matching front-end layout container respectively;

[0009] Obtain the target configuration information based on the global configuration information and the independent configuration information;

[0010] If breadcrumbs are found in the target configuration information, determine whether there is a pre-configured breadcrumb construction method corresponding to the breadcrumbs.

[0011] If it is determined that there is a pre-configured breadcrumb constructor method corresponding to the breadcrumb, then obtain the current address path corresponding to the breadcrumb constructor method;

[0012] The current address path is used as the target address path and input into the breadcrumb constructor to obtain breadcrumbs and then render them.

[0013] Listen for changes in the current address path, and when the listener determines that the current address path has changed, obtain the changed current address path and use the changed current address path as the target address path. Input the target address path into the breadcrumb constructor, obtain the breadcrumbs, and re-render.

[0014] Optionally, using the method described above, the global configuration information and independent configuration information of the matching front-end layout container can be obtained respectively, including:

[0015] When it is determined that global configuration is enabled, all contents in the global configuration will be used as global configuration information;

[0016] From multiple independent configurations, determine the enabled independent configurations and use the contents of each enabled independent configuration as independent configuration information;

[0017] The global configuration includes one or more of the following: header container style, header container class, plain container style, plain container class, breadcrumbs, and size change listener interval.

[0018] The independent configuration includes: breadcrumbs, title, container type, main container style, main container class, child container style, child container class, size change listener interval, size change listener callback, or tag attributes.

[0019] Optionally, the above method obtains the target configuration information based on global configuration information and independent configuration information, including:

[0020] Use all the contents of the independent configuration information as the target configuration information;

[0021] Content in the global configuration information that has attributes different from those in the independent configuration information will be used as the target configuration information.

[0022] Optionally, after obtaining the target configuration information based on global configuration information and independent configuration information, the method described above further includes:

[0023] If the target configuration information determines that the header container is enabled, and if the target configuration information contains a title or logo, the corresponding content in the header container is enabled, and the header container and the plain container are rendered.

[0024] Optionally, as described above, when it is determined that the header container is enabled based on the target configuration information, and it is determined that a title or logo exists in the target configuration information, the corresponding content in the header container is enabled, and the header container and the plain container are rendered, including:

[0025] When determining to enable the header container based on the target configuration information, determine whether the logo exists in the target configuration information;

[0026] If a Logo is found in the target configuration information, determine whether to disable the Logo.

[0027] Render the logo if you determine that you do not disable the logo.

[0028] Alternatively, the method described above may also include:

[0029] When determining to enable the header container based on the target configuration information, determine whether a header exists in the target configuration information;

[0030] If a title is found in the target configuration information, render the title.

[0031] Optionally, after obtaining the target configuration information based on global configuration information and independent configuration information, the method described above further includes:

[0032] When it is determined that the header container is not enabled based on the target configuration information, or after the header container has been rendered, the pure container in the matching front-end layout container is rendered, and it is determined whether there is a size change listener callback in the target configuration information.

[0033] If it is confirmed that the container exists, then render the container that can listen for size changes;

[0034] If it is determined that the container does not exist, then the rendering cannot listen for changes in size of the container.

[0035] Optionally, the method described above, if it is determined that such a container exists, and before rendering a container capable of listening for size changes, may further include:

[0036] Get the environment information of the browser on which the matching front-end layout container is based;

[0037] Based on the environment information, determine whether the browser supports listening to the interface;

[0038] If it is determined that the browser supports the listener interface, then create a collection of key-value pairs for the corresponding callbacks for each document object model within the browser, as well as an instance of the listener interface;

[0039] The listener monitors the document object model based on the listener interface instance. If the size of the document object model changes, the key-value pair collection of the callback corresponding to the document object model is invoked.

[0040] Optionally, after determining whether the browser supports listening to the interface based on the environment information, the method described above also includes:

[0041] If it is determined that the browser does not support the listener interface, then create an embedded object element with the same size as the document object model;

[0042] Determine the properties of the document object model and the embedded object elements so that the size of the embedded object elements remains consistent with the document object model and can change accordingly;

[0043] Create a blank page based on the embedded object element;

[0044] Access the blank page based on the attributes in the embedded object element, and register a listener event on the blank page to listen for changes in the size of the blank page;

[0045] If the size of the blank page changes, then the size of the document object model will change.

[0046] Secondly, this application provides a front-end layout processing apparatus for a webpage, comprising:

[0047] The acquisition module is used to acquire the front-end layout request of the webpage, and acquire the front-end layout container that matches the front-end layout request of the webpage. The matched front-end layout container includes a header container and a pure container, and the header container includes a breadcrumb component. The global configuration information and independent configuration information of the matched front-end layout container are acquired respectively. The target configuration information is acquired based on the global configuration information and the independent configuration information.

[0048] The determination module is used to determine whether there is a pre-configured breadcrumb construction method corresponding to the breadcrumbs when breadcrumbs are found in the target configuration information; if it is determined that there is a pre-configured breadcrumb construction method corresponding to the breadcrumbs, the current address path corresponding to the breadcrumb construction method is obtained.

[0049] The rendering module is used to take the current address path as the target address path, input it into the breadcrumb constructor, obtain breadcrumbs, and perform rendering processing on the breadcrumbs.

[0050] The listening module is used to monitor changes in the current address path. When the listening module determines that the current address path has changed, it obtains the changed current address path and uses the changed current address path as the target address path. The target address path is then input into the breadcrumb constructor to obtain breadcrumbs and re-render them.

[0051] Thirdly, this application proposes an electronic device, including a processor and a memory communicatively connected to the processor;

[0052] The memory stores instructions that the computer executes;

[0053] The processor executes computer execution instructions stored in memory to implement the method as described in this application.

[0054] Fourthly, this application proposes a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the method of this application.

[0055] This application provides a front-end layout processing method, apparatus, device, and storage medium for web pages. The method obtains a front-end layout request for a web page and, based on the request, obtains a front-end layout container matching the request. It then obtains global and independent configuration information for the matching front-end layout container, and finally obtains target configuration information based on the global and independent configuration information. By using global and independent configuration information to obtain the target configuration information, the method flexibly addresses the different needs of different web pages, reducing the steps involved in implementing layout for each web page. When breadcrumbs are found in the target configuration information, the method determines whether a pre-configured breadcrumb construction method exists. If such a method exists, the method obtains the current address path corresponding to the breadcrumb construction method. This current address path is then used as the target address path and input into the breadcrumb construction method to obtain breadcrumbs, which are then rendered. Constructing breadcrumbs using the breadcrumb construction method and the corresponding current address path reduces the need for manually obtaining menu content and binding it to breadcrumbs. The method monitors changes in the current address path. When a change is detected, the changed address path is obtained and used as the target address path. This target address path is then input into the breadcrumb constructor to obtain breadcrumbs and re-render them. When breadcrumbs need updating, they can be automatically updated by monitoring changes in the current address path. Furthermore, breadcrumbs generated based on the current address path ensure more accurate positioning. Based on this, the webpage layout processing method proposed in this application reduces repetitive development work and improves development efficiency. Attached Figure Description

[0056] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0057] Figure 1 A flowchart illustrating a front-end layout processing method for a webpage provided in an embodiment of this application;

[0058] Figure 2 A flowchart illustrating a front-end layout processing method for a webpage provided in an embodiment of this application;

[0059] Figure 3 A flowchart illustrating a front-end layout processing method for a webpage provided in an embodiment of this application;

[0060] Figure 4A A flowchart illustrating a front-end layout processing method for a webpage provided in an embodiment of this application;

[0061] Figure 4B A flowchart illustrating a front-end layout processing method for a webpage provided in an embodiment of this application;

[0062] Figure 5 A flowchart illustrating a front-end layout processing method for a webpage provided in an embodiment of this application;

[0063] Figure 6 A flowchart illustrating a front-end layout processing method for a webpage provided in an embodiment of this application;

[0064] Figure 7 A flowchart illustrating another front-end layout processing method for a webpage provided in an embodiment of this application;

[0065] Figure 7A A schematic diagram of the rendering process of the header container provided in an embodiment of this application;

[0066] Figure 7B A schematic diagram of the process for constructing breadcrumbs provided in an embodiment of this application;

[0067] Figure 7C A schematic diagram illustrating the process of monitoring container size changes provided in an embodiment of this application;

[0068] Figure 8 A schematic diagram of the structure of a webpage front-end layout processing device provided in an embodiment of this application;

[0069] Figure 9 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0070] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0071] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0072] In existing technologies, given the similar layouts and functions of web pages across various business systems, component-based web layout has become an important aspect of web page development. This aims to reduce repetitive development work and improve web page development efficiency.

[0073] However, since web pages are currently primarily laid out using the Layout component, the following problems arise: the Layout component lacks features such as breadcrumbs, titles, logos, and size change listeners. If these functionalities are needed, additional components like breadcrumbs, titles, and logos must be imported, and new size change listener methods must be created. Furthermore, when importing the breadcrumb component, the menu content must be located and bound to it. This layout method still involves some repetitive component importing and menu content retrieval and binding with breadcrumbs, resulting in a large workload and low development efficiency.

[0074] Therefore, when existing web page layout components cannot provide certain additional functions, introducing additional components still increases the workload of development and reduces development efficiency.

[0075] To address the aforementioned issues, the inventive concept of this application is to demonstrate how to effectively integrate breadcrumbs into a webpage layout, thereby improving development efficiency based on that layout.

[0076] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.

[0077] Figure 1 This is a flowchart illustrating a front-end layout processing method for a webpage provided in Embodiment 1 of this application. Figure 1 As shown, the method may include:

[0078] S101. Obtain the front-end layout request of the webpage, and obtain the front-end layout container that matches the front-end layout request of the webpage. The matching front-end layout container includes a header container and a pure container, and the header container includes a breadcrumb component.

[0079] In this embodiment, the front-end layout container can be a container with layout capabilities that includes a header container and pure containers. The header container includes breadcrumbs, titles, logos, etc., and the header container and pure containers can be nested to achieve flexible layout. For example, a webpage layout can use the header container and pure containers in the front-end layout container of this application. On this basis, the pure containers can continue to nest header containers or pure containers to achieve flexible webpage layout.

[0080] S102. Obtain the global configuration information and independent configuration information of the matching front-end layout container respectively.

[0081] In this embodiment, global configuration information can refer to global basic data requested and obtained before the entire webpage is loaded. This basic data can be accessed and used in all webpages in this application. Global configuration information facilitates unified management and improves the maintainability and scalability of webpages.

[0082] In addition, independent configuration can refer to specific configuration information, which can meet the development needs of different scenarios or environments.

[0083] S103. Obtain the target configuration information based on the global configuration information and the independent configuration information.

[0084] In this embodiment, the target configuration information may refer to the configuration information obtained by integrating global configuration information and independent configuration information.

[0085] S104. When it is determined that breadcrumbs exist in the target configuration information, determine whether there is a pre-configured breadcrumb construction method corresponding to the breadcrumbs.

[0086] In this embodiment, breadcrumbs refer to navigation elements used to display the current page's position in the navigation hierarchy, helping users quickly locate and browse content. Breadcrumbs can be created using pre-configured breadcrumb constructors, eliminating the need for developers to create them and reducing their workload. Therefore, before creating breadcrumbs, a pre-configured breadcrumb constructor can be found to automatically create them.

[0087] S105. If it is determined that there is a pre-configured breadcrumb constructor method corresponding to the breadcrumb, then obtain the current address path corresponding to the breadcrumb constructor method.

[0088] In this embodiment, for example, the address path information of the current webpage can be obtained through the window.location object. In this case, the address path information of the current webpage is the current address path corresponding to the breadcrumb constructor.

[0089] For example, you can use the window.location.href method under the window.location object to get the complete URL address, which is the address path information of the current webpage.

[0090] S106. Input the current address path as the target address path into the breadcrumb constructor, obtain the breadcrumbs, and perform rendering processing on the breadcrumbs.

[0091] In this embodiment, the current address path is used as the target address path and input into the breadcrumb construction method. Obtaining breadcrumbs can mean passing the target address path as a parameter to the breadcrumb construction method and getting a return value. At this time, the return value is the breadcrumb.

[0092] Based on different return values, different breadcrumbs are rendered. If the breadcrumb constructor returns null, it means that breadcrumbs are not needed. If the breadcrumb constructor returns a string, the returned string is rendered directly. If the breadcrumb constructor returns an array of strings, the value of the `Separator` property in the global configuration information is retrieved to determine the concatenation operator. The values ​​in the string array are then concatenated using the concatenation operator before rendering. If the breadcrumb constructor returns an array of breadcrumb objects, the breadcrumbs are determined and rendered based on the values ​​of the properties in the breadcrumb object array, including `label`, `key`, `linkable`, and `whothSeparator`. `key` represents the unique value of the breadcrumb object, `label` represents the content to be displayed, `linkable` indicates whether the breadcrumb is clickable, and `whothSeparator` indicates whether a separator is used. For example, if the breadcrumb constructor returns an array of breadcrumb objects, the value of the `Separator` property in the global configuration determines the concatenation operator. If the `whithSeparator` property of an element in the breadcrumb array is true, the label values ​​of that element are concatenated using a concatenation operator. If the `whithSeparator` property is false, the label values ​​are not concatenated using a concatenation operator. This process continues until all elements in the breadcrumb array have been traversed to obtain the target string. The value of `linkable` is retrieved; if `linkable` is true, the corresponding style is added. If a click event is executed on this breadcrumb, the callback method corresponding to the breadcrumb's constructor is executed in response to the click event.

[0093] S107. Listen for changes in the current address path, and when the listener determines that the current address path has changed, obtain the changed current address path, and use the changed current address path as the target address path. Input the target address path into the breadcrumb constructor, obtain the breadcrumbs, and re-render.

[0094] In this embodiment, the updating of breadcrumbs is determined by changes in the current address path. By monitoring changes in the current address path, it is determined whether the breadcrumbs should be updated. For example, if a change in the current address path is detected, the changed current address path is obtained, used as the target address path, and input into the breadcrumb constructor to obtain the updated breadcrumbs. The updated breadcrumbs are then rendered, thereby realizing the breadcrumb update operation.

[0095] In this embodiment, the front-end layout request of a webpage is obtained, and a front-end layout container matching the request is obtained. Global and independent configuration information of the matching front-end layout container are then obtained. Based on the global and independent configuration information, target configuration information is obtained. If breadcrumbs exist in the target configuration information, it is determined whether a pre-configured breadcrumb constructor exists. If a pre-configured breadcrumb constructor exists, the current address path corresponding to the breadcrumb constructor is obtained. This current address path is used as the target address path and input into the breadcrumb constructor to obtain breadcrumbs. The breadcrumbs are then rendered. Changes in the current address path are monitored, and when a change is detected, the changed address path is obtained. The current address path is used as the target address path, and the target address path is input into the breadcrumb constructor to obtain breadcrumbs and re-render them. Compared with the technical problem of low development efficiency caused by the inability of existing web page layout methods to reduce development workload, the web page layout method adopted in this application obtains target configuration information through global configuration information and independent configuration information. Based on the target configuration information, the breadcrumbs and breadcrumb constructor method are determined. The current address path is obtained as the target address path, input into the breadcrumb constructor to obtain breadcrumbs, and then the breadcrumbs are rendered. This avoids the operation of obtaining menu content and binding menu content with breadcrumbs, realizes the automatic creation of breadcrumbs based on the web page address path, reduces development workload, and thus improves development efficiency. Furthermore, by monitoring changes in the current address path, and upon detecting a change, obtaining the changed current address path and using it as the target address path, the system inputs this target address path into the breadcrumb constructor to obtain breadcrumbs and re-render them. This flexibly addresses breadcrumb updates and can even create breadcrumbs for web pages not included in the menu, making it clearer for users to locate their current page and improving the user experience.

[0096] Figure 2 This is a flowchart illustrating a front-end layout processing method for a webpage provided in Embodiment 2 of this application. In the above... Figure 1 Based on the illustrated embodiments, as Figure 2 As shown, one specific implementation of step S102 above is as follows:

[0097] Step S201: When it is determined that global configuration is enabled, use all the contents of global configuration as global configuration information.

[0098] Step S202: Determine the enabled independent configuration from multiple independent configurations, and use the contents of each enabled independent configuration as independent configuration information.

[0099] The global configuration includes one or more of the following: header container style, header container class, plain container style, plain container class, breadcrumbs, and size change listener interval.

[0100] The independent configuration includes: breadcrumbs, title, container type, main container style, main container class, child container style, child container class, size change listener interval, size change listener callback, or tag attributes.

[0101] Furthermore, one specific implementation of step S103 above is as follows:

[0102] S203. Use all the contents of the independent configuration information as the target configuration information.

[0103] In this embodiment, the priority of independent configuration information is higher than that of global configuration information. Therefore, all the contents of the independent configuration information are target configuration information.

[0104] S204. Take the content in the global configuration information that has different attributes from the content in the independent configuration information as the target configuration information.

[0105] In this embodiment, if the global configuration information and the independent configuration information contain the same content, the target configuration information adopts the attribute value of the content of the independent configuration information; if the global configuration information contains an attribute that does not exist in the independent configuration information, the target configuration information adopts the attribute value of the global configuration information.

[0106] In this embodiment, the target configuration information is determined by global configuration information and independent configuration information. The corresponding functions in the front-end layout container can be flexibly enabled according to the adjusted configuration information. Compared with the existing technology of using layout components for web page layout, other functions can be achieved without reintroducing additional components, resulting in less development work and higher development efficiency.

[0107] Figure 3 This is a flowchart illustrating a front-end layout processing method for a webpage provided in Embodiment 3 of this application. Figure 1 or Figure 2 Based on the illustrated embodiments, as Figure 3 As shown, after step 103 above, the layout processing method for this webpage further includes:

[0108] S301. When it is determined that the header container is enabled based on the target configuration information, and it is determined that there is a title or logo in the target configuration information, the corresponding content in the header container is enabled, and the header container and the plain container are rendered.

[0109] In this embodiment, the header container is enabled according to the target configuration information. The header container also includes a title and a logo. The target configuration information is used to determine whether to enable the title or the logo. After the header container configuration is determined, the header container and the plain container are rendered.

[0110] For example, Figures 4A to 4B These are schematic flowcharts illustrating a webpage front-end layout processing method provided in Embodiment 4 of this application. Figure 3 Based on the illustrated embodiments, as Figure 4A As shown, one specific implementation of S301 above is as follows:

[0111] S401a. When determining to enable the header container based on the target configuration information, determine whether the target configuration information contains a Logo.

[0112] S402a. If it is determined that a Logo exists in the target configuration information, determine whether to disable the Logo.

[0113] S403a. If it is determined that the Logo should not be disabled, render the Logo.

[0114] In this embodiment, for example, if it is determined that the header container is enabled but the Logo does not exist, the Logo rendering operation is not performed. If it is determined that the header container is enabled and the Logo exists, and the Logo is not disabled, the Logo rendering operation is performed. If it is determined that the header container is enabled and the Logo exists, but the Logo is disabled, the Logo rendering operation is not performed.

[0115] Or, such as Figure 4B As shown, another specific implementation of S301 above is as follows:

[0116] S401b: When determining to enable the header container based on the target configuration information, determine whether a header exists in the target configuration information.

[0117] S402b: If a title is found in the target configuration information, render the title.

[0118] In this embodiment, for example, if it is determined that the header container is enabled but there is no title, the title rendering operation is not performed; if it is determined that the header container is enabled and there is a title, the title rendering operation is performed.

[0119] In this embodiment, the presence of a title or logo in the header container is confirmed through target configuration information to determine whether rendering is performed, reducing the need for repeated writing of the title or logo. Furthermore, for the logo, a disable configuration option is added, allowing the logo to be selectively rendered on different pages, thus meeting the actual needs of users.

[0120] Figure 5 This is a flowchart illustrating a front-end layout processing method for a webpage provided in Embodiment 5 of this application. Figure 1 or Figure 2 Based on the illustrated embodiments, as Figure 5 As shown, the layout processing method for this webpage also includes:

[0121] S501. When it is determined that the header container is not enabled based on the target configuration information, or after the header container has been rendered, the pure containers in the matching front-end layout container are rendered, and it is determined whether there is a size change listener callback in the target configuration information. If it is determined to exist, then proceed to step S502; if it is determined not to exist, then proceed to step S503.

[0122] S502, Render containers that can listen for size changes, End.

[0123] S503: Rendering containers that cannot listen to size changes.

[0124] In this embodiment, if it is determined that there is a size change listening callback in the target configuration information, then rendering a container that can listen to size changes can mean that the size of the rendered container is the changed size. If it is determined that there is no size change listening callback in the target configuration information, then rendering a container that cannot listen to size changes can mean that the size of the rendered container is the same as the original size.

[0125] Figure 6 This is a flowchart illustrating a webpage front-end layout processing method provided in Embodiment Six of this application. In the above... Figure 5 Based on the illustrated embodiments, as Figure 6 As shown, prior to S502 above, the method may further include:

[0126] S601a. ​​Obtain the environment information of the browser on which the matching front-end layout container is based.

[0127] S602a. Based on the environment information, determine whether the browser supports the listening interface. If the browser supports the listening interface, proceed to step S603a; if the browser does not support the listening interface, proceed to step S601b.

[0128] S603a: Create a collection of key-value pairs for the corresponding callbacks of each document object model within the browser, as well as a listener interface instance.

[0129] S604a. Listen to the document object model based on the listening interface instance. If the size of the document object model changes, call the key-value pair collection of the callback corresponding to the document object model, and then end.

[0130] In this embodiment, the listening interface can refer to ResizeObserver. Whether a browser supports ResizeObserver can be determined by JavaScript features or by obtaining the ResizeObserver documentation to check the support status of each browser.

[0131] S601b If it is determined that the browser does not support the listener interface, then create an embedded object element with the same size as the document object model.

[0132] S602b, Determine the attributes of the document object model and the embedded object element so that the size of the embedded object element remains consistent with the document object model and can follow changes.

[0133] S603b. Create a blank page based on the embedded object element.

[0134] S604b: Access the blank page based on the attributes in the embedded object element, and register a listener event on the blank page to listen for changes in the size of the blank page.

[0135] S605b: If the size of the blank page changes, the size of the document object model will change.

[0136] In this embodiment, to address the issue of browsers not supporting listening interfaces, a proposed solution is to create an embedded object element with the same size as the document object model, create a blank page based on the embedded object element, and monitor the size of the blank page. By associating the document object model with the embedded object element, the problem of not being able to monitor the size of the document object model is solved.

[0137] In this embodiment, the container size monitoring method described above effectively monitors changes in the container size of web pages in different browsers, thereby rendering the container with the changed size in a timely manner.

[0138] Figure 7 A flowchart illustrating another webpage front-end layout processing method provided in this application embodiment is shown below. Figure 7 As shown, the layout processing methods for this webpage include:

[0139] S701. Obtain global and independent configurations. The global configuration includes one or more of the following: header container style, header container class, plain container style, plain container class, breadcrumbs, and size change listener interval. The independent configuration includes: breadcrumbs, title, container type, main container style, main container class, child container style, child container class, size change listener interval, size change listener callback, or tag attributes.

[0140] In this embodiment, the global configuration can be adjusted using the container's built-in setConfig method, and the container types in the independent configuration include: header container and pure container.

[0141] S702 integrates global and independent configurations to obtain the final configuration.

[0142] In this embodiment, the final configuration may refer to the configuration content of the currently rendered container. The final configuration is formed by integrating the global configuration and the independent configuration. Since the independent configuration has a higher priority than the global configuration, for attributes that are the same in the global configuration and the independent configuration, the attributes in the independent configuration are used, and for attributes that are not configured in the independent configuration, the attributes in the global configuration are used.

[0143] S703. Based on the final configuration, confirm whether the web page layout container is a pure container.

[0144] In this embodiment, confirming whether the web page layout container is a pure container can be done by checking whether the header container is enabled in the final configuration. If the header container is enabled, the web page layout container is not a pure container; if the header container is not enabled, the web page layout container is a pure container.

[0145] S704. If it is determined that the webpage layout container is not a pure container, then based on the final configuration, confirm whether there is a title or logo in the header container or whether breadcrumbs are enabled.

[0146] In this embodiment, the header container contains a Header, which integrates the Logo, breadcrumbs, title, and custom function area. The development of the Logo, breadcrumbs, and title can be completed quickly through the Header, and highly customized functions can also be developed.

[0147] The global configuration of the Header includes one or more of the following: breadcrumbs, Header style, Header class, breadcrumb separator (default is " / "), breadcrumb class, clickable breadcrumb class, current breadcrumb class, size change listener callback, and Logo configuration.

[0148] The independent configuration of the Header includes: breadcrumbs, Header style, Header class, size change listener interval, size change listener callback, Logo configuration, and disabling the Logo.

[0149] In addition, the Header provides a registeredBreadcrumbs method to register the breadcrumb constructor and click callback.

[0150] S705. If a title or logo is confirmed to exist or breadcrumbs are confirmed to be enabled, then render the header container.

[0151] In this embodiment, as Figure 7A As shown, if a title or logo is confirmed to exist or breadcrumbs are confirmed to be enabled, the corresponding component is rendered to complete the rendering of the header container. If the current path changes, the breadcrumbs are updated and the header container is rendered again.

[0152] In addition, such as Figure 7B As shown, after confirming that breadcrumbs are enabled, the breadcrumbs are obtained by retrieving the constructor and the current path address from the `registeredBreadcrumbs` method. The constructor returns one of the following: a null value, a string, an array of strings, or an array of breadcrumb objects.

[0153] If the constructor returns an empty value, it means that breadcrumbs are not needed at this time.

[0154] If the constructor returns a string, then that string is rendered directly.

[0155] If the constructor returns a string array, the breadcrumb separator in the global Header configuration is used to concatenate the items in the string array. By default, no breadcrumb separator is appended to the last item in the array.

[0156] If the constructor returns an array of breadcrumb objects, then the values ​​of the key, label, linkable, and whithSeparator properties in the breadcrumbs are determined. Here, key represents the unique value of the breadcrumb object, label represents the content displayed in the breadcrumb, and both key and label are required. Linkable indicates whether the breadcrumb is clickable, and whithSeparator indicates whether the breadcrumb uses a separator; both linkable and whithSeparator are optional.

[0157] Additionally, if the linkable value of the breadcrumb object array is true, the clickable style of the breadcrumbs will be rendered when rendering the breadcrumbs. Clicking a breadcrumb will call the breadcrumb click callback in the registeredBreadcrumbs method, which will jump to the location of the clicked breadcrumb.

[0158] The default value of `whithSeparator` for elements in the breadcrumb object array is true. When `whithSeparator` is true, the element's label is extracted, and the element's label is concatenated using the breadcrumb separator configured globally in the Header. By default, no concatenation operator is appended to the label of the last element in the breadcrumb object array. When `whithSeparator` is false, it indicates that no concatenation operator is needed for the label of elements in the breadcrumb object array.

[0159] S706. If it is confirmed that the webpage layout container is a pure container or the header container has been rendered, render the pure container.

[0160] S707. Based on the final configuration, confirm whether there are any configuration changes in size.

[0161] S708. If a size change configuration exists, the container that can listen for size changes will be rendered.

[0162] In this embodiment, as Figure 7C As shown, it determines whether the browser supports the listening interface. If the browser supports the listening interface, it creates a collection of callback key-value pairs and a listening interface instance for each document object model. It uses the listening interface instance to listen to the corresponding document object model. When the size of the document object model changes, it retrieves the callback method from the key-value pair collection and calls the callback method.

[0163] If the browser does not support the listener interface, the document object model's `position` style is set to `relative`, and an embedded object element is created. The embedded object element's `position` style is set to `absolute`, and its `inset` style is set to 0, ensuring the embedded object element's size matches the corresponding document object model and can resize accordingly. Furthermore, the embedded object element's `type` attribute is set to `text / html`, and its `data` attribute to `about:blank`, causing the embedded object element to create a blank page with the same size as the embedded object element. The blank page is accessed through the `contentWindow` property of the embedded object element, and an `onresize` event is registered on this blank page to listen for size changes. This association enables the listening of document object model size changes.

[0164] S709. If no size change configuration exists, the rendering cannot listen to container size changes.

[0165] In this embodiment, if there is no size change configuration, the size of the rendered container is the same as the original container size.

[0166] Figure 8This is a schematic diagram of the structure of a webpage front-end layout processing device provided in an embodiment of this application. Figure 8 As shown, the front-end layout processing device 80 of this webpage includes: an acquisition module 801, a determination module 802, a rendering module 803, and a listening module 804. Wherein:

[0167] The acquisition module 801 is used to acquire the front-end layout request of the webpage, and acquire the front-end layout container that matches the front-end layout request of the webpage. The matching front-end layout container includes a header container and a pure container, and the header container includes a breadcrumb component. The global configuration information and independent configuration information of the matching front-end layout container are acquired respectively. The target configuration information is acquired based on the global configuration information and the independent configuration information.

[0168] The determination module 802 is used to determine whether there is a pre-configured breadcrumb construction method corresponding to the breadcrumbs when breadcrumbs are found in the target configuration information; if it is determined that there is a pre-configured breadcrumb construction method corresponding to the breadcrumbs, the current address path corresponding to the breadcrumb construction method is obtained.

[0169] The rendering module 803 is used to take the current address path as the target address path, input it into the breadcrumb constructor, obtain breadcrumbs, and perform rendering processing on the breadcrumbs.

[0170] The listening module 804 is used to listen for changes in the current address path. When the listening module determines that the current address path has changed, it obtains the changed current address path and uses the changed current address path as the target address path. The target address path is then input into the breadcrumb constructor to obtain breadcrumbs and re-render them.

[0171] In this embodiment of the application, the acquisition module 801 can also be specifically used for:

[0172] Use all the contents of the independent configuration information as the target configuration information;

[0173] Content in the global configuration information that has attributes different from those in the independent configuration information will be used as the target configuration information.

[0174] In this embodiment of the application, the determining module 802 can also be specifically used for:

[0175] When it is determined that global configuration is enabled, all contents in the global configuration will be used as global configuration information;

[0176] From multiple independent configurations, determine the enabled independent configurations and use the contents of each enabled independent configuration as independent configuration information.

[0177] In this embodiment of the application, the rendering module 803 can also be specifically used for:

[0178] If the target configuration information determines that the header container is enabled, and if the target configuration information contains a title or logo, the corresponding content in the header container is enabled, and the header container and the plain container are rendered.

[0179] In this embodiment of the application, the rendering module 803 can also be specifically used for:

[0180] When determining to enable the header container based on the target configuration information, determine whether the logo exists in the target configuration information;

[0181] If a Logo is found in the target configuration information, determine whether to disable the Logo.

[0182] Render the logo if you determine that you do not disable the logo.

[0183] In this embodiment of the application, the rendering module 803 can also be specifically used for:

[0184] When determining to enable the header container based on the target configuration information, determine whether a header exists in the target configuration information;

[0185] If a title is found in the target configuration information, render the title.

[0186] In this embodiment of the application, the rendering module 803 can also be specifically used for:

[0187] Render the pure containers in the front-end layout container and determine whether there is a size change listener callback in the target configuration information;

[0188] If it is confirmed that the container exists, then render the container that can listen for size changes;

[0189] If it is determined that the container does not exist, then the rendering cannot listen for changes in size of the container.

[0190] In this embodiment of the application, the monitoring module 804 can also be specifically used for:

[0191] Get the environment information of the browser on which the matching front-end layout container is based;

[0192] Based on the environment information, determine whether the browser supports listening to the interface;

[0193] If it is determined that the browser supports the listener interface, then create a collection of key-value pairs for the corresponding callbacks for each document object model within the browser, as well as an instance of the listener interface;

[0194] The listener monitors the document object model based on the listener interface instance. If the size of the document object model changes, the key-value pair collection of the callback corresponding to the document object model is invoked.

[0195] In this embodiment of the application, the monitoring module 804 can also be specifically used for:

[0196] If it is determined that the browser does not support the listener interface, then create an embedded object element that is the same size as the document object model;

[0197] Determine the properties of the document object model and the embedded object elements so that the size of the embedded object elements remains consistent with the document object model and can change accordingly;

[0198] Create a blank page based on the embedded object element;

[0199] Access the blank page based on the attributes in the embedded object element, and register a listener event on the blank page to listen for changes in the size of the blank page;

[0200] If the size of the blank page changes, then the size of the document object model will change.

[0201] Figure 9 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Figure 9 As shown, the electronic device 90 includes:

[0202] The electronic device 90 may include a processor 901 with one or more processing cores, a memory 902 with one or more computer-readable storage media, a communication component 903, and other components. The processor 901, memory 902, and communication component 903 are connected via a bus 904.

[0203] In the specific implementation process, at least one processor 901 executes computer execution instructions stored in memory 902, causing at least one processor 901 to perform the resource planning processing method described above.

[0204] The specific implementation process of processor 901 can be found in the above method embodiments, and its implementation principle and technical effect are similar. It will not be repeated here.

[0205] In the above Figure 9In the illustrated embodiments, it should be understood that the processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this invention can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor.

[0206] The memory may include random access memory (RAM) and may also include non-volatile memory (NVM), such as at least one disk storage device.

[0207] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.

[0208] In some embodiments, a computer program product is also provided, including a computer program or instructions that, when executed by a processor, implement the steps in any of the above-described webpage front-end layout processing methods.

[0209] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0210] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this application are indicated by the following claims.

Claims

1. A method for front-end layout processing of a webpage, characterized in that, include: Obtain the front-end layout request of the webpage, and obtain the front-end layout container that matches the front-end layout request of the webpage; wherein the matching front-end layout container includes a header container and a pure container, and the header container includes a breadcrumb component. Obtain the global configuration information and independent configuration information of the matched front-end layout container respectively; Based on the global configuration information and the independent configuration information, obtain the target configuration information; When it is determined that breadcrumbs exist in the target configuration information, it is determined whether there is a pre-configured breadcrumb construction method corresponding to the breadcrumbs; If it is determined that there is a pre-configured breadcrumb construction method corresponding to the breadcrumb, then obtain the current address path corresponding to the breadcrumb construction method; The current address path is used as the target address path and input into the breadcrumb construction method to obtain breadcrumbs, and the breadcrumbs are rendered. The system monitors changes in the current address path, and when a change is detected, it obtains the changed current address path and uses it as the target address path. The target address path is then input into the breadcrumb construction method to obtain the breadcrumbs and re-render them.

2. The front-end layout processing method for web pages according to claim 1, characterized in that, The step of obtaining the global configuration information and independent configuration information of the matched front-end layout container includes: When it is determined that global configuration is enabled, all contents in the global configuration will be used as the global configuration information. From multiple independent configurations, determine the enabled independent configurations, and use the contents of each enabled independent configuration as the independent configuration information; The global configuration includes one or more of the following: header container style, header container class, pure container style, pure container class, breadcrumbs, and size change listener interval. The independent configuration includes: breadcrumbs, title, container type, main container style, main container class, child container style, child container class, size change listener interval, size change listener callback, or tag attributes.

3. The front-end layout processing method for web pages according to claim 1, characterized in that, The step of obtaining the target configuration information based on the global configuration information and the independent configuration information includes: Use all the contents of the independent configuration information as the target configuration information; The content in the global configuration information that has attributes different from those in the independent configuration information is taken as the target configuration information.

4. The front-end layout processing method for web pages according to claim 1, characterized in that, After obtaining the target configuration information based on the global configuration information and the independent configuration information, the method further includes: When it is determined that the header container is enabled based on the target configuration information, and it is determined that there is a title or logo in the target configuration information, the corresponding content in the header container is enabled, and the header container and the plain container are rendered.

5. The front-end layout processing method for web pages according to claim 4, characterized in that, When determining to enable the header container based on the target configuration information, and determining that the target configuration information contains a title or logo, enabling the corresponding content in the header container, and rendering the header container and the plain container, includes: When determining to enable the header container based on the target configuration information, determine whether a Logo exists in the target configuration information; If a Logo is found in the target configuration information, determine whether to disable the Logo; Render the logo if you determine that you do not disable the logo.

6. The front-end layout processing method for web pages according to claim 4, characterized in that, Also includes: When determining to enable the header container based on the target configuration information, it is determined whether a title exists in the target configuration information; When it is determined that a title exists in the target configuration information, the title is rendered.

7. The front-end layout processing method for web pages according to claim 1, characterized in that, After obtaining the target configuration information based on the global configuration information and the independent configuration information, the method further includes: When it is determined that the header container is not enabled based on the target configuration information, or after the header container has been rendered, the pure container in the matched front-end layout container is rendered, and it is determined whether there is a size change listener callback in the target configuration information. If it is confirmed that the container exists, then render the container that can listen for size changes; If it is determined that the container does not exist, then the rendering cannot listen for changes in size of the container.

8. The front-end layout processing method for web pages according to claim 7, characterized in that, If it is determined that such a container exists, and before the rendering of the container capable of listening to size changes, the method further includes: Obtain the environment information of the browser on which the matched front-end layout container is based; Based on the environmental information, determine whether the browser supports the listening interface; If it is determined that the browser supports the listening interface, then create a set of key-value pairs for the corresponding callbacks of each document object model in the browser, as well as an instance of the listening interface; The listener monitors the document object model according to the listener interface instance. If the size of the document object model changes, the key-value pair set of the callback corresponding to the document object model is invoked.

9. The front-end layout processing method for web pages according to claim 8, characterized in that, After determining whether the browser supports the listening interface based on the environment information, the method further includes: If it is determined that the browser does not support the listening interface, then create an embedded object element with the same size as the document object model; Determine the attributes of the document object model and the embedded object element so that the size of the embedded object element remains consistent with the document object model and can follow changes; Create a blank page based on the embedded object element; Access the blank page based on the attributes in the embedded object element, and register a listener event on the blank page to listen for changes in the size of the blank page; If the size of the blank page changes, it indicates that the size of the document object model has changed.

10. A front-end layout processing device for web pages, characterized in that, include: The acquisition module is used to acquire the front-end layout request of a webpage, and acquire the front-end layout container that matches the front-end layout request of the webpage; wherein the matching front-end layout container includes a header container and a pure container, and the header container includes a breadcrumb component; acquire the global configuration information and independent configuration information of the matching front-end layout container respectively; and acquire the target configuration information based on the global configuration information and independent configuration information. The determination module is used to determine whether there is a pre-configured breadcrumb construction method corresponding to the breadcrumbs when it is determined that breadcrumbs exist in the target configuration information; if it is determined that there is a pre-configured breadcrumb construction method corresponding to the breadcrumbs, then the current address path corresponding to the breadcrumb construction method is obtained. The rendering module is used to input the current address path as the target address path into the breadcrumb construction method, obtain breadcrumbs, and perform rendering processing on the breadcrumbs; The monitoring module is used to monitor changes in the current address path, and when the monitoring determines that the current address path has changed, it obtains the changed current address path and uses the changed current address path as the target address path. The target address path is then input into the breadcrumb construction method to obtain the breadcrumbs and re-render them.

11. An electronic device, characterized in that, include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory to implement the method as described in any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1 to 9.

Images