Detailed Description
Exemplary embodiments of the present disclosure are described below in conjunction with the accompanying drawings, which include various details of the embodiments of the present disclosure to facilitate understanding, and should be considered as merely exemplary. Accordingly, one of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
Fig. 1 is a flow chart of a form rendering method according to an embodiment of the present disclosure, where the embodiment may be applicable to a case of rendering and displaying a form of an internet of things platform. The method may be performed by a form rendering device implemented in software and/or hardware and integrated on an electronic device.
Specifically, referring to fig. 1, the form rendering method is as follows:
s101, rendering a to-be-rendered form according to form data of the to-be-rendered form to obtain a current form page; wherein, the form data is stored in the form of a Ref object.
S102, determining a first list sub-component with data change in the current page, and re-rendering the first list sub-component.
In the embodiment of the disclosure, the form to be rendered comprises a plurality of form sub-components, and the presentation effect of the form to be rendered depends on the presentation content of the form sub-components. When the form to be rendered is rendered according to the form data of the form to be rendered, optionally, a rendering template corresponding to each form sub-component is firstly obtained, and then the form data corresponding to each form sub-component is combined for rendering, and the obtained current form page is optionally a form page taking a webpage as a carrier.
It should be noted that, the solution of the present disclosure is implemented under a React framework, where act is an open source library used to construct a user interface. The compact framework provides two ways of storing form data, namely in context and in Ref objects. In the scheme of the disclosure, form data of a form to be rendered is stored in the form of a Ref object. The form data is not stored in a context mode, because once a certain form sub-component changes data, a new form is generated and all form sub-components of the new form are triggered to be re-rendered, so that the form sub-components which are unnecessarily refreshed are re-rendered, namely, a large number of invalid rendering exists in the re-rendering process, and the front-end operation efficiency is affected. In contrast, form data is stored in the form of a Ref object, and when a certain form sub-component changes data based on the inherent characteristics of the Ref object, a new form is not generated, that is, all sub-components of the whole form are not triggered to be re-rendered. In addition, the Ref object is used for storing form data, and the method has the advantages that after a certain form sub-assembly is destroyed, corresponding memory is automatically released, and memory leakage is avoided.
Based on the above, for the current form page, the first form sub-component with data change in the current form page can be monitored in real time, wherein the data change is optionally caused by the fact that a user inputs data in the first form sub-component, and further, the changed form data corresponding to the first form sub-component and a rendering template for the first form sub-component are obtained, and the first form sub-component is re-rendered.
In the embodiment of the disclosure, because the form data is stored in a Ref object mode, when a certain form sub-component is changed, not all the form sub-components of the current form page are re-rendered, but only the changed form sub-components are re-rendered, so that the number of invalid rendering times can be greatly reduced, and the operation efficiency of the front end is further ensured.
Fig. 2 is a flow diagram of yet another form rendering method according to an embodiment of the present disclosure. Referring to fig. 2, the form rendering method is specifically as follows:
s201, wrapping the high-order assembly by the list sub-assembly of the to-be-rendered form.
The high-order component comprises an update configuration item which triggers the wrapped form sub-component to render and update, and the update configuration item is a logic code which can force the form sub-component to be triggered to re-render. In this way, with a single sub-component as the minimum update granularity, the update rendering of each sub-component is triggered based on a high-order component wrapping the sub-component, that is, the control of the rendering time of the sub-component can be realized by wrapping the high-order component.
S202, rendering the to-be-rendered form according to form data of the to-be-rendered form to obtain a current form page, wherein the form data is stored in a Ref object mode.
Specific processes can be referred to the above embodiments, and will not be described herein.
S203, determining a first list sub-component with data change in the current page, and triggering the first list sub-component to re-render by wrapping an update configuration item included in a high-order component of the first list sub-component.
In the embodiment of the disclosure, after the first sub-component with the data change in the current page is determined, the update configuration item included in the high-order component wrapping the first sub-component is operated to trigger the rendering update of the first sub-component, so that the updating rendering of the first sub-component does not affect other sub-components.
In the embodiment of the disclosure, the higher-order component is wrapped for each form sub-component, so that when the form update rendering is performed, only the update configuration item included in the higher-order component wrapping the form sub-component is required to be operated, and other sub-components are not affected.
Fig. 3a is a flow diagram of yet another form rendering method according to an embodiment of the present disclosure. Referring to fig. 3a, the form rendering method is specifically as follows:
s301, rendering the to-be-rendered form according to form data of the to-be-rendered form to obtain a current form page; wherein, the form data is stored in the form of Ref objects.
S302, determining a first list sub-component with data change in the current page, and re-rendering the first list sub-component.
S303, determining a second sheet sub-component according to the dependency relationship among different sheet sub-components, and re-rendering the second sheet sub-component.
In the implementation of the disclosure, the form data corresponding to the second sheet sub-component depends on the form data corresponding to the first sheet sub-component, that is, when the first sheet sub-component changes data, the second sheet sub-component depending on the first sheet sub-component also changes data, and at this time, the second sheet sub-component needs to be re-rendered. When the method is implemented, the component dependency relationship among different list sub-components can be registered first, and then the second list sub-component is determined according to the component dependency relationship, and the second list sub-component is rendered again.
Wherein determining the second form sub-component is as follows: registering subscription relations of broadcast events among different form sub-components according to the dependency relations among the different form sub-components; illustratively, a form includes the form sub-components A, B and C, if the form sub-component B depends on the form sub-component A, the registry sub-component B subscribes to the data change event broadcast by the form sub-component A, wherein the data change event can include the data field which changes from the form sub-component A to the form sub-component B and is needed by the form sub-component B; if the form sub-component C depends on the form sub-component B, the registry sub-component C subscribes to the data change event broadcasted by the form sub-component B; in the scheme, subscription events are registered only in the affected list sub-components, and subscription requirements are not required to be mounted on both sides, so that the situation of cyclic rendering is avoided. Further, a data change event broadcasted by the first form sub-component is received, and the form sub-component registered and subscribed to the data change event is used as a second form sub-component according to a subscription relation, wherein the number of the second form sub-components is one or more.
Further, the data change event is sent to the second sub-components, wherein if the number of the second sub-components is multiple, the data change event is sent to the second sub-components simultaneously through multicast technology, and then for each second sub-component, the second sub-components are re-rendered through wrapping the update configuration items included in the higher-order components of the second sub-components.
It should be noted that, because each form sub-component is wrapped by a high-order component in advance, an event sending configuration item for triggering the wrapped form sub-component to send a data change event and a receiving configuration item for receiving the data change event are also written in the high-order component in advance; thus, each form sub-component may broadcast data change events out through the event send configuration item of the higher-order component of the outer-wrap, and may receive subscribed data change events through the receive configuration item of the higher-order component of the outer-wrap. In addition, the second list sub-component influenced by the first list sub-component is indicated to re-render in an event subscription mode, so that logic codes forming each configuration item, which are included in a high-order component wrapping the list sub-component, can be reused, and therefore the code quantity of the list can be reduced. In addition, after the re-rendering of the second table sub-component is completed, it may be further determined whether there are other sub-components that rely on the second table sub-component, and if not, ending; if so, re-rendering other sub-components, the specific implementation process is similar to the re-rendering process of the second sub-component, and will not be repeated here.
In yet another alternative embodiment, a dependency tree is constructed from dependencies between the different table sub-components; traversing the dependency tree by taking the first sub-list component as a starting node, determining a second sub-list component according to the traversing result, and re-rendering the second sub-list component.
For a detailed description of the form rendering process, reference is made to FIG. 3b, which shows a logic flow diagram for form rendering. A, B and C are all the list sub-components of the form to be rendered, and all the list sub-components are rendered when the form to be rendered is rendered for the first time; then, according to the dependency relationship between the different sub-components, registering the subscription relationship of the broadcast event between the different sub-components in the subscription control module, for example, if the sub-component B depends on the sub-component A, the registration sub-component B subscribes to the data change event broadcasted by the sub-component A. Triggering the sub-sheet component A to re-render if the sub-sheet component A changes data; meanwhile, the form sub-assembly A sends a data change event to the subscription control module; and the subscription control module determines that the sub-list sub-component B subscribes to the data change event according to the event subscription relation, and sends the data change event generated by the sub-list sub-component A to the sub-list sub-component B so as to instruct the sub-list sub-component B to re-render.
In the embodiment of the disclosure, when the changed first list sub-assembly is re-rendered, the second list sub-assembly influenced by the first list sub-assembly is re-rendered, so that the display effect of the list page is ensured; and the re-rendering is not performed for other sub-components not affected by the first sub-component, so that the number of invalid rendering times is greatly reduced compared with the case that all components of the form are re-rendered.
Further, when the current form page needs special processing, the method can be realized by adding a custom component to the current form page, and optionally, the custom form component is added to the current form page in a form nesting or form nesting mode in response to a request for adding the custom form sub-component. Wherein the custom form may follow the attributes provided by the development framework to ensure ease of component addition.
Fig. 4 is a schematic structural diagram of a form rendering device according to an embodiment of the present disclosure, where the embodiment may be applicable to a case of rendering and displaying a form of an internet of things platform. Referring to fig. 4, comprising:
the first rendering module 401 is configured to render the to-be-rendered form according to form data of the to-be-rendered form, so as to obtain a current form page; wherein, the form data is stored in the form of Ref objects;
a second rendering module 402, configured to determine a first table sub-component in which a data change occurs in the current page, and re-render the first table sub-component.
On the basis of the above embodiment, optionally, the method further includes:
the component processing module is used for wrapping the high-order components of the list sub-components of the list to be rendered; the high-order component comprises an update configuration item for triggering the wrapped form sub-component to render and update;
the second rendering module is further configured to:
and determining a first list sub-component with data change in the current page, and triggering the first list sub-component to re-render by wrapping an update configuration item included in a high-order component of the first list sub-component.
On the basis of the above embodiment, optionally, the method further includes:
the third rendering module is used for determining a second sub-list component according to the dependency relationship among different sub-list components and re-rendering the second sub-list component; the form data corresponding to the second form sub-component is dependent on the form data corresponding to the first form sub-component.
On the basis of the above embodiment, optionally, the third rendering module is further configured to:
registering subscription relations of broadcast events among different form sub-components according to the dependency relations among the different form sub-components;
receiving a data change event broadcasted by the first form sub-component, and taking the form sub-component registered and subscribed to the data change event as a second form sub-component according to a subscription relation;
and sending the data change event to the second sub-list component, and re-rendering the second sub-list component through an update configuration item included in a higher-order component wrapping the second sub-list component.
On the basis of the above embodiment, optionally, the method further includes:
and the component adding module is used for adding the custom form sub-components to the current form page in a form nesting or nested form mode in response to a request for adding the custom form sub-components.
The form rendering device provided by the embodiment of the disclosure can execute the form rendering method provided by any embodiment of the disclosure, and has the corresponding functional modules and beneficial effects of the executing method. Reference is made to the description of any method embodiment of the disclosure for details not explicitly described in this embodiment.
In the technical scheme of the disclosure, the acquisition, storage, application and the like of the related user personal information all conform to the regulations of related laws and regulations, and the public sequence is not violated.
According to embodiments of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.
Fig. 5 illustrates a schematic block diagram of an example electronic device 500 that may be used to implement embodiments of the present disclosure. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular telephones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be exemplary only, and are not meant to limit implementations of the disclosure described and/or claimed herein.
As shown in fig. 5, the apparatus 500 includes a computing unit 501 that can perform various suitable actions and processes according to a computer program stored in a Read Only Memory (ROM) 502 or a computer program loaded from a storage unit 508 into a Random Access Memory (RAM) 503. In the RAM503, various programs and data required for the operation of the device 500 can also be stored. The computing unit 501, ROM502, and RAM503 are connected to each other by a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
Various components in the device 500 are connected to the I/O interface 505, including: an input unit 506 such as a keyboard, a mouse, etc.; an output unit 507 such as various types of displays, speakers, and the like; a storage unit 508 such as a magnetic disk, an optical disk, or the like; and a communication unit 509 such as a network card, modem, wireless communication transceiver, etc. The communication unit 509 allows the device 500 to exchange information/data with other devices via a computer network such as the internet and/or various telecommunication networks.
The computing unit 501 may be a variety of general and/or special purpose processing components having processing and computing capabilities. Some examples of computing unit 501 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various specialized Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 501 performs the respective methods and processes described above, such as a form rendering method. For example, in some embodiments, the form rendering method may be implemented as a computer software program tangibly embodied on a machine-readable medium, such as storage unit 508. In some embodiments, part or all of the computer program may be loaded and/or installed onto the device 500 via the ROM502 and/or the communication unit 509. When the computer program is loaded into RAM503 and executed by computing unit 501, one or more steps of the form rendering method described above may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the form rendering method by any other suitable means (e.g., by means of firmware).
Various implementations of the systems and techniques described here above can be implemented in digital electronic circuitry, integrated circuit systems, field Programmable Gate Arrays (FPGAs), application Specific Integrated Circuits (ASICs), application Specific Standard Products (ASSPs), systems On Chip (SOCs), complex Programmable Logic Devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs, the one or more computer programs may be executed and/or interpreted on a programmable system including at least one programmable processor, which may be a special purpose or general-purpose programmable processor, that may receive data and instructions from, and transmit data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for carrying out methods of the present disclosure may be written in any combination of one or more programming languages. These program code may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus such that the program code, when executed by the processor or controller, causes the functions/operations specified in the flowchart and/or block diagram to be implemented. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. The machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and pointing device (e.g., a mouse or trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic input, speech input, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a background component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such background, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), wide Area Networks (WANs), and the internet.
The computer system may include a client and a server. The client and server are typically remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server may be a cloud server, a server of a distributed system, or a server incorporating a blockchain.
It should be appreciated that various forms of the flows shown above may be used to reorder, add, or delete steps. For example, the steps recited in the present disclosure may be performed in parallel or sequentially or in a different order, provided that the desired results of the technical solutions of the present disclosure are achieved, and are not limited herein.
The above detailed description should not be taken as limiting the scope of the present disclosure. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives are possible, depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present disclosure are intended to be included within the scope of the present disclosure.