CN117492890A

CN117492890A - Front-end layout processing method, device and equipment for web pages and storage medium

Info

Publication number: CN117492890A
Application number: CN202311437706.XA
Authority: CN
Inventors: 王衒
Original assignee: China United Network Communications Group Co Ltd; Unicom Digital Technology Co Ltd; Unicom Cloud Data Co Ltd
Current assignee: China United Network Communications Group Co Ltd; Unicom Digital Technology Co Ltd; Unicom Cloud Data Co Ltd
Priority date: 2023-10-31
Filing date: 2023-10-31
Publication date: 2024-02-02

Abstract

The application provides a front-end layout processing method, device and equipment for a webpage and a storage medium, wherein the method comprises the following steps: obtaining target configuration information according to the obtained global configuration information and independent configuration information of the front-end layout container; on the premise that breadcrumbs exist in the target configuration information, determining a pre-configured breadcrumbs construction method corresponding to the breadcrumbs, and acquiring a current address path corresponding to the breadcrumbs construction method; inputting the current address path as a target address path into a breadcrumb construction method, obtaining breadcrumbs, and rendering the breadcrumbs; monitoring the change condition of the current address path, if the current address path is determined to be changed, acquiring the changed current address path, taking the changed current address path as a target address path, inputting the target address path into a breadcrumb construction method, acquiring breadcrumbs and re-rendering. The method reduces the development workload and improves the development efficiency.

Description

Front-end layout processing method, device and equipment for web pages and storage medium

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a storage medium for processing a front-end layout of a web page.

Background

With the popularization of paperless office, cloud computing, cloud service and other technologies, various business systems such as business management, big data, sass, pass and the like are endless. Although, the layout of these business systems for the body content area of a web page is substantially the same size and functions quite similarly. However, since each service system needs to be developed independently, basically each service system needs to be repeatedly operated for similar contents of each service system, resulting in a large workload to some extent.

Based on this, in order to solve the problem of large workload, a Layout component of Layout may be mainly adopted in the prior art to implement Layout of the main content area of the web page of each service system. Specifically, the Layout component defines a page overall framework including Header, content, footer, sider, supporting flexible nesting. However, the existing Layout components lack breadcrumbs and the like, and therefore, additional breadcrumbs components and the like need to be introduced. And, when introducing breadcrumb components, binding with menu content is also required.

Therefore, although the workload of each service system is reduced to a certain extent, the workload of development is increased due to repeated operations of introducing components and searching menu content for binding, so that the development efficiency is low.

Disclosure of Invention

The application provides a front-end layout processing method, device and equipment of a webpage and a storage medium, which are used for solving the technical problem of low development efficiency.

In a first aspect, the present application provides a method for processing a front-end layout of a web page, including:

acquiring a front-end layout request of a webpage, and acquiring a front-end layout container matched with the front-end layout request of the webpage according to the front-end layout request of the webpage; the matched front-end layout container comprises a head container and a pure container, wherein the head container comprises a breadcrumbs component;

global configuration information and independent configuration information of the matched front-end layout container are respectively obtained;

acquiring target configuration information according to the global configuration information and the independent configuration information;

when determining that breadcrumbs exist in the target configuration information, determining whether a pre-configured breadcrumbs construction method corresponding to the breadcrumbs exists;

if the pre-configured breadcrumb construction method corresponding to the breadcrumb exists, acquiring a current address path corresponding to the breadcrumb construction method;

Inputting the current address path as a target address path into a breadcrumb construction method, obtaining breadcrumbs, and rendering the breadcrumbs;

monitoring the change condition of the current address path, acquiring the changed current address path when the change of the current address path is monitored, taking the changed current address path as a target address path, inputting the target address path into a breadcrumb construction method, acquiring breadcrumbs and re-performing rendering processing.

Optionally, the method above respectively obtains global configuration information and independent configuration information of the matched front-end layout container, including:

when the global configuration is determined to be started, taking all contents in the global configuration as global configuration information;

determining enabled independent configurations from the plurality of independent configurations, and taking the content in each enabled independent configuration as independent configuration information;

wherein, the whole content in the global configuration comprises one or more of the following: head container style, head container class, pure container style, pure container class, breadcrumbs, and size change listening intervals;

the content in the independent configuration includes: breadcrumbs, titles, container types, master container styles, master container clips, child container styles, child container clips, change-of-size listening intervals, change-of-size listening callbacks, or tag attributes.

Optionally, the method above, according to the global configuration information and the independent configuration information, obtains the target configuration information, including:

taking all the contents in the independent configuration information as target configuration information;

and taking the content, which is different from the content of the independent configuration information in the global configuration information, as target configuration information.

Optionally, in the method above, after obtaining the target configuration information according to the global configuration information and the independent configuration information, the method further includes:

and when the enabling head container is determined based on the target configuration information and the title or Logo exists in the target configuration information, enabling corresponding content in the head container and rendering the head container and the pure container.

Optionally, the method above, when determining that the header container is enabled based on the target configuration information, and determining that a title or Logo exists in the target configuration information, enabling corresponding content in the header container, and rendering the header container and the pure container, includes:

determining whether Logo exists in the target configuration information when the head container is determined to be enabled based on the target configuration information;

determining whether to disable Logo when determining that Logo exists in the target configuration information;

and rendering the Logo when determining that the Logo is not disabled.

Optionally, the method as above further comprises:

determining whether a header exists in the target configuration information when the header container is determined to be enabled based on the target configuration information;

and rendering the title when the title exists in the target configuration information.

when the head container is determined not to be started or the rendering of the head container is completed based on the target configuration information, rendering processing is carried out on the pure container in the matched front-end layout container, and whether a size change monitoring callback exists in the target configuration information is determined;

if yes, rendering a container capable of monitoring the size change;

if it is determined that there is no, rendering cannot monitor the container for the change in size.

Optionally, the method as above, if it is determined that there is a container, and before rendering the container capable of listening to the size change, the method further comprises:

acquiring environment information of a browser based on the matched front-end layout container;

determining whether the browser supports a monitoring interface according to the environment information;

if the browser is determined to support the monitoring interface, a key value pair set of a corresponding callback of each document object model in the browser and a monitoring interface instance are created;

And monitoring the document object model according to the monitoring interface instance, and calling a callback key value pair set corresponding to the document object model if the size of the document object model changes.

Optionally, in the method above, after determining whether the browser supports the listening interface according to the environment information, the method further includes:

if the browser is determined not to support the monitoring interface, an embedded object element with the same size as the document object model is created;

determining the attributes of the document object model and the embedded object elements so that the size of the embedded object elements is kept consistent with the document object model and can follow the change;

creating a blank page according to the embedded object element;

accessing a blank page according to the attribute embedded in the object element, and registering a monitoring event on the blank page to monitor the size change condition of the blank page;

if the size of the blank page changes, the size of the document object model changes.

In a second aspect, the present application provides a front-end layout processing device for a web page, including:

the acquisition module is used for acquiring a front-end layout request of the webpage and acquiring a front-end layout container matched with the front-end layout request of the webpage according to the front-end layout request of the webpage; the matched front-end layout container comprises a head container and a pure container, wherein the head container comprises a breadcrumbs component; global configuration information and independent configuration information of the matched front-end layout container are respectively obtained; acquiring target configuration information according to the global configuration information and the independent configuration information;

A determining module, configured to determine whether a pre-configured breadcrumb construction method corresponding to breadcrumbs exists when determining that breadcrumbs exist in the target configuration information; if the pre-configured breadcrumb construction method corresponding to the breadcrumb exists, acquiring a current address path corresponding to the breadcrumb construction method;

the rendering module is used for taking the current address path as a target address path, inputting the current address path into a breadcrumb construction method, obtaining breadcrumbs, and rendering the breadcrumbs;

the monitoring module is used for monitoring the change condition of the current address path, acquiring the changed current address path when the current address path is monitored to be changed, taking the changed current address path as a target address path, inputting the target address path into a breadcrumb construction method, acquiring breadcrumbs and re-performing rendering processing.

In a third aspect, the present application contemplates an electronic device comprising a processor, and a memory communicatively coupled to the processor;

the memory stores computer-executable instructions;

the processor executes the computer-executable instructions stored in the memory to implement the methods as described herein.

In a fourth aspect, the present application proposes a computer readable storage medium having stored therein computer executable instructions for implementing a method as the present application when executed by a processor.

The method comprises the steps of obtaining a front-end layout request of a webpage, and obtaining a front-end layout container matched with the front-end layout request of the webpage according to the front-end layout request of the webpage; global configuration information and independent configuration information of the matched front-end layout container are respectively obtained; and acquiring target configuration information according to the global configuration information and the independent configuration information. The target configuration information is acquired through the global configuration information and the independent configuration information, so that different requirements of different webpages are flexibly met, and the step of implementing layout specifically for each webpage is reduced. When determining that breadcrumbs exist in the target configuration information, determining whether a pre-configured breadcrumbs construction method corresponding to the breadcrumbs exists; if the pre-configured breadcrumb construction method corresponding to the breadcrumb exists, acquiring a current address path corresponding to the breadcrumb construction method; and taking the current address path as a target address path, inputting the target address path into a breadcrumb structure method, obtaining breadcrumbs, and rendering the breadcrumbs. The breadcrumbs are constructed through the breadcrumbs construction method and the corresponding current address path, so that manual acquisition of menu contents is reduced, and the menu contents and the breadcrumbs are bound. Monitoring the change condition of the current address path, acquiring the changed current address path when the change of the current address path is monitored and determined, taking the changed current address path as a target address path, inputting the target address path into a breadcrumb constructing method, acquiring breadcrumbs, and re-rendering, wherein when the breadcrumbs need to be updated, the breadcrumbs can be automatically updated by monitoring the change condition of the current address path, and the current positioning is more accurate according to the breadcrumbs generated by the current address path. Based on the method, the layout processing method of the webpage reduces the repeated development workload and improves the development efficiency.

Drawings

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

Fig. 1 is a flow chart of a front-end layout processing method of a web page according to an embodiment of the present application;

fig. 2 is a flow chart of a front-end layout processing method of a web page according to an embodiment of the present application;

fig. 3 is a flow chart of a front-end layout processing method of a web page according to an embodiment of the present application;

fig. 4A is a flowchart illustrating a front-end layout processing method of a web page according to an embodiment of the present application;

fig. 4B is a flowchart illustrating a front-end layout processing method of a web page according to an embodiment of the present application;

fig. 5 is a flowchart of a front-end layout processing method of a web page according to an embodiment of the present application;

fig. 6 is a flowchart of a front-end layout processing method of a web page according to an embodiment of the present application;

fig. 7 is a flowchart illustrating another method for processing a front-end layout of a web page according to an embodiment of the present application;

FIG. 7A is a schematic diagram of a rendering flow of a header container according to an embodiment of the present disclosure;

fig. 7B is a schematic flow chart of a breading construction provided in an embodiment of the application;

Fig. 7C is a schematic flow chart of monitoring a container size change according to an embodiment of the present application;

fig. 8 is a schematic structural diagram of a front-end layout processing device for a web page according to an embodiment of the present application;

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

Specific embodiments thereof have been shown by way of example in the drawings and will herein be described in more detail. These drawings and the written description are not intended to limit the scope of the inventive concepts in any way, but to illustrate the concepts of the present application to those skilled in the art by reference to specific embodiments.

Detailed Description

Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples are not representative of all implementations consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with some aspects of the present application as detailed in the accompanying claims.

In the prior art, aiming at the phenomena of different webpage layout sizes and similar functions of various service systems, the net cloth layout is assembled into important content in webpage development work, so that the repetition of the development work is reduced, and the webpage development work efficiency is improved.

However, since the web page is mainly laid out through the Layout components, the following problems occur: the Layout component lacks content such as breadcrumbs, titles, logo, size change listens, etc., and if these functions are needed, it is necessary to additionally introduce components such as breadcrumbs, titles, logo, etc., and newly create a size change listening method. And when introducing the breadcrumb component, it is also necessary to find the menu content and bind it. The layout mode still has the work of repeatedly introducing components and the operation of searching menu contents and binding the menu contents with breadcrumbs, so that the development workload is large, and the development efficiency is low.

Based on this, on the premise that the existing web page layout component cannot provide some other functions, by additionally introducing other components, the development workload is still increased, so that the development efficiency is reduced.

In order to solve the above problems, the inventive concept of the present application is: how to effectively integrate breadcrumbs in a web page layout to improve development efficiency based on the web page layout.

The following describes the technical solutions of the present application and how the technical solutions of the present application solve the above technical problems in detail with specific embodiments. The following embodiments may be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments. Embodiments of the present application will be described below with reference to the accompanying drawings.

Fig. 1 is a flowchart of a front-end layout processing method for a web page according to an embodiment of the present application. As shown in fig. 1, the method may include:

s101, acquiring a front-end layout request of a webpage, and acquiring a front-end layout container matched with the front-end layout request of the webpage according to the front-end layout request of the webpage, wherein the matched front-end layout container comprises a head container and a pure container, and the head container comprises a breadcrumbs component.

In this embodiment, the front-end layout container may be a container with layout capability, including a head container and a pure container, where the head container includes breadcrumbs, titles, logo, and the like, and the head container and the pure container may be nested with each other, so as to implement flexible layout. For example, the head container and the pure container in the front-end layout container in the application can be used in the web page layout, and on the basis, the head container or the pure container can be continuously nested in the pure container, so that the flexible layout of the web page is realized.

S102, global configuration information and independent configuration information of the matched front-end layout container are respectively obtained.

In this embodiment, the global configuration information may refer to global basic data that is requested to be acquired before the whole web page is loaded, where the basic data may be accessed and used in all web pages in the application, so that the global configuration information is convenient for unified management, and maintainability and expansibility of the web pages are improved.

In addition, independent configuration may refer to specific configuration information by which development work for different scenarios or different environments may be satisfied.

S103, acquiring target configuration information according to the global configuration information and the independent configuration information.

In this embodiment, the target configuration information may refer to configuration information obtained by integrating global configuration information with independent configuration information.

S104, when determining that breadcrumbs exist in the target configuration information, determining whether a pre-configured breadcrumbs construction method corresponding to the breadcrumbs exists.

In this embodiment, the breadcrumbs may refer to navigation elements for displaying the position of the current page in the navigation hierarchy, which is helpful for the user to quickly locate and browse the content, where the breadcrumbs may be created by a preconfigured breadcrumbs construction method, so that the step of creating the breadcrumbs by the developer is omitted, and the workload of the developer is reduced. Based on this, a preconfigured breadcrumb construction method corresponding to breadcrumbs may be searched for before breadcrumbs are created to complete automatic creation of breadcrumbs.

S105, if it is determined that there is a pre-configured breadcrumb structure method corresponding to the breadcrumb, acquiring a current address path corresponding to the breadcrumb structure method.

In this embodiment, for example, the address path information of the current web page may be obtained through a window object, where the address path information of the current web page is the current address path corresponding to the breadcrumb structure method.

For example, a window location method under a window location object may be used to obtain a complete URL address, where the URL address is address path information of the current web page.

S106, taking the current address path as a target address path, inputting the current address path into a breadcrumb structure method, obtaining breadcrumbs, and rendering the breadcrumbs.

In this embodiment, the current address path is used as a target address path and is input to the breadcrumb structure method, and obtaining breadcrumbs may refer to taking the target address path as a parameter and inputting the target address path into the breadcrumb structure method to obtain a return value, where the return value is the breadcrumbs.

According to different types of return values, different breadcrumbs are rendered, and if the return value of the breadcrumbs constructing method is a null value, the condition that the breadcrumbs are not needed currently is indicated; if the returned value of the breadcrumb construction method is a character string, directly rendering the returned character string; if the returned value of the breadcrumbs construction method is a character string array, acquiring a value of a Separator attribute in the global configuration information, determining a connection symbol, and rendering after connecting each value in the character string array through the connection symbol; if the returned value of the breadcrumb construction method is the breadcrumb object array, determining breadcrumbs according to the values of the attributes in the breadcrumb object array and rendering, wherein the attributes in the breadcrumb object array comprise label, key, linkable, whithSeparator. Wherein key characterizes the unique value of the breadcrumb object, label characterizes the breadcrumb display, linkable characterizes whether the breadcrumb is clickable, and whish separator characterizes whether the breadcrumb uses a separator. For example, if the breadcrumb construction method returns a value that is an array of breadcrumb objects, the value of the Separator attribute in the global configuration determines the connection sign. If the whish separator attribute of the element in the breadcrumb object array is true, connecting the label value of the element by using a connection symbol, and if the whish separator attribute of the element in the breadcrumb object array is false, connecting the label value of the element without using the connection symbol until all the elements in the breadcrumb object array are traversed, and obtaining the target character string. And acquiring the value of the linkable, and if the value of the linkable is true, adding the corresponding style display. And if the clicking event is executed on the breadcrumbs, responding to the clicking event, and executing a callback method corresponding to the breadcrumbs construction method.

S107, monitoring the change condition of the current address path, acquiring the changed current address path when the change of the current address path is monitored, taking the changed current address path as a target address path, inputting the target address path into a breadcrumb construction method, acquiring breadcrumbs and re-performing rendering processing.

In this embodiment, the update of the breadcrumbs is determined by the change condition of the current address path, and whether the breadcrumbs are updated is determined by monitoring the change condition of the current address path. For example, if it is monitored that the current address path changes, the changed current address path is obtained, the changed current address path is used as a target address path, a breadcrumb construction method is input, updated breadcrumbs are obtained, and rendering processing is performed on the updated breadcrumbs, so that updating operation of the breadcrumbs is achieved.

In this embodiment, a front-end layout request of a web page is obtained, and a front-end layout container matched with the front-end layout request of the web page is obtained according to the front-end layout request of the web page, global configuration information and independent configuration information of the matched front-end layout container are obtained respectively, target configuration information is obtained according to the global configuration information and the independent configuration information, when breadcrumbs are determined to exist in the target configuration information, whether a pre-configured breadcrumbs construction method corresponding to the breadcrumbs exists is determined, if the pre-configured breadcrumbs construction method corresponding to the breadcrumbs exist, a current address path corresponding to the breadcrumbs construction method is obtained, the current address path is used as a target address path, the breadcrumbs are input to the breadcrumbs construction method, rendering processing is performed on the breadcrumbs, the current address path is monitored, and when the current address path is determined to change, the changed current address path is obtained, the current address path is used as a target address path, the breadcrumbs are obtained, when the breadcrumbs are determined to exist in the target configuration information, the breadcrumbs construction method is determined, the breadcrumbs are newly rendered, compared with the breadcrumbs which are determined to exist in the prior art, the breadcrumbs, the web page layout method is low in the implementation, the work amount is reduced, the development method is achieved by the target configuration method is realized, the target configuration information is not is obtained, the target configuration information is obtained, the target configuration method is used as the target configuration information, the target configuration information is obtained, the overall configuration method is completely, and the target configuration information is obtained, and the target configuration is completely is used, the automatic creation of breadcrumbs according to the webpage address path is realized, the development workload is reduced, and the development efficiency is further improved. And by monitoring the change condition of the current address path and monitoring and determining that the current address path is changed, acquiring the changed current address path and taking the changed current address path as a target address path, inputting the target address path into a breadcrumb construction method, acquiring breadcrumbs and re-performing rendering processing operation, flexibly coping with the update condition of the breadcrumbs, creating the breadcrumbs for web pages which are not in menu content, enabling the user to locate the current page more clearly, and improving the use experience.

Fig. 2 is a flowchart of a front-end layout processing method for a web page according to a second embodiment of the present application. Based on the embodiment shown in fig. 1, as shown in fig. 2, a specific implementation manner of the step S102 is as follows:

step S201, when the global configuration is determined to be enabled, taking all contents in the global configuration as global configuration information.

Step S202, determining enabled independent configurations from a plurality of independent configurations, and taking the content in each enabled independent configuration as independent configuration information.

Wherein, the whole content in the global configuration comprises one or more of the following: head container style, head container class, pure container style, pure container class, breadcrumbs, and size change listening intervals.

Further, a specific implementation manner of the step S103 is:

s203, taking the whole content in the independent configuration information as target configuration information.

In this embodiment, the priority of the independent configuration information is higher than that of the global configuration information, and therefore, the entire content in the independent configuration information is the target configuration information.

S204, taking the content with different attributes from the content of the independent configuration information in the global configuration information as target configuration information.

In this embodiment, if the global configuration information and the independent configuration information have the same content, the target configuration information adopts the attribute value of the content of the independent configuration information, and if the global configuration information contains the attribute that does not exist in the independent configuration information, the target configuration information adopts the attribute value of the global configuration information.

In this embodiment, the global configuration information and the independent configuration information are used to determine the target configuration information, so that the corresponding function in the front-end Layout container can be flexibly started according to the adjustment configuration information.

Fig. 3 is a flow chart of a front-end layout processing method of a web page according to a third embodiment of the present application, where, based on the embodiment shown in fig. 1 or fig. 2, as shown in fig. 3, after the step 103, the layout processing method of a web page further includes:

s301, when the enabling of the head container is determined based on the target configuration information, and the existence of the title or Logo in the target configuration information is determined, enabling corresponding content in the head container, and rendering the head container and the pure container.

In this embodiment, a header container is enabled according to target configuration information, where the header container further includes a header and a Logo, and whether the header or the Logo is enabled is determined according to the target configuration information, and rendering is performed on the header container and the pure container after the determination of the header container configuration is completed.

For example, fig. 4A to fig. 4B are respectively flow diagrams of a front-end layout processing method of a web page according to a fourth embodiment of the present application. Based on the embodiment shown in fig. 3, as shown in fig. 4A, a specific implementation manner of S301 is as follows:

s401a, when the enabling of the head container is determined based on the target configuration information, determining whether Logo exists in the target configuration information.

S402a, determining whether Logo is forbidden or not when Logo exists in the target configuration information.

S403a, rendering Logo when determining that Logo is not disabled.

In this embodiment, for example, if it is determined that the head container is enabled but no Logo exists, the operation of rendering the Logo is not performed, if it is determined that the head container is enabled and the Logo exists and the Logo is not disabled, the operation of rendering the Logo is performed, and if it is determined that the head container is enabled and the Logo exists but the Logo is disabled, the operation of rendering the Logo is not performed.

Alternatively, as shown in fig. 4B, another implementation manner of S301 is as follows:

s401b, when it is determined that the header container is enabled based on the target configuration information, it is determined whether or not a header exists in the target configuration information.

S402b, when it is determined that the title exists in the target configuration information, rendering the title.

In the present embodiment, for example, if it is determined that the header container is enabled but no title exists, the operation of rendering the title is not performed, and if it is determined that the header container is enabled and the title exists, the operation of rendering the title is performed.

In this embodiment, whether the header container has a title or Logo is determined by confirming the target configuration information, so that repeated writing of the title or Logo is reduced. And as for the Logo, a forbidden configuration item is added, so that whether the Logo is rendered or not can be selected on different pages, and the actual requirement of a user is met.

Fig. 5 is a flow chart of a front-end layout processing method of a web page provided in a fifth embodiment of the present application, and on the basis of the embodiment shown in fig. 1 or fig. 2, as shown in fig. 5, the layout processing method of a web page further includes:

s501, when the head container is determined not to be started or the rendering of the head container is completed based on the target configuration information, rendering processing is carried out on a pure container in the matched front-end layout container, and whether a size change monitoring callback exists in the target configuration information is determined. If yes, executing step S502; if it is determined that there is no, step S503 is performed.

And S502, rendering the container capable of monitoring the size change, and ending.

S503, rendering a container that cannot monitor the size change.

In this embodiment, if it is determined that the target configuration information includes a size change monitoring callback, rendering the container capable of monitoring the size change may refer to that the size of the rendered container is the size after the change, and if it is determined that the target configuration information includes no size change monitoring callback, rendering the container incapable of monitoring the size change may refer to that the size of the rendered container is consistent with the original size.

Fig. 6 is a flowchart of a front-end layout processing method for a web page according to a sixth embodiment of the present application. On the basis of the embodiment shown in fig. 5, as shown in fig. 6, before S502, the method may further include:

s601a, acquiring environment information of a browser based on the matched front-end layout container.

S602a, determining whether the browser supports a monitoring interface according to the environment information. If it is determined that the browser supports the listening interface, step S603a is executed; if it is determined that the browser does not support the listening interface, step S601b is performed.

S603a, creating a key value pair set of a corresponding callback of each document object model in the browser, and monitoring an interface instance.

S604a, monitoring a document object model according to the monitoring interface instance, and if the size of the document object model changes, calling a callback key value pair set corresponding to the document object model, and ending.

In this embodiment, the listening interface may refer to a resizebserver, and determine whether the browser supports the resizebserver, and may detect through JavaScript features, or by obtaining a resizebserver document, check the supporting situation of each browser.

S601b, if the browser is determined not to support the monitoring interface, an embedded object element with the same size as the document object model is created.

S602b, determining the document object model and the attribute of the embedded object element so that the size of the embedded object element is consistent with the document object model and can follow the change.

S603b, creating a blank page according to the embedded object element.

S604b, accessing the blank page according to the attribute embedded in the object element, and registering a monitoring event on the blank page to monitor the size change condition of the blank page.

S605b, if the size of the blank page changes, the size of the representation document object model changes.

In this embodiment, for the case that the browser does not support the monitoring interface, it is proposed to create an embedded object element with the same size as the document object model, create a blank page according to the embedded object element, and monitor the size of the blank page, so that the problem that the size of the document object model cannot be monitored is solved by associating the document object model with the embedded object element.

In this embodiment, by the above container size monitoring manner, monitoring is effectively performed for container size changes of web pages in different browsers, so that containers with size changes are rendered in time.

Fig. 7 is a flowchart of another method for processing a front-end layout of a web page according to an embodiment of the present application, where, as shown in fig. 7, the method for processing a layout of a web page includes:

s701, acquiring global configuration and independent configuration, wherein all contents in the global configuration comprise one or more of the following: head container style, head container class, pure container style, pure container class, breadcrumbs, and size change listening intervals; the content in the independent configuration includes: breadcrumbs, titles, container types, master container styles, master container clips, child container styles, child container clips, change-of-size listening intervals, change-of-size listening callbacks, or tag attributes.

In this embodiment, the global configuration may be adjusted using the setConfig method of the container, and the container types in the independent configuration include: head container, pure container.

S702, integrating the global configuration and the independent configuration to obtain the final configuration.

In this embodiment, the final configuration may refer to the configuration content of the currently rendered container, where the final configuration is formed by integrating a global configuration and an independent configuration, and since the independent configuration has a higher priority than the global configuration, for the same attribute as the global configuration, the attribute in the independent configuration is adopted, and for the attribute not configured in the independent configuration, the attribute in the global configuration is adopted.

S703, confirming whether the webpage layout container is a pure container according to the final configuration.

In this embodiment, determining whether the web page layout container is a pure container may refer to checking whether the final configuration enables the head container, if the head container is enabled, the web page layout container is not a pure container, and if the head container is not enabled, the web page layout container is a pure container.

S704, if the webpage layout container is determined not to be a pure container, whether a title or Logo exists in the head container or whether breadcrumbs are started is confirmed according to the final configuration.

In this embodiment, the Header container includes a Header, where the Header integrates Logo, breadcrumbs, titles, and custom function areas, and the development of Logo, breadcrumbs, and titles can be completed quickly by the Header, and also custom highly customized function development can be performed.

The global configuration of the Header includes one or more of the following: breadcrumbs, header styles, class of Header, breadcrumbs separator (default "/"), breadcrumbs class, clickable breadcrumbs class, class of current breadcrumbs, change of size monitor callback, logo configuration;

independent configuration of the Header includes: breadcrumbs, header styles, class of Header, size change listening interval, size change listening callback, logo configuration, disable Logo.

In addition, the loader provides a registeredBreadchubbs method (registered breadcrumbs method) to register the constructor of breadcrumbs and click callbacks.

S705, if it is confirmed that the title or Logo exists or that the breadcrumbs are enabled, rendering the header container.

In this embodiment, as shown in fig. 7A, when it is confirmed that a title or Logo exists or when it is confirmed that breadcrumbs are enabled, a corresponding component is rendered, so that the rendering of the head container is completed, and if the current path changes, the breadcrumbs are updated, and the rendering of the head container is completed again.

In addition, as shown in fig. 7B, after confirming that breadcrumbs are enabled, breadcrumbs are obtained by acquiring a constructor and a current path address in the registeredbreadjumbs method. Wherein, the content returned by the constructor comprises one of the following: null, string array, breadcrumb object array.

If the content returned by the constructor is null, it indicates that breadcrumbs are not currently needed.

If the content returned by the constructor is a character string, the character string is directly rendered.

If the content returned by the constructor is a character string array, connecting all items in the character string array by using the breadcrumb separator in the Header global configuration, and for the last item of the array, defaulting to not follow the breadcrumb separator.

If the content returned by the constructor is the breadcrumb object array, confirming the attribute value of key, label, linkable, whithSeparator in the breadcrumb. Wherein, key characterizes unique value of breadcrumb object, label characterizes breadcrumb display content, and key and label are indispensable items, linkable characterizes breadcrumb whether clickable, while separator characterizes breadcrumb using separator, and linkable and while separator are unnecessary items.

Meanwhile, if the linkable value of the breadcrumb object array is true, rendering a clickable style of the breadcrumb when rendering the breadcrumb, and calling a breadcrumb click callback in a registeredBriadjumbs method after clicking the breadcrumb to jump to the position where the clicked breadcrumb is located.

When the whish separator default value of the element in the breadcrumb object array is true, extracting the label of the element, connecting the label of the element through a breadcrumb separator in the head global configuration, and defaulting the label of the last element in the breadcrumb object array without a subsequent connector; when the whish separator is false, it indicates that the label of the element in the breadcrumb object array does not need a post-connector.

S706, if the webpage layout container is confirmed to be a pure container or the rendering of the head container is completed, the pure container is rendered.

S707, confirming whether the size change configuration exists according to the final configuration.

S708, if there is a size change configuration, rendering a container capable of monitoring the size change.

In this embodiment, as shown in fig. 7C, it is determined whether the browser supports a monitoring interface, if the browser supports the monitoring interface, a callback key value pair set corresponding to each document object model and a monitoring interface instance are created, the corresponding document object model is monitored by using the monitoring interface instance, and when the size of the document object model changes, a callback method is taken out from the key value pair set, and the callback method is called;

if the browser does not support the monitoring interface, setting a position style of the document object model as relative, creating an embedded object element, setting a position style of the embedded object element as absolute, and setting an inset style as 0 so that the embedded object element is consistent with the corresponding document object model in size and can follow changes, setting a type attribute of the embedded object element as text/html, and setting a data attribute as about, namely, blank, so that the embedded object element creates a blank page with the size consistent with the embedded object element, accessing the blank page through a content window attribute in the embedded object element, and registering an onresize event on the blank page for monitoring the size changes of the blank page. By this association, interception of the document object model size change is achieved.

S709, if there is no size change configuration, rendering a container that cannot monitor the size change.

In this embodiment, if there is no size change configuration, the rendered container size is consistent with the original container size.

Fig. 8 is a schematic structural diagram of a front-end layout processing device for a web page according to an embodiment of the present application. As shown in fig. 8, the front-end layout processing device 80 of the web page includes: acquisition module 801, determination module 802, rendering module 803, listening module 804. Wherein:

an obtaining module 801, configured to obtain a front-end layout request of a web page, and obtain a front-end layout container that is matched with the front-end layout request of the web page according to the front-end layout request of the web page; the matched front-end layout container comprises a head container and a pure container, wherein the head container comprises a breadcrumbs component; global configuration information and independent configuration information of the matched front-end layout container are respectively obtained; and acquiring target configuration information according to the global configuration information and the independent configuration information.

A determining module 802, configured to determine, when determining that a breadcrumb exists in the target configuration information, whether a preconfigured breadcrumb structure method corresponding to the breadcrumb exists; if it is determined that the pre-configured breadcrumb structure method corresponding to the breadcrumb exists, a current address path corresponding to the breadcrumb structure method is acquired.

The rendering module 803 is configured to input the current address path as a target address path to a breadcrumb structure method, obtain breadcrumbs, and perform rendering processing on the breadcrumbs.

The monitoring module 804 is configured to monitor a change condition of the current address path, and when it is monitored that the current address path changes, acquire a changed current address path, and use the changed current address path as a target address path, so as to input the target address path to a breadcrumb construction method, acquire breadcrumbs, and re-perform rendering processing.

In the embodiment of the present application, the obtaining module 801 may be further specifically configured to:

In the embodiment of the present application, the determining module 802 may be further specifically configured to:

from the plurality of independent configurations, an enabled independent configuration is determined and the content in each enabled independent configuration is used as independent configuration information.

In the embodiment of the present application, the rendering module 803 may be specifically further configured to:

and rendering the Logo when determining that the Logo is not disabled.

rendering the pure container in the front-end layout container, and determining whether a size change monitoring callback exists in the target configuration information;

if yes, rendering a container capable of monitoring the size change;

In the embodiment of the present application, the listening module 804 may be further specifically configured to:

creating a blank page according to the embedded object element;

Fig. 9 is a schematic structural diagram of an electronic device according to an embodiment of the present application. As shown in fig. 9, the electronic device 90 includes:

the electronic device 90 may include one or more processing cores 'processors 901, one or more computer-readable storage media's memory 902, communication components 903, and the like. The processor 901, the memory 902, and the communication unit 903 are connected via a bus 904.

In a specific implementation, at least one processor 901 executes computer-executable instructions stored in a memory 902, such that the at least one processor 901 performs a method of resource planning as described above.

The specific implementation process of the processor 901 may refer to the above-mentioned method embodiment, and its implementation principle and technical effects are similar, and this embodiment will not be described herein again.

In the embodiment shown in fig. 9, it should be understood that the processor may be a central processing unit (english: central Processing Unit, abbreviated as CPU), or may be other general purpose processors, digital signal processors (english: digital Signal Processor, abbreviated as DSP), application specific integrated circuits (english: application Specific Integrated Circuit, abbreviated as ASIC), or the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of a method disclosed in connection with the present invention may be embodied directly in a hardware processor for execution, or in a combination of hardware and software modules in a processor for execution.

The Memory may comprise high-speed Memory (Random Access Memory, RAM) or may further comprise Non-volatile Memory (NVM), such as at least one disk Memory.

The bus may be an industry standard architecture (Industry Standard Architecture, ISA) bus, an external device interconnect (Peripheral Component, PCI) bus, or an extended industry standard architecture (Extended Industry Standard Architecture, EISA) bus, among others. The buses may be divided into address buses, data buses, control buses, etc. For ease of illustration, the buses in the drawings of the present application are not limited to only one bus or one type of bus.

In some embodiments, a computer program product is also presented, comprising a computer program or instructions which, when executed by a processor, implement the steps in the front-end layout processing method of any of the above-described web pages.

The specific implementation of each operation above may be referred to the previous embodiments, and will not be described herein.

Other embodiments of the present application will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the application following, in general, the principles of the application and including such departures from the present disclosure as come within known or customary practice within the art to which the application pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the application being indicated by the following claims.

Claims

1. A front-end layout processing method for a web page, comprising:

acquiring a front-end layout request of a webpage, and acquiring a front-end layout container matched with the front-end layout request of the webpage according to the front-end layout request of the webpage; wherein the matched front-end layout container comprises a head container and a pure container, and the head container comprises a breadcrumbs component;

determining whether a pre-configured breadcrumb construction method corresponding to breadcrumbs exists when determining that breadcrumbs exist in the target configuration information;

if the existence of the pre-configured breadcrumb construction method corresponding to the breadcrumb is determined, acquiring a current address path corresponding to the breadcrumb construction method;

inputting the current address path as a target address path to the breadcrumb construction method, obtaining breadcrumbs, and rendering the breadcrumbs;

monitoring the change condition of the current address path, acquiring a changed current address path when the change of the current address path is monitored, taking the changed current address path as the target address path, inputting the target address path into the breadcrumb construction method, acquiring the breadcrumb and re-performing rendering processing.

2. The method for processing the front-end layout of the web page according to claim 1, wherein the obtaining global configuration information and independent configuration information of the matched front-end layout container respectively includes:

determining enabled independent configurations from a plurality of independent configurations, and taking the content in each enabled independent configuration as the independent configuration information;

3. The method for processing a front-end layout of a web page according to claim 1, wherein the obtaining target configuration information according to the global configuration information and the independent configuration information comprises:

Taking the whole content in the independent configuration information as the target configuration information;

and taking the content, which is different from the content of the independent configuration information in the global configuration information, as the target configuration information.

4. The method for processing a front-end layout of a web page according to claim 1, wherein after the target configuration information is obtained according to the global configuration information and the independent configuration information, the method further comprises:

and when the head container is determined to be enabled based on the target configuration information and the title or Logo exists in the target configuration information, enabling corresponding content in the head container and rendering the head container and the pure container.

5. The method for processing a front-end layout of a web page according to claim 4, wherein when determining that a header container is enabled based on the target configuration information and that a title or Logo exists in the target configuration information, enabling corresponding contents in the header container and rendering the header container and the pure container, comprises:

determining whether Logo exists in the target configuration information when the head container is started based on the target configuration information;

and rendering the Logo when determining that the Logo is not disabled.

6. The method for processing a front-end layout of a web page according to claim 4, further comprising:

determining whether a header exists in the target configuration information when it is determined that a header container is enabled based on the target configuration information;

7. The method for processing a front-end layout of a web page according to claim 1, wherein after the target configuration information is obtained according to the global configuration information and the independent configuration information, the method further comprises:

when the head container is determined not to be started or the rendering of the head container is completed based on the target configuration information, rendering the pure container in the matched front-end layout container, and determining whether a size change monitoring callback exists in the target configuration information;

if yes, rendering a container capable of monitoring the size change;

8. The method of claim 7, wherein after determining that there is a container of a size that can be listened to by the rendering, the method further comprises:

Acquiring the environment information of the browser based on the matched front-end layout container;

if the browser is determined to support a monitoring interface, a key value pair set of a corresponding callback of each document object model in the browser and a monitoring interface instance are created;

and monitoring a document object model according to the monitoring interface instance, and calling a callback key value pair set corresponding to the document object model if the size of the document object model changes.

9. The method for processing a front-end layout of a web page according to claim 8, wherein after said determining whether the browser supports a listening interface according to the environment information, the method further comprises:

determining attributes of the document object model and the embedded object element so that the embedded object element size remains consistent with the document object model and can follow changes;

creating a blank page according to the embedded object element;

Accessing the blank page according to the attribute embedded in the object element, and registering a monitoring event on the blank page to monitor the size change condition of the blank page;

and if the size of the blank page changes, the size of the document object model is represented to change.

10. A front-end layout processing apparatus for a web page, comprising:

the acquisition module is used for acquiring a front-end layout request of a webpage and acquiring a front-end layout container matched with the front-end layout request of the webpage according to the front-end layout request of the webpage; wherein the matched front-end layout container comprises a head container and a pure container, and the head container comprises a breadcrumbs component; global configuration information and independent configuration information of the matched front-end layout container are respectively obtained; acquiring target configuration information according to the global configuration information and the independent configuration information;

a determining module, configured to determine whether a pre-configured breadcrumb structure method corresponding to the breadcrumb exists when determining that the breadcrumb exists in the target configuration information; if the existence of the pre-configured breadcrumb construction method corresponding to the breadcrumb is determined, acquiring a current address path corresponding to the breadcrumb construction method;

The rendering module is used for taking the current address path as a target address path, inputting the current address path into the breadcrumb construction method, obtaining breadcrumbs, and rendering the breadcrumbs;

the monitoring module is used for monitoring the change condition of the current address path, acquiring a changed current address path when the current address path is monitored to be changed, taking the changed current address path as the target address path, inputting the target address path into the breadcrumb construction method, acquiring the breadcrumb and carrying out rendering again.

11. An electronic device, comprising: a processor, and a memory communicatively coupled to the processor;

the memory stores computer-executable instructions;

the processor executes computer-executable instructions stored in the memory to implement the method of any one of claims 1 to 9.

12. A computer readable storage medium having stored therein computer executable instructions which when executed by a processor are adapted to carry out the method of any one of claims 1 to 9.