CN114035829A

CN114035829A - Page component updating method and device, electronic equipment and storage medium

Info

Publication number: CN114035829A
Application number: CN202111553202.5A
Authority: CN
Inventors: 秦浩严
Original assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Current assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Priority date: 2021-12-17
Filing date: 2021-12-17
Publication date: 2022-02-11

Abstract

The disclosure provides a page component updating method and device, electronic equipment and a storage medium, and relates to the technical field of computers, in particular to the fields of cloud computing and page processing. The implementation scheme is as follows: responding to the running page component, and acquiring a first component instance of the page component; recording a first mapping relation between a first component instance and a page component based on a registration function; and in response to detecting that the page component is updated, updating the first component instance based on the first mapping relationship.

Description

Page component updating method and device, electronic equipment and storage medium

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to the field of cloud computing and page processing, and in particular, to a page component updating method and apparatus, an electronic device, a computer-readable storage medium, and a computer program product.

Background

Hot update is a common update mode for page components, and can enable developers to repair bugs and release functions without releasing new versions.

The approaches described in this section are not necessarily approaches that have been previously conceived or pursued. Unless otherwise indicated, it should not be assumed that any of the approaches described in this section qualify as prior art merely by virtue of their inclusion in this section. Similarly, unless otherwise indicated, the problems mentioned in this section should not be considered as having been acknowledged in any prior art.

Disclosure of Invention

The disclosure provides a page component updating method, a page component updating device, an electronic device, a computer readable storage medium and a computer program product.

According to an aspect of the present disclosure, an updating method of a page component is provided, which includes, in response to a page component being executed, obtaining a first component instance of the page component, where the page component includes a hot update plug-in, where the hot update plug-in includes a registration function, where the registration function is used to record a mapping relationship between the page component and a corresponding component instance; recording a first mapping relation between a first component instance and a page component based on a registration function; and in response to detecting that the page component is updated, updating the first component instance based on the first mapping relationship.

According to another aspect of the present disclosure, there is provided an updating apparatus of a page component, including: the device comprises an acquisition unit, a storage unit and a display unit, wherein the acquisition unit is configured to respond to a running page component and acquire a first component instance of the page component, the page component comprises a hot update plug-in, the hot update plug-in comprises a registration function, and the registration function is used for recording the mapping relation between the page component and a corresponding component instance; the recording unit is configured to record a first mapping relation between the first component instance and the page component based on the registration function; and an updating unit configured to update the first component instance based on the first mapping relation in response to detecting that the page component is updated.

According to another aspect of the present disclosure, there is provided an electronic device including: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the above-described method of updating page components.

According to another aspect of the present disclosure, there is provided a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the above-described updating method of a page component.

According to another aspect of the present disclosure, a computer program product is provided, comprising a computer program, wherein the computer program, when executed by a processor, implements the above-mentioned method of updating a page component.

According to one or more embodiments of the disclosure, the mapping relationship between the page component and the page instance can be recorded, and when the component is updated, the instance corresponding to the component can be accurately found and updated correspondingly, without updating the whole project file, so that the updating efficiency is improved.

It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present disclosure, nor do they limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate exemplary embodiments of the embodiments and, together with the description, serve to explain the exemplary implementations of the embodiments. The illustrated embodiments are for purposes of illustration only and do not limit the scope of the claims. Throughout the drawings, identical reference numbers designate similar, but not necessarily identical, elements.

FIG. 1 illustrates a schematic diagram of an exemplary system in which various methods described herein may be implemented, according to an embodiment of the present disclosure;

FIG. 2 shows a flow diagram of a method of updating a page component according to an embodiment of the present disclosure;

FIG. 3 shows a block diagram of an update apparatus for a page component according to an embodiment of the present disclosure;

FIG. 4 illustrates a block diagram of an exemplary electronic device that can be used to implement embodiments of the present disclosure.

Detailed Description

Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of the embodiments of the disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those 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 of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

In the present disclosure, unless otherwise specified, the use of the terms "first", "second", and the like to describe various elements is not intended to limit the positional relationship, the temporal relationship, or the importance relationship of the elements, and such terms are used only to distinguish one element from another. In some examples, a first element and a second element may refer to the same instance of the element, and in some cases, based on the context, they may also refer to different instances.

The terminology used in the description of the various described examples in this disclosure is for the purpose of describing particular examples only and is not intended to be limiting. Unless the context clearly indicates otherwise, if the number of elements is not specifically limited, the elements may be one or more. Furthermore, the term "and/or" as used in this disclosure is intended to encompass any and all possible combinations of the listed items.

Embodiments of the present disclosure will be described in detail below with reference to the accompanying drawings.

Fig. 1 illustrates a schematic diagram of an exemplary system 100 in which various methods and apparatus described herein may be implemented in accordance with embodiments of the present disclosure. Referring to fig. 1, the system 100 includes one or

more client devices

101, 102, 103, 104, 105, and 106, a server 120, and one or more communication networks 110 coupling the one or more client devices to the server 120.

Client devices

101, 102, 103, 104, 105, and 106 may be configured to execute one or more applications.

In embodiments of the present disclosure, the server 120 may run one or more services or software applications that enable the update method of the page components to be performed.

In some embodiments, the server 120 may also provide other services or software applications that may include non-virtual environments and virtual environments. In certain embodiments, these services may be provided as web-based services or cloud services, for example, provided to users of

client devices

101, 102, 103, 104, 105, and/or 106 under a software as a service (SaaS) model.

In the configuration shown in fig. 1, server 120 may include one or more components that implement the functions performed by server 120. These components may include software components, hardware components, or a combination thereof, which may be executed by one or more processors. A user operating a

client device

101, 102, 103, 104, 105, and/or 106 may, in turn, utilize one or more client applications to interact with the server 120 to take advantage of the services provided by these components. It should be understood that a variety of different system configurations are possible, which may differ from system 100. Accordingly, fig. 1 is one example of a system for implementing the various methods described herein and is not intended to be limiting.

The user may use

client devices

101, 102, 103, 104, 105, and/or 106 to send the updated component code. The client device may provide an interface that enables a user of the client device to interact with the client device. The client device may also output information to the user via the interface. Although fig. 1 depicts only six client devices, those skilled in the art will appreciate that any number of client devices may be supported by the present disclosure.

Client devices

101, 102, 103, 104, 105, and/or 106 may include various types of computer devices, such as portable handheld devices, general purpose computers (such as personal computers and laptops), workstation computers, wearable devices, smart screen devices, self-service terminal devices, service robots, gaming systems, thin clients, various messaging devices, sensors or other sensing devices, and so forth. These computer devices may run various types and versions of software applications and operating systems, such as MICROSOFT Windows, APPLE iOS, UNIX-like operating systems, Linux, or Linux-like operating systems (e.g., GOOGLE Chrome OS); or include various Mobile operating systems such as MICROSOFT Windows Mobile OS, iOS, Windows Phone, Android. Portable handheld devices may include cellular telephones, smart phones, tablets, Personal Digital Assistants (PDAs), and the like. Wearable devices may include head-mounted displays (such as smart glasses) and other devices. The gaming system may include a variety of handheld gaming devices, internet-enabled gaming devices, and the like. The client device is capable of executing a variety of different applications, such as various Internet-related applications, communication applications (e.g., email applications), Short Message Service (SMS) applications, and may use a variety of communication protocols.

Network 110 may be any type of network known to those skilled in the art that may support data communications using any of a variety of available protocols, including but not limited to TCP/IP, SNA, IPX, etc. By way of example only, one or more networks 110 may be a Local Area Network (LAN), an ethernet-based network, a token ring, a Wide Area Network (WAN), the internet, a virtual network, a Virtual Private Network (VPN), an intranet, an extranet, a Public Switched Telephone Network (PSTN), an infrared network, a wireless network (e.g., bluetooth, WIFI), and/or any combination of these and/or other networks.

The server 120 may include one or more general purpose computers, special purpose server computers (e.g., PC (personal computer) servers, UNIX servers, mid-end servers), blade servers, mainframe computers, server clusters, or any other suitable arrangement and/or combination. The server 120 may include one or more virtual machines running a virtual operating system, or other computing architecture involving virtualization (e.g., one or more flexible pools of logical storage that may be virtualized to maintain virtual storage for the server). In various embodiments, the server 120 may run one or more services or software applications that provide the functionality described below.

The computing units in server 120 may run one or more operating systems including any of the operating systems described above, as well as any commercially available server operating systems. The server 120 may also run any of a variety of additional server applications and/or middle tier applications, including HTTP servers, FTP servers, CGI servers, JAVA servers, database servers, and the like.

In some implementations, the server 120 may include one or more applications to analyze and consolidate data feeds and/or event updates received from users of the

client devices

101, 102, 103, 104, 105, and 106. Server 120 may also include one or more applications to display data feeds and/or real-time events via one or more display devices of

client devices

101, 102, 103, 104, 105, and 106.

In some embodiments, the server 120 may be a server of a distributed system, or a server incorporating a blockchain. The server 120 may also be a cloud server, or a smart cloud computing server or a smart cloud host with artificial intelligence technology. The cloud Server is a host product in a cloud computing service system, and is used for solving the defects of high management difficulty and weak service expansibility in the traditional physical host and Virtual Private Server (VPS) service.

The system 100 may also include one or more databases 130. In some embodiments, these databases may be used to store data and other information. For example, one or more of the databases 130 may be used to store information such as audio files and video files. The data store 130 may reside in various locations. For example, the data store used by the server 120 may be local to the server 120, or may be remote from the server 120 and may communicate with the server 120 via a network-based or dedicated connection. The data store 130 may be of different types. In certain embodiments, the data store used by the server 120 may be a database, such as a relational database. One or more of these databases may store, update, and retrieve data to and from the database in response to the command.

In some embodiments, one or more of the databases 130 may also be used by applications to store application data. The databases used by the application may be different types of databases, such as key-value stores, object stores, or regular stores supported by a file system.

The system 100 of fig. 1 may be configured and operated in various ways to enable application of the various methods and apparatus described in accordance with the present disclosure.

At present, hot update of an application page or a page component in a web page can be realized based on a Webpack application development tool. However, when the page components are updated based on the Webpack application development tool in a hot manner, the page components are automatically reloaded once by using the project file as an entry, and all the components involved in the project file are reloaded once, so that the larger the project file is, the lower the updating efficiency is.

According to an embodiment of the present disclosure, as shown in fig. 2, there is provided a method for updating a page component, the method including: step S201, responding to a running page component, obtaining a first component instance of the page component, wherein the page component comprises a hot update plug-in, the hot update plug-in comprises a registration function, and the registration function is used for recording a mapping relation between the page component and a corresponding component instance; step S202, recording a first mapping relation between a first component instance and a page component based on a registration function; and step S203, in response to detecting that the page component is updated, updating the first component instance based on the first mapping relation.

Therefore, the mapping relation between the page assembly and the page instance can be recorded, and when the assembly is updated, the instance corresponding to the assembly can be accurately found and correspondingly updated without updating the whole project file, so that the updating efficiency is improved.

The page components can comprise components developed based on various user interface frameworks such as Vue component framework, San component framework and the like, and the method provided by the embodiment of the disclosure can be applied to each page component to realize hot updating of the components.

According to some embodiments, the page component is developed based on a San component framework.

The San component framework is a component framework of an MVVM (Model-View-ViewModel). San supports binding instructions of data to views, branch instructions, loop instructions and the like which are most frequently used in service development, in addition to the syntactic characteristics of all native HTML through an declared HTML-like view template. A component is the basic unit of San, and is an encapsulation unit of independent data, logic and views. The San components are in a nestable tree-shaped relationship, the communication between component levels and the components is completely supported, and the data transfer between the components is facilitated. The San component has a complete lifecycle, which lifecycle is labeled by a corresponding lifecycle function, including:

1) and (4) compact: the assembly view template is compiled;

2) input: the initialization of the component instance is completed;

3) created: the creation of the component element is completed;

4) attached: the component has been attached to the page;

5) detached: the component is removed from the page; and

6) a deployed: the component uninstall is complete.

According to some embodiments, the hot update plug-in may be developed based on the Vite application development tool.

Compared with the Webpack application development tool, the Vite application development tool omits the packaging of Modules, and adopts an instant compiling mode for files needing compiling, such as Vue components, style Modules, San components and the like, so that the problems of overlong cold start time and slow hot update reaction speed of Webpack in the development stage are solved.

Taking the thermal update of a San component as an example, the thermal update component needs to be deployed in the San component first in the process of compiling the San file into the San component.

For a San document, the San document is first parsed to generate a Syntax Tree, such as an Abstract Syntax Tree (AST), so that the underlying language can be compiled. And acquiring a defineComponent function for defining the San component and an atteched life cycle function and a dateched life cycle function of the component by traversing the syntax tree, and injecting a registration function and a cancellation function in the atteched life cycle function and the dateched life cycle function respectively. The syntax tree is then parsed to generate its corresponding code, and hot update code is added to the code, followed by compilation to generate the San component with the hot update plug-ins deployed.

In some examples, if it is detected that the San component does not have the aforementioned attested lifecycle function and stepped lifecycle function, then the aforementioned two lifecycle functions need to be added to the component, and a registration function and a cancellation function are injected accordingly.

Wherein, the atteched life cycle function is used for mounting the component instance generated by the San component into the page when the page is loaded; accordingly, the stepped lifecycle function is used to destroy the component instance for deletion when the component instance is hidden or deleted in the page. The registration function is used for recording the mapping relation between the component instance and the corresponding component when a new component instance is generated by page loading and the like.

In some embodiments, the mapping relationship may be recorded in a mapping relationship list.

In some embodiments, a component identification may be generated for the San component based on the createRecord function provided in the hot update plug-in of the Vite, and the mapping between the component instance and the component may be recorded based on the component identification.

The log-out function is used for responding to the destruction and deletion of the component instance after the component instance is hidden, deleted in a page or replaced by an updated component instance, and simultaneously deleting the mapping relation information between the previously recorded component instance and the corresponding component, thereby avoiding some error reports which may occur.

In some embodiments, whether the San component is updated may be detected by a callback function, import. For example, when a developer re-edits the San file and clicks on saving, the callback function is triggered, and then each component instance is updated correspondingly according to the mapping relationship between the component and the component instance.

According to some embodiments, the hot update plugin may further include a reload function, and wherein the updating the first component instance includes: in response to detecting that the page component is updated, acquiring the first component instance to be updated based on the first mapping relation; acquiring a parent instance of the first component instance based on the reloading function, wherein the parent instance comprises relationship information between the first component instance and the parent instance; based on the reloading function, acquiring a second component instance to replace the first component instance; recording relationship information between the second component instance and the parent instance in the parent instance to replace the relationship information between the first component instance and the parent instance based on the reload function; and recording a second mapping relation between the second component instance and the page component based on the registration function.

Taking the hot update of the San component as an example, due to the characteristic of the nestable tree relationship specific to the San component, when the component instance corresponding to the San component is updated, the parent instance of the component instance needs to be obtained first.

In some embodiments, the parent instance of the component instance may be obtained through a reload function in the thermal update component.

In some embodiments, in response to the callback function being triggered, i.e., detecting that the San component is updated, the reload function is triggered by the callback function, and the updated San component is transmitted to the reload function. The reloading function firstly traverses the mapping relation list, obtains all component instances corresponding to the San component, and updates the component instances, that is, obtains the updated second component instance based on the updated San component to replace the first component instance before updating. Subsequently, a relationship needs to be established between the updated second component instance and its parent instance, that is, relationship information between the second component instance and the parent instance is recorded in the parent instance to replace the relationship information between the first component instance and the parent instance. The updated mapping relationship between the second component instance and the San component also needs to be recorded through the registration function.

Thus, based on the characteristics of the nestable tree relation specific to the component, the hot update of the component instance is completed based on the reloading function with the functions.

According to some embodiments, the hot update plug-in may further comprise a logoff function, and wherein the updating the first component instance further comprises: deleting the first component instance in response to the first component instance being replaced; and deleting the first mapping relation based on the logout function.

Taking the hot update of the San component as an example, after the first component instance is replaced, the first component instance needs to be destroyed and deleted through a stepped lifecycle function. Meanwhile, the mapping relation information between the first component instance and the San component also needs to be deleted through a logout function.

Therefore, after the component instance is destroyed, the mapping relation record between the component instance and the component is correspondingly deleted, so that error report caused by continuously updating the destroyed instances can be avoided when the component is updated every time.

According to some embodiments, as shown in fig. 3, there is also provided an updating apparatus 300 of a page component, including: the obtaining unit 310 is configured to obtain a first component instance of a page component in response to running the page component, where the page component includes a hot update plug-in, where the hot update plug-in includes a registration function, and the registration function is used to record a mapping relationship between the page component and a corresponding component instance; a recording unit 320 configured to record a first mapping relationship between the first component instance and the page component based on the registration function; and an updating unit 330 configured to update the first component instance based on the first mapping relationship in response to detecting that the page component is updated.

The operations of the units 310-330 of the page component updating apparatus 300 are similar to the operations of the steps S201-S203 of the page component updating method described above, and are not described herein again.

According to some embodiments, the hot update plugin may further include a reload function therein, and wherein the update unit may include: the first acquisition subunit is configured to, in response to detecting that the page component is updated, acquire a first component instance to be updated based on the first mapping relation; the second obtaining child unit is configured to obtain a parent instance of the first component instance based on the reloading function, wherein the parent instance comprises relationship information between the first component instance and the parent instance; a third obtaining subunit configured to obtain, based on the reload function, a second component instance to replace the first component instance; a first recording subunit configured to record, in the parent instance, relationship information between the second component instance and the parent instance to replace the relationship information between the first component instance and the parent instance, based on the reload function; and the second recording subunit is configured to record a second mapping relation between the second component instance and the page component based on the registration function.

According to some embodiments, the hot update plug-in may further include a logout function therein, and wherein the update unit may further include: a first deletion subunit configured to delete the first component instance in response to the first component instance being replaced; and a second deletion subunit configured to delete the first mapping relationship based on the cancellation function.

According to some embodiments, the page components may be developed based on the San component framework.

According to an embodiment of the present disclosure, there is also provided an electronic device, a readable storage medium, and a computer program product.

Referring to fig. 4, a block diagram of a structure of an electronic device 400, which may be a server or a client of the present disclosure, which is an example of a hardware device that may be applied to aspects of the present disclosure, will now be described. Electronic device is intended to represent various forms of digital electronic computer devices, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the disclosure described and/or claimed herein.

As shown in fig. 4, the apparatus 400 includes a computing unit 401 that can perform various appropriate actions and processes according to a computer program stored in a Read Only Memory (ROM)402 or a computer program loaded from a storage unit 408 into a Random Access Memory (RAM) 403. In the RAM 403, various programs and data required for the operation of the device 400 can also be stored. The computing unit 401, ROM 402, and RAM 403 are connected to each other via a bus 404. An input/output (I/O) interface 405 is also connected to bus 404.

A number of components in device 400 are connected to I/O interface 405, including: an input unit 406, an output unit 407, a storage unit 408, and a communication unit 409. The input unit 406 may be any type of device capable of inputting information to the device 400, and the input unit 406 may receive input numeric or character information and generate key signal inputs related to user settings and/or function controls of the electronic device, and may include, but is not limited to, a mouse, a keyboard, a touch screen, a track pad, a track ball, a joystick, a microphone, and/or a remote control. Output unit 407 may be any type of device capable of presenting information and may include, but is not limited to, a display, speakers, a video/audio output terminal, a vibrator, and/or a printer. Storage unit 408 may include, but is not limited to, magnetic or optical disks. The communication unit 409 allows the device 400 to exchange information/data with other devices via a computer network, such as the internet, and/or various telecommunications networks, and may include, but is not limited to, a modem, a network card, an infrared communication device, a wireless communication transceiver, and/or a chipset, such as bluetooth^TMDevices, 802.11 devices, WiFi devices, WiMax devices, cellular communication devices, and/or the like.

Computing unit 401 may be a variety of general and/or special purpose processing components with processing and computing capabilities. Some examples of the computing unit 401 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various dedicated Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, and so forth. The calculation unit 401 executes the respective methods and processes described above, such as the update method of the page component. For example, in some embodiments, the update method of the page component may be implemented as a computer software program tangibly embodied in a machine-readable medium, such as storage unit 408. In some embodiments, part or all of the computer program may be loaded and/or installed onto the device 400 via the ROM 402 and/or the communication unit 409. When the computer program is loaded into RAM 403 and executed by computing unit 401, one or more steps of the update method of the page component described above may be performed. Alternatively, in other embodiments, the computing unit 401 may be configured to perform the update method of the page component by any other suitable means (e.g., by means of firmware).

Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuitry, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), system on a chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.

Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes 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 codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. 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. A 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 a pointing device (e.g., a mouse or a 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 can 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, speech, or tactile input.

The systems and techniques described here can be implemented in a computing system that includes a back-end 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 back-end, 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 clients and servers. A client and server are generally 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 with a combined blockchain.

It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present disclosure may be performed in parallel, sequentially or in different orders, and are not limited herein as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved.

Although embodiments or examples of the present disclosure have been described with reference to the accompanying drawings, it is to be understood that the above-described methods, systems and apparatus are merely exemplary embodiments or examples and that the scope of the present invention is not limited by these embodiments or examples, but only by the claims as issued and their equivalents. Various elements in the embodiments or examples may be omitted or may be replaced with equivalents thereof. Further, the steps may be performed in an order different from that described in the present disclosure. Further, various elements in the embodiments or examples may be combined in various ways. It is important that as technology evolves, many of the elements described herein may be replaced with equivalent elements that appear after the present disclosure.

Claims

1. A method of updating a page component, the method comprising:

responding to the operation of the page component, acquiring a first component instance of the page component, wherein the page component comprises a hot update plug-in, the hot update plug-in comprises a registration function, and the registration function is used for recording the mapping relation between the page component and the corresponding component instance;

recording a first mapping relation between the first component instance and the page component based on the registration function; and

in response to detecting that the page component is updated, updating the first component instance based on the first mapping relationship.

2. The method of claim 1, wherein the hot update plug-in further comprises a reload function, and wherein the updating the first component instance comprises:

in response to detecting that the page component is updated, acquiring the first component instance to be updated based on the first mapping relation;

acquiring a parent instance of the first component instance based on the reloading function, wherein the parent instance comprises relationship information between the first component instance and the parent instance;

based on the reloading function, acquiring a second component instance to replace the first component instance;

recording relationship information between the second component instance and the parent instance in the parent instance to replace the relationship information between the first component instance and the parent instance based on the reload function; and

and recording a second mapping relation between the second component instance and the page component based on the registration function.

3. The method of claim 1 or 2, wherein the hot update plugin further includes a logoff function, and wherein the updating the first component instance further includes:

deleting the first component instance in response to the first component instance being replaced; and

and deleting the first mapping relation based on the logout function.

4. The method of any of claims 1-3, wherein the page component is developed based on a San component framework.

5. The method of any of claims 1-4, wherein the hot update plug-in is developed based on a Vite application development tool.

6. An apparatus for updating a page component, the apparatus comprising:

the obtaining unit is configured to obtain a first component instance of the page component in response to the page component being executed, wherein the page component comprises a hot update plug-in, wherein the hot update plug-in comprises a registration function, and the registration function is used for recording a mapping relation between the page component and a corresponding component instance;

a recording unit configured to record a first mapping relationship between the first component instance and the page component based on the registration function; and

an updating unit configured to update the first component instance based on the first mapping relationship in response to detecting that the page component is updated.

7. The apparatus of claim 6, wherein the hot update plug-in further comprises a reload function, and wherein the update unit comprises:

a first obtaining subunit, configured to, in response to detecting that the page component is updated, obtain the first component instance to be updated based on the first mapping relationship;

a second obtaining subunit, configured to obtain, based on the reload function, a parent instance of the first component instance, where the parent instance includes relationship information between the first component instance and the parent instance;

a third obtaining subunit configured to obtain, based on the reload function, a second component instance to replace the first component instance;

a first recording subunit configured to record, in the parent instance, relationship information between the second component instance and the parent instance to replace the relationship information between the first component instance and the parent instance, based on the reload function; and

a second recording subunit configured to record a second mapping relationship between the second component instance and the page component based on the registration function.

8. The apparatus of claim 6 or 7, wherein the hot update plug-in further comprises a logoff function, and wherein the update unit further comprises:

a first deletion subunit configured to delete the first component instance in response to the first component instance being replaced; and

a second deletion subunit configured to delete the first mapping relationship based on the cancellation function.

9. The apparatus of any of claims 6 to 8, wherein the page component is developed based on a San component framework.

10. The apparatus of any of claims 6 to 9, wherein the hot update plug-in is developed based on a Vite application development tool.

11. An electronic device, comprising:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein

The memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-5.

12. A non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of any one of claims 1-5.

13. A computer program product comprising a computer program, wherein the computer program realizes the method of any one of claims 1-5 when executed by a processor.