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

Abstract

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

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, in particular to the fields of cloud computing and page processing, and specifically to a page component updating method, device, electronic device, computer-readable storage medium, and computer program product. Background Art

[0002] Hot update is a common update method for page components. It allows developers to fix vulnerabilities and release features without releasing new versions.

[0003] The approaches described in this section are not necessarily approaches that have been previously conceived or employed. Unless otherwise indicated, it should not be assumed that any approach described in this section is prior art simply by virtue of its inclusion in this section. Similarly, unless otherwise indicated, the issues raised in this section should not be considered as having been recognized in any prior art. Summary of the Invention

[0004] The present disclosure provides a page component updating method, apparatus, electronic device, computer-readable storage medium, and computer program product.

[0005] According to one aspect of the present disclosure, a method for updating a page component is provided, comprising: obtaining a first component instance of the page component in response to running the page component, wherein the page component includes a hot update plug-in, wherein the hot update plug-in includes a registration function, wherein the registration function is used to record a mapping relationship between the page component and the corresponding component instance; based on the registration function, recording a first mapping relationship between the first component instance and the page component; and in response to detecting that the page component is updated, updating the first component instance based on the first mapping relationship.

[0006] According to another aspect of the present disclosure, an updating device for a page component is provided, comprising: an acquisition unit configured to acquire a first component instance of the page component in response to running the page component, wherein the page component includes a hot update plug-in, wherein the hot update plug-in includes a registration function, wherein the registration function is used to record a mapping relationship between the page component and the 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.

[0007] According to another aspect of the present disclosure, an electronic device is provided, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the above-mentioned page component update method.

[0008] According to another aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable a computer to execute the above-mentioned page component updating method.

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

[0010] According to one or more embodiments of the present 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 accordingly without updating the entire project file, thereby improving the efficiency of the update.

[0011] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] The accompanying drawings illustrate exemplary embodiments and constitute a part of the specification. Together with the description of the specification, they serve to explain exemplary implementation of the embodiments. The illustrated embodiments are for illustrative purposes only and do not limit the scope of the claims. Throughout the drawings, the same reference numerals designate similar, but not necessarily identical, elements.

[0013] Figure 1 A schematic diagram illustrating an exemplary system in which the various methods described herein may be implemented according to an embodiment of the present disclosure;

[0014] Figure 2 A flowchart of a method for updating a page component according to an embodiment of the present disclosure is shown;

[0015] Figure 3 A structural block diagram of a device for updating a page component according to an embodiment of the present disclosure is shown;

[0016] Figure 4 A structural block diagram of an exemplary electronic device that can be used to implement the embodiments of the present disclosure is shown. DETAILED DESCRIPTION

[0017] The following description of exemplary embodiments of the present disclosure is made in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be appreciated by those skilled in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

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

[0019] The terms used in the descriptions of the various examples described in this disclosure are for the purpose of describing specific examples only and are not intended to be limiting. Unless the context clearly indicates otherwise, if the number of elements is not specifically limited, the element may be one or more. In addition, the term "and / or" used in this disclosure encompasses any one and all possible combinations of the listed items.

[0020] The embodiments of the present disclosure will be described in detail below with reference to the accompanying drawings.

[0021] Figure 1 FIG2 is a schematic diagram of an exemplary system 100 in which the various methods and apparatuses described herein may be implemented according to an embodiment of the present disclosure. Figure 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. The client devices 101, 102, 103, 104, 105, and 106 can be configured to execute one or more applications.

[0022] In an embodiment of the present disclosure, the server 120 may run one or more services or software applications that enable execution of the update method of the page component.

[0023] In some embodiments, server 120 may also provide other services or software applications that may include non-virtualized environments and virtualized environments. In some embodiments, these services may be provided as web-based services or cloud services, such as provided to users of client devices 101, 102, 103, 104, 105, and / or 106 under a software as a service (SaaS) model.

[0024] exist Figure 1 In the configuration shown, the server 120 may include one or more components that implement the functions performed by the server 120. These components may include software components, hardware components, or a combination thereof that can be executed by one or more processors. Users operating client devices 101, 102, 103, 104, 105, and / or 106 may, in turn, utilize one or more client applications to interact with the server 120 to utilize the services provided by these components. It should be understood that a variety of different system configurations are possible, which may differ from the system 100. Therefore, Figure 1 is one example of a system for implementing the various methods described herein and is not intended to be limiting.

[0025] The user may use client devices 101, 102, 103, 104, 105, and / or 106 to send updated component code. The client device may provide an interface that enables the user of the client device to interact with the client device. The client device may also output information to the user via the interface. Figure 1 Only six client devices are depicted, but one skilled in the art will appreciate that the present disclosure can support any number of client devices.

[0026] 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, etc. 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 (such as Google Chrome OS); or include various mobile operating systems, such as Microsoft Windows Mobile OS, iOS, Windows Phone, and Android. Portable handheld devices may include cellular phones, smartphones, tablet computers, personal digital assistants (PDAs), etc. Wearable devices may include head-mounted displays (such as smart glasses) and other devices. Gaming systems may include various handheld gaming devices, internet-enabled gaming devices, etc. Client devices are capable of executing a variety of different applications, such as various internet-related applications, communication applications (such as email applications), and short message service (SMS) applications, and may use various communication protocols.

[0027] The network 110 may be any type of network known to those skilled in the art that can 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, the 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.

[0028] Server 120 may include one or more general-purpose computers, specialized server computers (e.g., PC (personal computer) servers, UNIX servers, mid-range servers), blade servers, mainframe computers, server clusters, or any other suitable arrangement and / or combination. Server 120 may include one or more virtual machines running virtual operating systems, or other computing architectures involving virtualization (e.g., one or more flexible pools of logical storage devices that may be virtualized to maintain a server's virtual storage device). In various embodiments, server 120 may run one or more services or software applications that provide the functionality described below.

[0029] The computing units in the 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.

[0030] In some implementations, server 120 may include one or more applications to analyze and consolidate data feeds and / or event updates received from users of client devices 101, 102, 103, 104, 105, and 106. Server 120 may also include one or more applications to display the data feeds and / or real-time events via one or more display devices of client devices 101, 102, 103, 104, 105, and 106.

[0031] In some embodiments, server 120 may be a distributed system server or a server integrated with blockchain. Server 120 may also be a cloud server, or an intelligent cloud computing server or intelligent cloud host equipped with artificial intelligence technology. A cloud server is a host product within the cloud computing service system that addresses the management difficulties and poor scalability of traditional physical hosts and virtual private servers (VPS) services.

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

[0033] 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 applications may be different types of databases, such as a key-value store, an object store, or a conventional store backed by a file system.

[0034] Figure 1 The system 100 may be configured and operated in various ways to enable application of the various methods and apparatuses described in accordance with the present disclosure.

[0035] Currently, hot updates for application pages or page components on web pages can be implemented using the Webpack application development tool. However, when hot updating page components using the Webpack application development tool, the project file is automatically reloaded, and all components involved in the project file are reloaded. Therefore, the larger the project file, the lower the update efficiency.

[0036] According to the embodiments of the present disclosure, Figure 2 As shown, a method for updating a page component is provided, the method comprising: step S201, in response to running the page component, obtaining a first component instance of the page component, wherein the page component includes a hot update plug-in, wherein the hot update plug-in includes a registration function, wherein the registration function is used to record a mapping relationship between the page component and the corresponding component instance; step S202, based on the registration function, recording a first mapping relationship between the first component instance and the page component; and step S203, in response to detecting that the page component is updated, updating the first component instance based on the first mapping relationship.

[0037] In this way, 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 accordingly without updating the entire project file, thereby improving the update efficiency.

[0038] Page components may include components developed based on various user interface frameworks such as the Vue component framework and the San component framework. The method provided by the embodiments of the present disclosure may be applied to each page component to achieve hot update of the component.

[0039] According to some embodiments, the page component is developed based on the San component framework.

[0040] The San component framework is an MVVM (Model-View-ViewModel) component framework. San uses declarative HTML-like view templates to support all the syntax features of native HTML, as well as data-to-view binding instructions, the most commonly used branches and loop instructions in business development. Components are the basic units of San and are independent encapsulation units of data, logic, and views. San components have a nested tree-like relationship that fully supports component hierarchies and communication between components, facilitating data flow between components. San components have a complete life cycle, which is marked by corresponding life cycle functions. The specific life cycle includes:

[0041] 1) compiled: The component view template is compiled;

[0042] 2) inited: component instance initialization is complete;

[0043] 3) created: the component element is created;

[0044] 4) attached: The component has been attached to the page;

[0045] 5) detached: The component is removed from the page; and

[0046] 6) disposed: Component uninstallation is complete.

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

[0048] The Vite application development tool is a web application development tool based on the ECMAScript standard native module system (ES Modules). Compared to the Webpack application development tool, the Vite application development tool omits module bundling. For files that need to be compiled, such as Vue components, style modules, and San components, Vite uses a just-in-time compilation mode, thus solving the problems of Webpack's long cold start time and slow hot update response during the development phase.

[0049] Taking the hot update of San components as an example, you first need to deploy the hot update component in the San component during the process of compiling the San file into the San component.

[0050] For a San file, the first step is to parse the San file and generate a syntax tree, such as an Abstract Syntax Tree (AST), so that it can be compiled by a lower-level language. By traversing the syntax tree, the defineComponent function used to define the San component and the attached lifecycle function and detached lifecycle function of the component are obtained, and the registration function and unregistration function are injected into the attached lifecycle function and detached lifecycle function respectively. Subsequently, the syntax tree is parsed to generate its corresponding code, and the hot update code is added to the code. After that, the compilation is completed to generate the San component with the hot update plug-in deployed.

[0051] In some examples, if it is detected that the San component does not have the above-mentioned attached lifecycle function and detached lifecycle function, it is necessary to add the above-mentioned two lifecycle functions to the component and inject the registration function and unregistration function accordingly.

[0052] The attached lifecycle function is used to attach the component instance generated by the San component to the page when the page is loaded; correspondingly, the detached lifecycle function is used to destroy and delete the component instance when it is hidden or deleted from the page. The registration function is used to record the mapping relationship between the component instance and its corresponding component when a new component instance is generated during page loading.

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

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

[0055] The deregistration function is used to respond to the destruction and deletion of the component instance after the component instance is hidden, deleted from the page, or replaced by an updated component instance, and at the same time delete the previously recorded mapping relationship information between the component instance and its corresponding component, thereby avoiding some possible errors.

[0056] In some embodiments, the callback function import.meta.hot.accept provided by the Vite-based hot update component can be used to detect whether the San component has been updated. For example, when a developer re-edits the San file and clicks Save, the callback function is triggered, and then the component instances are updated accordingly based on the mapping relationship between the above components and component instances.

[0057] According to some embodiments, the hot update plug-in may further include a reloading function, and wherein the updating of the first component instance includes: in response to detecting that the page component is updated, based on the first mapping relationship, obtaining the first component instance to be updated; based on the reloading function, obtaining the parent instance of the first component instance, wherein the parent instance includes the relationship information between the first component instance and the parent instance; based on the reloading function, obtaining a second component instance to replace the first component instance; based on the reloading function, recording the 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; and based on the registration function, recording the second mapping relationship between the second component instance and the page component.

[0058] Taking the hot update of San components as an example, due to the unique nested tree relationship characteristics of San components, when updating the component instance corresponding to the San component, it is necessary to first obtain the parent instance of the component instance.

[0059] In some embodiments, the parent instance of the above component instance can be obtained through a reload function in the hot update component.

[0060] In some embodiments, in response to the callback function import.meta.hot.accept being triggered, that is, detecting that the San component has been updated, the reloading function will be triggered through the callback function, and the updated San component will be transferred to the reloading function. The reloading function will first traverse the mapping relationship list, obtain all component instances corresponding to the San component, and update these component instances, that is, based on the updated San component, obtain the updated second component instance to replace the first component instance before the update. Subsequently, it is necessary to establish a relationship between the updated second component instance and its parent instance, that is, record the 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. The mapping relationship between the updated second component instance and the San component also needs to be recorded through the registration function.

[0061] Thus, based on the unique nested tree relationship characteristics of the component and the reloading function with the above functions, the hot update of the component instance is completed.

[0062] According to some embodiments, the hot update plug-in may further include a deregistration function, and wherein updating the first component instance further includes: deleting the first component instance in response to the first component instance being replaced; and deleting the first mapping relationship based on the deregistration function.

[0063] Taking the hot update of San component as an example, after the first component instance is replaced, the first component instance needs to be destroyed and deleted through the detached lifecycle function. At the same time, the mapping relationship information between the first component instance and the San component also needs to be deleted through the deregistration function.

[0064] Therefore, when a component instance is destroyed, the mapping relationship record between it and the component is deleted accordingly, thereby avoiding errors caused by constantly updating these destroyed instances each time the component is updated.

[0065] According to some embodiments, Figure 3 As shown, a device 300 for updating a page component is also provided, including: an acquisition unit 310, configured to acquire a first component instance of the page component in response to running the page component, wherein the page component includes a hot update plug-in, wherein the hot update plug-in includes a registration function, wherein the registration function is used to record a mapping relationship between the page component and the 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 update 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.

[0066] The operations of units 310 to 330 of the apparatus 300 for updating a page component are similar to the operations of steps S201 to S203 of the above-mentioned method for updating a page component, and are not described in detail here.

[0067] According to some embodiments, the hot update plug-in may further include a reloading function, and wherein the update unit may include: a first acquisition sub-unit, configured to acquire a first component instance to be updated based on a first mapping relationship in response to detecting that a page component is updated; a second acquisition sub-unit, configured to acquire a parent instance of the first component instance based on the reloading function, wherein the parent instance includes relationship information between the first component instance and the parent instance; a third acquisition sub-unit, configured to acquire a second component instance based on the reloading function to replace the first component instance; a first recording sub-unit, configured to record the relationship information between the second component instance and the parent instance in the parent instance based on the reloading function to replace the relationship information between the first component instance and the parent instance; and a second recording sub-unit, configured to record a second mapping relationship between the second component instance and the page component based on the registration function.

[0068] According to some embodiments, the hot update plug-in may further include a deregistration function, 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 deregistration function.

[0069] According to some embodiments, the page component may be developed based on a San component framework.

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

[0071] According to an embodiment of the present disclosure, an electronic device, a readable storage medium, and a computer program product are also provided.

[0072] refer to Figure 4, a block diagram of an electronic device 400 that can serve as a server or client of the present disclosure will now be described, which is an example of a hardware device that can be applied to various aspects of the present disclosure. The electronic device is intended to represent various forms of digital electronic computer devices, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can 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 merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0073] like Figure 4 As shown, the device 400 includes a computing unit 401, which 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. Various programs and data required for the operation of the device 400 can also be stored in the RAM 403. The computing unit 401, the ROM 402, and the RAM 403 are connected to each other via a bus 404. An input / output (I / O) interface 405 is also connected to the bus 404.

[0074] Multiple components in the device 400 are connected to the 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 can be any type of device that can input information to the device 400. The input unit 406 can receive input digital or character information, and generate key signal input related to user settings and / or function control of the electronic device, and can include but is not limited to a mouse, a keyboard, a touch screen, a trackpad, a trackball, a joystick, a microphone and / or a remote control. The output unit 407 can be any type of device that can present information, and can include but is not limited to a display, a speaker, a video / audio output terminal, a vibrator and / or a printer. The storage unit 408 can include but is not limited to a magnetic disk, an optical disk. 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 telecommunication networks, and can 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 TM devices, 802.11 devices, WiFi devices, WiMax devices, cellular communication devices, and / or the like.

[0075] The computing unit 401 can be a variety of general and / or special 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 that run machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The computing unit 401 performs the various methods and processes described above, such as the page component update method. For example, in some embodiments, the page component update method can be implemented as a computer software program that is tangibly contained in a machine-readable medium, such as the storage unit 408. In some embodiments, part or all of the computer program can be loaded and / or installed on the device 400 via the ROM 402 and / or the communication unit 409. When the computer program is loaded into the RAM 403 and executed by the computing unit 401, one or more steps of the page component update method described above can be performed. Alternatively, in other embodiments, the computing unit 401 can be configured to perform the page component update method in any other appropriate manner (e.g., by means of firmware).

[0076] Various embodiments of the systems and techniques described herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), system-on-chip systems (SOCs), programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include being implemented in one or more computer programs that are executable and / or interpreted on a programmable system that includes at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0077] The program code for implementing the method of the present disclosure can be written in any combination of one or more programming languages. These program codes can be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device so that when the program code is executed by the processor or controller, the functions / operations specified in the flow chart and / or block diagram are implemented. The program code can be executed entirely on the machine, partially on the machine, as a stand-alone software package, partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0078] In the context of the present disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in conjunction with an instruction execution system, device or equipment. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium can include an electrical connection based on one or more lines, a portable computer disk, 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 disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0079] To provide interaction with a user, the systems and techniques described herein 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 the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the 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 can be received in any form (including acoustic input, voice input, or tactile input).

[0080] The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, 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 a local area network (LAN), a wide area network (WAN), and the Internet.

[0081] A computer system may include a client and a server. The client and server are generally remote from each other and typically interact through a communication network. The client-server relationship arises through computer programs running on the respective computers and having a client-server relationship with each other. The server may be a cloud server, a server in a distributed system, or a server integrated with a blockchain.

[0082] It should be understood that the various forms of the processes shown above can be used to reorder, add, or delete steps. For example, the steps described in this disclosure can be performed in parallel, sequentially, or in a different order, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved. This is not limited herein.

[0083] Although the embodiments or examples of the present disclosure have been described with reference to the accompanying drawings, it should be understood that the above-mentioned methods, systems and devices are merely exemplary embodiments or examples, and the scope of the present invention is not limited by these embodiments or examples, but is only limited by the claims after authorization and their equivalents. Various elements in the embodiments or examples may be omitted or replaced by their equivalents. In addition, the steps may be performed in an order different from that described in this disclosure. Further, the 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 by equivalent elements that appear after this disclosure.

Claims

1. A method for updating a page component, the method comprising: In response to running the page component, a first component instance of the page component is obtained, wherein the page component is developed based on the San component framework, the page component includes a hot update plug-in, wherein the hot update plug-in is developed based on the Vite application development tool, and the hot update plug-in includes a registration function and a deregistration function, wherein the registration function and the deregistration function are respectively used to record and deregister the mapping relationship between the page component and the corresponding component instance. The deployment process of the hot update component includes: Parse the San file to generate a syntax tree; Traverse the syntax tree to obtain the attached lifecycle function and detached lifecycle function of the page component, where the attached lifecycle function is used to mount the component instance generated by the page component to the page when the page is loaded, and the detached lifecycle function is used to destroy and delete the component instance when the component instance is hidden or deleted from the page; Injecting the registration function and the deregistration function into the attached lifecycle function and the detached lifecycle function respectively to obtain the updated syntax tree; Parsing the updated syntax tree to generate page component code, and adding the hot update code to the page component code; and Compile the page component code after adding the hot update code to obtain the page component with the hot update plug-in deployed; Based on the registration function, recording a first mapping relationship between the first component instance and the page component; and In response to detecting that the page component is updated, the first component instance is updated based on the first mapping relationship.

2. The method according to claim 1, wherein The hot update plug-in further includes a reload function, and wherein updating the first component instance includes: In response to detecting that the page component is updated, obtaining the first component instance to be updated based on the first mapping relationship; Based on the reload function, obtaining a parent instance of the first component instance, wherein the parent instance includes relationship information between the first component instance and the parent instance; Based on the reload function, obtaining a second component instance to replace the first component instance; Based on the reload function, recording the 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; and Based on the registration function, a second mapping relationship between the second component instance and the page component is recorded.

3. The method according to claim 1 or 2, wherein Updating the first component instance further includes: In response to the first component instance being replaced, deleting the first component instance; and Based on the deregistration function, the first mapping relationship is deleted.

4. A device for updating a page component, the device comprising: An acquisition unit is configured to, in response to running the page component, acquire a first component instance of the page component, wherein the page component is developed based on the San component framework, the page component includes a hot update plug-in, wherein the hot update plug-in is developed based on the Vite application development tool, the hot update plug-in includes a registration function and a deregistration function, wherein the registration function and the deregistration function are respectively used to record and deregister the mapping relationship between the page component and the corresponding component instance, and the deployment process of the hot update component includes: Parse the San file to generate a syntax tree; Traverse the syntax tree to obtain the attached lifecycle function and detached lifecycle function of the page component, where the attached lifecycle function is used to mount the component instance generated by the page component to the page when the page is loaded, and the detached lifecycle function is used to destroy and delete the component instance when the component instance is hidden or deleted from the page; Injecting the registration function and the deregistration function into the attached lifecycle function and the detached lifecycle function respectively to obtain the updated syntax tree; Parsing the updated syntax tree to generate page component code, and adding the hot update code to the page component code; and Compile the page component code after adding the hot update code to obtain the page component with the hot update plug-in deployed; 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 is configured to update the first component instance based on the first mapping relationship in response to detecting that the page component is updated.

5. The device according to claim 4, wherein The hot update plug-in further includes a reload function, and wherein the update unit includes: A first acquiring subunit is configured to, in response to detecting that the page component is updated, acquire the first component instance to be updated based on the first mapping relationship; a second acquiring subunit, configured to acquire a parent instance of the first component instance based on the reloading function, wherein the parent instance includes relationship information between the first component instance and the parent instance; a third acquiring subunit, configured to acquire a second component instance based on the reloading function to replace the first component instance; a first recording subunit configured to record, in the parent instance, the relationship information between the second component instance and the parent instance based on the reloading function, to replace the relationship information between the first component instance and the parent instance; and The second recording subunit is configured to record a second mapping relationship between the second component instance and the page component based on the registration function.

6. The device according to claim 4 or 5, wherein The updating unit further includes: a first deleting subunit, configured to delete the first component instance in response to the first component instance being replaced; and The second deleting subunit is configured to delete the first mapping relationship based on the deregistration function.

7. An electronic device comprising: at least one processor; as well as a memory communicatively coupled to the at least one processor; in The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 3.

8. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to cause the computer to execute the method according to any one of claims 1-3.

9. A computer program product comprising a computer program, wherein When the computer program is executed by a processor, the method according to any one of claims 1 to 3 is implemented.

Images