CN115061684A

CN115061684A - Compatible method, system, equipment and storage medium for packaging layu framework

Info

Publication number: CN115061684A
Application number: CN202210679337.4A
Authority: CN
Inventors: 肖桦
Original assignee: Suzhou Inspur Intelligent Technology Co Ltd
Current assignee: Suzhou Inspur Intelligent Technology Co Ltd
Priority date: 2022-06-16
Filing date: 2022-06-16
Publication date: 2022-09-16

Abstract

The application discloses a method for realizing compatibility of a layui frame package, which is used for solving the technical problem that the existing layui frame package cannot be matched with a mobile terminal and a PC terminal for compatibility. The method comprises the following steps: building a layui front-end framework; repackaging the bottom layer functions of the layui front end frame, and configuring the list and the column in the layui front end frame; calling the encapsulated layui front-end frame, and matching the styles of various devices to render a page of the layui front-end frame. According to the method, the layui bottom layer function is repackaged, the list is re-rendered, and the handheld end and the PC end front end page are compatible under different equipment models. When the development of the lightweight web is reduced, the technical problem that different devices need different front-end schemes is solved, a lighter front-end framework is used for compiling, the development efficiency is improved, and the user experience is enhanced.

Description

Compatible method, system, equipment and storage medium for packaging layu framework

Technical Field

The present application relates to the field of programming technologies, and in particular, to a method, a system, a device, and a storage medium for compatible packaging of a layui framework.

Background

layu is more towards back-end developers than those based on MVVM (Model-View Model, object-interface-class) underlying front-end framework, which has adopted several years ago browser-hosted AMD (Asynchronous Module Definition) Module management, but not restricted to CommonJS's strip-box.

When repackaging is performed on the basic configuration, the new configuration of the package needs to be tested on multiple devices, and different configuration schemes are generated according to different devices. However, the layui background module lacks an adaptation scheme suitable for both the mobile side and the PC side. When a lightweight front-end framework is used, the compatible work of a handheld end and a PC end always needs to make two different ports, which is a huge workload.

Disclosure of Invention

The embodiment of the application provides a method, a system, equipment and a storage medium for compatible packaging of a layui frame, which are used for solving the technical problem that the existing layui frame cannot be matched with a mobile terminal and a PC terminal for compatibility during packaging.

In one aspect, an embodiment of the present application provides a method for compatibility of a layui framework package, where the method includes: building a layui front-end framework;

repackaging the bottom layer functions of the layui front end frame, and configuring the list and the column in the layui front end frame.

Calling the encapsulated layui front-end frame, and matching the styles of various devices to render a page of the layui front-end frame.

In one implementation of the present application, after the configuring the list and the column in the layui front-end framework, the method further comprises: and monitoring events in navigation.

And repackaging and rewriting the events in the navigation.

And monitoring a new click event, and executing a corresponding repackaged and rewritten navigation event.

In an implementation manner of the present application, the configuring the list and the column in the layui front-end frame specifically includes: determining various underlying functions in the list and columns in the layui front end framework.

The corresponding packaging configuration is referenced at the navigation and/or corresponding page.

And completing writing and packaging of basic functions in the list and the column in the layui front-end framework based on the packaging configuration.

In an implementation manner of the present application, the rendering a page specifically includes:

acquiring an HTML (Hyper Text Markup Language) source code and creating a DOM (Document Object Model); and the DOM tree root node corresponds to an HTML tag.

The CSS (Cascading Style Sheets) code is analyzed, the final Style is calculated, and then a CSSOM (Cascading Style Sheets Object Model) tree is constructed.

And generating a rendering tree based on the DOM tree and the CSSOM tree.

And drawing a front-end page according to the rendering tree.

In one implementation of the present application, the bottom layer functions of the layui front end frame include: editing, refreshing, adding, sequencing and batch operation.

An embodiment of the present application further provides a compatible system for packaging a layui frame, the system including: and the front end frame building module is used for building the layui front end frame.

And the encapsulation module is used for re-encapsulating the bottom layer function of the layui front end frame and configuring the list and the column in the layui front end frame.

And the rendering module is used for calling the encapsulated layui front-end frame and performing page rendering on the layui front-end frame by matching the styles of various devices.

In an implementation manner of the present application, in the rendering module, the priority level when the CSS code is analyzed is from low to high as: browser default settings, user settings, external connection style, internal connection style, style in HTML.

In an implementation manner of the application, in the rendering module, the DOM tree and the HTML tag correspond to each other one by one.

The embodiment of the present application further provides a compatible device for packaging a layui frame, the device including:

at least one processor; and the number of the first and second groups,

a memory communicatively coupled to the at least one processor; wherein the content of the first and second substances,

the memory stores instructions executable by the at least one processor to enable the at least one processor to:

and constructing a layui front-end framework.

An embodiment of the present application further provides a compatible non-volatile computer storage medium of a layui framework package, in which computer-executable instructions are stored, and the computer-executable instructions are set to: and constructing a layui front-end framework.

According to the method, the system, the equipment and the storage medium for compatible packaging of the layui frame, the functions of the bottom layer of the layui frame are packaged again, the list is rendered again, and therefore the purpose that the front-end page of the handheld end and the front-end page of the PC end are compatible under different equipment models is achieved. And (4) obtaining final style data based on the HTML tags which are in one-to-one correspondence with the DOM tree by creating the DOM tree, and finishing the rendering of the front-end page. Through the scheme, the technical problem that different front-end schemes are needed by different equipment when development of the lightweight web is reduced can be solved, so that front-end pages can be compatible on different equipment, a lighter front-end framework is used for writing, the development efficiency is improved, and the user experience is enhanced.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

fig. 1 is a flowchart of a method for compatibility of a layui framework package according to an embodiment of the present disclosure;

fig. 2 is a diagram of a compatible system structure of a layui framework package according to an embodiment of the present disclosure;

fig. 3 is a schematic diagram of a compatible device encapsulated by a layui frame according to an embodiment of the present disclosure.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail and completely with reference to the following specific embodiments of the present application and the accompanying drawings. It should be apparent that the described embodiments are only some of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

Layui is more oriented towards back-end developers, and distinguishes it from the front-end frameworks based on the MVVM bottom layer, and adopts the browser-hosted AMD module management mode several years ago in organization form, but is not limited to the strip frames of commonmojs.

When repackaging is performed on the basic configuration, the new configuration of the package needs to be tested on multiple devices, and different configuration schemes are generated according to different devices. However, the layui background module lacks an adaptation scheme suitable for both the mobile side and the PC side. When a lightweight front-end framework is used, the compatible work of a handheld end and a PC end always needs to make two different ports, which is a huge workload. In order to realize compatibility of different devices, it is necessary to provide a lightweight front-end-background management framework.

The technical solutions proposed in the embodiments of the present application are described in detail below with reference to the accompanying drawings.

Fig. 1 is a flowchart of a method for compatibility of a layui framework package according to an embodiment of the present disclosure. As shown in fig. 1, the method mainly comprises the following steps:

and 101, building a layui front-end framework.

In the embodiment of the present application, to implement the compatibility of the front-end page, the process is completed through the layui framework. Therefore, first a basic layui front end frame needs to be built. And packaging and rewriting on the basis of the built layui front-end frame.

102, repackaging the bottom layer functions of the layui front end frame, and configuring the list and the column in the layui front end frame.

In the embodiment of the application, a series of operations are performed on the built layui front-end framework. The underlying functions of the layui front-end framework, including additions, sequencing, batch operations, etc., are first repackaged. After the encapsulation of these underlying functions is rewritten, lists and columns in the layui frontend framework are configured.

It should be noted that repackaging various event monitoring events in the layui front-end frame, such as re-monitoring navigation events and mask layer events, and performing iframe page nesting operation, that is, re-monitoring and rewriting these events on the basis of the layui front-end frame, so that when this operation is performed, new logic will be executed synchronously.

Further, the display situation is different at the mobile side, such as a mobile phone or tablet, and at the PC side due to the display of the front page. These distinctions are primarily due to differences in the list and column purposes. Therefore, the configuration of the list and column in the layui front end framework is required.

In this embodiment of the present application, configuring the list and the column in the layui front-end frame mainly includes: and determining a list and columns of front-end interfaces required by the PC end and the mobile end respectively, and then determining which of various basic functions can be provided in the list and columns in the layui front-end framework.

Furthermore, the navigation and/or corresponding page references corresponding packaging configurations, the selection of the packaging configurations is determined based on the specific display condition required by the navigation and/or corresponding page, and the packaging configurations can provide various editing, sorting, refreshing, batch operation and other underlying functions of lists and columns for writing packaging.

And 103, calling the encapsulated layui front-end frame, and matching the styles of various devices to render a page of the layui front-end frame.

In the embodiment of the present application, after configuring the list and the column in the layui front-end frame, determining various click events in the monitored navigation, repackaging and rewriting the events in the navigation, monitoring a new click event, and executing a navigation event corresponding to the repackaged and rewritten click event when executing a corresponding operation.

That is, when various click events of the navigation bar in each part of the system are monitored and then corresponding click operations are executed, the newly packaged monitoring logic is synchronously executed.

In the embodiment of the application, after the operation steps of encapsulating and rewriting the layui front-end frame are completed, the operation in the method for executing the new encapsulation is called, so that the compatibility between the handheld end and the PC end frame is realized. And when the DOM structure enters the framework, recalculating and generating the DOM structure, calculating according to the repackaged style, and updating the corresponding DOM node when the method and the event are monitored.

It should be noted that the browser will parse the HTML document into a tree structure, and define the standard for accessing and operating the HTML document based on this. According to the W3C standard we refer to as the HTML DOM document object model.

The DOM nodes are divided into a plurality of types, according to the DOM specification, the whole document is a document node, each label is an element node, the text contained in the element is a text node, and the attribute of the element is an attribute node. When entering the system, the webpage is rendered according to the steps of analyzing HTML elements, a CSS analyzer, DOM tree node association and the like, and each DOM node is provided with an attach method for receiving the style information, so that when the newly packaged event monitoring is executed, the DOM node is updated to achieve the purpose of executing the webpage.

In the embodiment of the application, the browser parses the HTML source code and then creates a DOM tree. The parallel request css/image/js is in a DOM tree, the root node of the DOM tree is documentElement, and the corresponding node is an HTML tag. In the DOM tree, each tag corresponds to an element node.

Further, the attributes of the device are obtained and calculated, mainly the width, height, etc. of the page. And the browser analyzes the CSS codes, calculates the final style data and constructs a CSSOM tree. The CSS code analysis needs to be done according to a certain priority.

In one embodiment of the present application, the defined priority is from low to high as: browser default settings, user settings, external connection style, internal connection style, style in HTML.

In the embodiment of the present application, the XHTML elements are classified into three types, block elements, inline (in-line) elements, and inline (in-line) block elements, according to the CSS display classification.

And further, generating a rendering tree according to the established DOM tree and the CSSOM tree, wherein each node in the rendering tree stores the corresponding CSS attribute. The render tree is similar to, but distinct from, the DOM tree. The DOM tree is completely in one-to-one correspondence with the HTML tags, and the rendering tree ignores elements that do not need to be rendered.

Through the established rendering tree, the browser can realize the drawing of the front-end page, and different front-end pages can be drawn according to the display characteristics of the PC end equipment and the characteristics of various mobile ends. Compatibility of the page between different devices is achieved.

It should be noted that, in the process of rendering, if the DOM or the CSSOM is modified, the above process is repeatedly performed, and is not sequentially completed at a time.

According to the method for compatible packaging of the layui frame, the functions of the bottom layer of the layui frame are packaged again, the list is rendered again, and therefore the purpose that the page of the front end of the handheld end and the page of the front end of the PC end are compatible under different equipment models is achieved. And (4) obtaining final style data based on the HTML tags which are in one-to-one correspondence with the DOM tree by creating the DOM tree, and finishing the rendering of the front-end page. Through the scheme of the application, the technical problem that different front-end schemes are needed by different equipment when development of the lightweight web is reduced can be solved, so that the front-end page can be compatible on different equipment, a lighter front-end framework is used for writing, development efficiency is improved, and user experience is enhanced.

Based on the same inventive concept, the embodiment of the present application further provides a system for compatible packaging of a layui frame, and fig. 2 is a structure diagram of the system for compatible packaging of a layui frame according to the embodiment of the present application.

In fig. 2, the system mainly includes:

a front end frame construction module 201 for constructing a layui front end frame;

an encapsulating module 202, configured to repackage the bottom layer functions of the layui front end frame, and configure a list and a column in the layui front end frame;

and the rendering module 203 is configured to call the encapsulated layui front-end frame, and perform page rendering on the layui front-end frame by matching with the styles of multiple devices.

In this embodiment of the application, in the rendering module 203, the priority level when the CSS code is parsed is from low to high as: browser default settings, user settings, external connection style, internal connection style, style in HTML.

In the embodiment of the present application, in the rendering module 203, the DOM tree and the HTML tag correspond to each other one to one.

The compatible system of layui frame encapsulation that this application embodiment provided encapsulates through repackaging layui bottom function to the form is played up again, has realized under different equipment models that hand-held terminal and PC end front end page are compatible. And (4) obtaining final style data based on the HTML tags which are in one-to-one correspondence with the DOM tree by creating the DOM tree, and finishing the rendering of the front-end page. Through the scheme of the application, the technical problem that different front-end schemes are needed by different equipment when development of the lightweight web is reduced can be solved, so that the front-end page can be compatible on different equipment, a lighter front-end framework is used for writing, development efficiency is improved, and user experience is enhanced.

Based on the same inventive concept, the present application embodiment further provides a device for compatible packaging of a layui frame, and fig. 3 is a schematic diagram of the device for compatible packaging of a layui frame provided in the present application embodiment, as shown in fig. 3, the device mainly includes: at least one processor 301; and a memory 302 communicatively coupled to the at least one processor; wherein the memory 302 stores instructions executable by the at least one processor 301, the instructions being executable by the at least one processor 301 to enable the at least one processor 301 to: building a layui front-end framework;

repackaging the bottom layer functions of the layui front-end frame, and configuring lists and columns in the layui front-end frame;

In addition, an embodiment of the present application further provides a compatible non-volatile computer storage medium of a layui framework package, storing computer-executable instructions configured to: building a layui front-end framework;

repackaging the bottom layer functions of the layui front end frame, and configuring the list and the column in the layui front end frame;

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The embodiments in the present application are described in a progressive manner, and the same and similar parts among the embodiments can be referred to each other, and each embodiment focuses on differences from other embodiments. In particular, for the apparatus embodiment, since it is substantially similar to the method embodiment, the description is relatively simple, and reference may be made to the partial description of the method embodiment for relevant points.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in the process, method, article, or apparatus that comprises the element.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method of compatibility of a layui framework package, the method comprising:

building a layui front-end framework;

calling the encapsulated layui front-end frame, and matching the styles of multiple devices to render a page of the layui front-end frame.

2. The method of claim 1, wherein after the configuring the list and column in the layui front-end frame, the method further comprises:

monitoring events in navigation;

repackaging and rewriting the events in the navigation;

3. The method for compliance with a layui framework package according to claim 1, wherein the configuring the list and the column in the layui front end framework specifically comprises:

determining various basic functions in lists and columns in the layui front end framework;

referencing a corresponding packaging configuration at the navigation and/or corresponding page;

4. The method for compatibility of a layui frame package according to claim 1, wherein the rendering a page specifically comprises:

acquiring HTML source codes and creating a DOM tree; the DOM tree root node corresponds to an HTML tag;

analyzing the CSS codes, calculating a final style, and then constructing a CSSOM tree;

generating a rendering tree based on the DOM tree and the CSSOM tree;

and drawing a front-end page according to the rendering tree.

5. The method of claim 1, wherein the underlying functionality of the layui front-end framework comprises: editing, refreshing, adding, sequencing and batch operation.

6. A layui framework encapsulated compatibility system, the system comprising:

the front end frame building module is used for building a layui front end frame;

the encapsulation module is used for re-encapsulating the bottom layer function of the layui front end frame and configuring the list and the column in the layui front end frame;

7. The system of claim 6, wherein the rendering module is configured to parse CSS codes according to a priority from a low level to a high level as: browser default settings, user settings, external connection style, internal connection style, style in HTML.

8. The system of claim 6, wherein the rendering module comprises one-to-one correspondence between DOM trees and HTML tags.

9. A layui frame-encapsulated compatible device, the device comprising:

at least one processor; and the number of the first and second groups,

the memory stores instructions executable by the at least one processor to cause the at least one processor to:

building a layui front-end framework;

10. A compatible non-transitory computer storage medium of a layui framework package storing computer-executable instructions configured to: building a layui front-end framework;