Web front-end item upgrading method and related device

Abstract

The invention discloses a Web front-end project upgrading method and a related device, and relates to the field of Web front-end development, and the Web front-end project upgrading method comprises the following steps: determining the transformation granularity of an original project of a Web front end, and determining a new component to be added; adding a component configuration mode of the new component in a new project of the Web front end; the component configuration mode at least comprises a mounting point and a life cycle of the new component in the original project; adding a mapping relation between the new component and the unique path of the new component; and updating the original project according to the transformation granularity at least based on the mapping relationship and the component configuration mode. The Web front-end project is upgraded in a structured mode, controllability and the success rate of the upgrading process are ensured by defining transformation granularity, configuration management, path mapping and gradual updating, the method is particularly suitable for projects needing to introduce new functions while existing business operation is kept, and progressive transformation of the projects is achieved.

Description

Technical Field

[0001] The present application relates to the technical field of Web front-end development, and in particular to a Web front-end project upgrading method and related devices. Background Art

[0002] Web front-end refers to the part of the interface that users can interact with directly in web development, that is, the part that users see and interact with in the browser. It usually includes technologies such as HTML, CSS, and JavaScript, which work together to create and control the content, style, and behavior of web pages.

[0003] As time goes by, the original framework of the web front-end development project needs to be upgraded to use new technologies or frameworks. When the difference between the new technology / framework and the original technology / framework of the project is small, the project can be gradually transformed. However, if the difference between the new technology / framework and the original technology / framework of the project is large, it is more difficult to gradually transform the project.

[0004] Therefore, how to achieve gradual transformation of a project when the new technology / framework is significantly different from the original technology / framework of the project is still a technical problem that needs to be solved urgently in this field. Summary of the invention

[0005] In view of the above problems, this application provides a Web front-end project upgrade method and related devices to achieve the purpose of gradual transformation of the project. The specific plan is as follows:

[0006] The first aspect of the present application provides a method for upgrading a Web front-end project, comprising:

[0007] Determine the transformation granularity of the original Web front-end project and the new components to be added;

[0008] A component configuration method for adding the new component in a new project of a Web front end; the component configuration method at least includes: a mounting point and a life cycle of the new component in the original project;

[0009] Adding a mapping relationship between the new component and the unique path of the new component;

[0010] At least based on the mapping relationship and the component configuration mode, the original project is updated according to the transformation granularity.

[0011] In a possible implementation, before determining the transformation granularity of the original project of the Web front end, the method further includes:

[0012] Extracting CSS rules that meet basic style features from the original project, and constructing a basic style rule set based on the extracted CSS rules;

[0013] Setting a function interface for querying common configuration in the global scope of the original project, where the common configuration is the configuration that both the original project and the new project need to use;

[0014] The compiled resource file of the new project is introduced into the HTML code with global effect of the original project.

[0015] In a possible implementation, the component configuration method further includes:

[0016] The new component obtains the configuration of the shared attributes from the component integration device;

[0017] The new component updates the obtained global configuration to the configuration in the component integration device;

[0018] The new component queries the configuration of the global configuration from the component integration device;

[0019] The new component obtains the configuration of the routing service from the component integration device;

[0020] The CSS style used by the new component itself has a preset local scope configuration.

[0021] In a possible implementation, updating the original project according to the transformation granularity based at least on the mapping relationship and the component configuration mode includes:

[0022] Querying the new component based on a unique path of the new component;

[0023] The queried new component is mounted on the mounting point, and the new component is managed based on the life cycle.

[0024] In a possible implementation, the transformation granularity includes: control, module, and page.

[0025] A second aspect of the present application provides a Web front-end project upgrade device, comprising:

[0026] The granularity determination unit is used to determine the transformation granularity of the original project of the Web front end and determine the new components to be added;

[0027] A component adding unit, used for adding a component configuration mode of the new component in a new project of the Web front end; the component configuration mode at least includes: a mounting point and a life cycle of the new component in the original project;

[0028] A mapping unit, used for adding a mapping relationship between the new component and the unique path of the new component;

[0029] An updating unit is used to update the original project according to the transformation granularity based on at least the mapping relationship and the component configuration mode.

[0030] In a possible implementation, the method further includes:

[0031] An extraction unit, configured to extract CSS rules that meet basic style features from the original project before the granularity determination unit determines the transformation granularity of the original project of the Web front end, and construct a basic style rule set based on the extracted CSS rules;

[0032] An interface setting unit, used to set a function interface for querying a common configuration in the global scope of the original project, where the common configuration is a configuration that both the original project and the new project need to use;

[0033] The introduction unit is used to introduce the compiled resource file of the new project into the HTML code with global effect of the original project.

[0034] The third aspect of the present application provides a computer program product, including computer-readable instructions. When the computer-readable instructions are executed on an electronic device, the electronic device implements the Web front-end project upgrade method of the first aspect or any implementation of the first aspect.

[0035] A fourth aspect of the present application provides an electronic device, comprising at least one processor and a memory connected to the processor, wherein:

[0036] The memory is used to store computer programs;

[0037] The processor is used to execute the computer program so that the electronic device can implement the Web front-end project upgrading method of the above-mentioned first aspect or any implementation method of the first aspect.

[0038] In a fifth aspect, the present application provides a computer storage medium, which carries one or more computer programs. When the one or more computer programs are executed by an electronic device, the electronic device can use the Web front-end project upgrade method of the above-mentioned first aspect or any implementation of the first aspect.

[0039] By means of the above technical scheme, the Web front-end project upgrade method and related devices provided by the present application can determine the transformation granularity of the original project of the Web front-end, determine the new components to be added; add the component configuration method of the new component in the new project of the Web front-end; the component configuration method at least includes: the mounting point and life cycle of the new component in the original project; add the mapping relationship between the new component and the unique path of the new component; at least based on the mapping relationship and the component configuration method, update the original project according to the transformation granularity. The present application provides a structured way to upgrade Web front-end projects. By clarifying the transformation granularity, configuration management, path mapping and gradual updating, the controllability and success rate of the upgrade process are ensured. It is particularly suitable for projects that need to introduce new functions while keeping existing businesses running, and realizes the gradual transformation of the project. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] The above and other features, advantages and aspects of the embodiments of the present disclosure will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. Throughout the accompanying drawings, the same or similar reference numerals represent the same or similar elements. It should be understood that the drawings are schematic and the originals and elements are not necessarily drawn to scale.

[0041] Figure 1 A schematic diagram of a system architecture provided for this application;

[0042] Figure 2 A schematic diagram of an optional hardware structure of a terminal provided in this application;

[0043] Figure 3 A schematic diagram of the structure of the server provided for this application;

[0044] Figure 4 A flowchart of a Web front-end project upgrade method provided in an embodiment of the present application;

[0045] Figure 5 A flowchart of another method for upgrading a Web front-end project provided in an embodiment of the present application;

[0046] Figure 6 A schematic diagram of the structure of a component integration device provided in an embodiment of the present application;

[0047] Figure 7 A schematic diagram of the structure of a Web front-end project upgrade device provided in an embodiment of the present application;

[0048] Figure 8 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0049] The following describes the embodiments of the present application in conjunction with the drawings in the embodiments of the present application. The terms used in the implementation method section of the present application are only used to explain the specific embodiments of the present application, and are not intended to limit the present application.

[0050] The embodiments of the present application are described below in conjunction with the accompanying drawings. Those skilled in the art will appreciate that, with the development of technology and the emergence of new scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0051] The terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and need not be used to describe a specific order or sequential order. It should be understood that the terms used in this way can be interchangeable under appropriate circumstances, which is only to describe the distinction mode adopted by the objects of the same attributes when describing in the embodiments of the present application. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, so that the process, method, system, product or equipment comprising a series of units need not be limited to those units, but may include other units that are not clearly listed or inherent to these processes, methods, products or equipment.

[0052] See also Figure 1 , Figure 1 A schematic diagram of a system architecture is shown. The system may include a terminal 100 and a server 200. The server 200 may include one or more servers ( Figure 1 In the example, a server is included, and the server 200 can provide the method provided in the embodiment of the present application for one or more terminals.

[0053] Among them, a Web front-end development application can be installed on the terminal 100. The above application and web page can provide an interface. The terminal 100 can receive relevant parameters entered by the user on the interface and send the above parameters to the server 200. The server 200 can obtain processing results based on the received parameters and return the processing results to the terminal 100.

[0054] It should be understood that in some optional implementations, the terminal 100 can also complete the action of obtaining the processing result based on the received parameters by itself without the cooperation of the server, and the embodiments of the present application are not limited to this.

[0055] Next describe Figure 1 The product form of the mid-terminal 100;

[0056] The terminal 100 in the embodiment of the present application can be a mobile phone, a tablet computer, a wearable device, a vehicle-mounted device, an augmented reality (AR) / virtual reality (VR) device, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), etc., and the embodiment of the present application does not impose any limitation on this.

[0057] Figure 2 An optional hardware structure diagram of the terminal 100 is shown.

[0058] refer to Figure 2 As shown, the terminal 100 may include a radio frequency unit 110, a memory 120, an input unit 130, a display unit 140, a camera 150 (optional), an audio circuit 160 (optional), a speaker 161 (optional), a microphone 162 (optional), an earphone jack 163 (optional), a processor 170, an external interface 180, a power supply 190 and other components. Those skilled in the art will appreciate that Figure 2 These are merely examples of terminals or multi-function devices and do not constitute limitations on the terminals or multi-function devices, which may include more or fewer components than those shown in the figures, or combinations of certain components, or different components.

[0059] The input unit 130 can be used to receive input digital or character information, and generate key signal input related to the user settings and function control of the portable multifunctional device. Specifically, the input unit 130 may include a touch screen 131 (optional) and / or other input devices 132. The touch screen 131 can collect the user's touch operations on or near it (such as the user's operation on or near the touch screen using any suitable object such as fingers, joints, stylus, etc.), and drive the corresponding connection device according to a pre-set program. The touch screen can detect the user's touch action on the touch screen, convert the touch action into a touch signal and send it to the processor 170, and can receive and execute the command sent by the processor 170; the touch signal at least includes the touch point coordinate information. The touch screen 131 can provide an input interface and an output interface between the terminal 100 and the user. In addition, the touch screen can be implemented using multiple types such as resistive, capacitive, infrared and surface acoustic wave. In addition to the touch screen 131, the input unit 130 can also include other input devices. Specifically, other input devices 132 may include, but are not limited to, one or more of a physical keyboard, function keys (such as a volume control key, a switch key, etc.), a trackball, a mouse, a joystick, and the like.

[0060] Among them, the input device 132 can receive input data and the like.

[0061] The display unit 140 may be used to display information input by the user or provided to the user, various menus of the terminal 100, interactive interfaces, file display and / or playback of any multimedia file. In the embodiment of the present application, the display unit 140 may be used to display interfaces, processing results, etc.

[0062] The memory 120 can be used to store instructions and data. The memory 120 can mainly include an instruction storage area and a data storage area. The data storage area can store various data, such as multimedia files, texts, etc.; the instruction storage area can store software units such as operating systems, applications, instructions required for at least one function, or their subsets and extensions. It can also include a non-volatile random access memory; provide the processor 170 with hardware, software and data resources including management of computing and processing equipment, and support control software and applications. It is also used for the storage of multimedia files, and the storage of running programs and applications.

[0063] The processor 170 is the control center of the terminal 100. It uses various interfaces and lines to connect various parts of the entire terminal 100. By running or executing instructions stored in the memory 120 and calling data stored in the memory 120, it executes various functions of the terminal 100 and processes data, thereby controlling the terminal device as a whole. Optionally, the processor 170 may include one or more processing units; preferably, the processor 170 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface and application program, and the modem processor mainly processes wireless communication. It is understandable that the above-mentioned modem processor may not be integrated into the processor 170. In some embodiments, the processor and the memory may be implemented on a single chip, and in some embodiments, they may also be implemented separately on separate chips. The processor 170 may also be used to generate corresponding operation control signals, send them to corresponding components of the computing and processing device, read and process data in the software, especially read and process data and programs in the memory 120, so that each functional module therein performs corresponding functions, thereby controlling the corresponding components to act according to the requirements of the instructions.

[0064] Among them, the memory 120 can be used to store software codes related to the Web front-end project upgrade method, the processor 170 can execute the steps of the Web front-end project upgrade method, and can also schedule other units (such as the above-mentioned input unit 130 and display unit 140) to achieve corresponding functions.

[0065] The radio frequency unit 110 (optional) can be used for receiving and sending information or receiving and sending signals during a call, for example, after receiving the downlink information of the base station, it is sent to the processor 170 for processing; in addition, the designed uplink data is sent to the base station. Generally, the RF circuit includes but is not limited to an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier (Low Noise Amplifier, LNA), a duplexer, etc. In addition, the radio frequency unit 110 can also communicate with network devices and other devices through wireless communication. The wireless communication can use any communication standard or protocol, including but not limited to Global System of Mobile communication (Global System of Mobile communication, GSM), General Packet Radio Service (General Packet Radio Service, GPRS), Code Division Multiple Access (Code Division Multiple Access, CDMA), Wideband Code Division Multiple Access (Wideband Code Division Multiple Access, WCDMA), Long Term Evolution (Long Term Evolution, LTE), email, Short Messaging Service (SMS), etc.

[0066] In this embodiment of the present application, the RF unit 110 can send data to the server 200 and receive processing results sent by the server 200.

[0067] It should be understood that the radio frequency unit 110 is optional and can be replaced by other communication interfaces, such as a network port.

[0068] The terminal 100 also includes a power supply 190 (such as a battery) for supplying power to various components. Preferably, the power supply can be logically connected to the processor 170 through a power management system, so that the power management system can manage functions such as charging, discharging, and power consumption.

[0069] The terminal 100 further includes an external interface 180 , which may be a standard Micro USB interface or a multi-pin connector, and may be used to connect the terminal 100 to communicate with other devices, or to connect a charger to charge the terminal 100 .

[0070] Although not shown, the terminal 100 may also include a flashlight, a wireless fidelity (WiFi) module, a Bluetooth module, sensors with different functions, etc., which are not described in detail here. Some or all of the methods described below may be applied in the following embodiments. Figure 2 In the terminal 100 shown.

[0071] Next describe Figure 1 The product form of the server 200;

[0072] Figure 3 A schematic diagram of the structure of a server 200 is provided, such as Figure 3 As shown, the server 200 includes a bus 201, a processor 202, a communication interface 203, and a memory 204. The processor 202, the memory 204, and the communication interface 203 communicate with each other via the bus 201.

[0073] The bus 201 may be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 3 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0074] The processor 202 may be any one or more of a central processing unit (CPU), a graphics processing unit (GPU), a microprocessor (MP), or a digital signal processor (DSP).

[0075] The memory 204 may include a volatile memory, such as a random access memory (RAM). The memory 204 may also include a non-volatile memory, such as a read-only memory (ROM), a flash memory, a hard disk drive (HDD), or a solid state drive (SSD).

[0076] Among them, the memory 204 can be used to store software codes related to the Web front-end project upgrade method, the processor 202 can execute the steps of the Web front-end project upgrade method of the chip, and can also schedule other units to implement corresponding functions.

[0077] It should be understood that the above-mentioned terminal 100 and server 200 can be centralized or distributed devices, and the processors in the above-mentioned terminal 100 and server 200 (such as processor 170 and processor 202) can be hardware circuits (such as application specific integrated circuit (ASIC), field-programmable gate array (FPGA), general-purpose processor, digital signal processor (DSP), microprocessor or microcontroller, etc.), or a combination of these hardware circuits. For example, the processor can be a hardware system with an instruction execution function, such as a CPU, DSP, etc., or a hardware system without an instruction execution function, such as an ASIC, FPGA, etc., or a combination of the above-mentioned hardware systems without an instruction execution function and hardware systems with an instruction execution function.

[0078] In order to solve the above problems, the embodiment of the present application provides a method for upgrading a Web front-end project. The Web front-end project upgrading method of the embodiment of the present application is described in detail below with reference to the accompanying drawings.

[0079] Reference Figure 4 , Figure 4 A schematic diagram of a Web front-end project upgrade method provided in an embodiment of the present application is shown in FIG. Figure 4 As shown, a data processing method provided in an embodiment of the present application may include steps 401 to 404, and these steps are described in detail below.

[0080] 401. Determine the transformation granularity of the original project of the Web front-end and determine the new components to be added.

[0081] Among them, the transformation granularity can include: control, module, and page. They are described below respectively:

[0082] A page is a complete screen view that a user sees in a browser, usually corresponding to a URL. A page contains HTML, CSS, and JavaScript code that define content, style, and behavior. A page can contain multiple controls and modules that work together to display information and provide functionality. In a single-page application (SPA), pages may be loaded dynamically through routing instead of refreshing the entire page.

[0083] A control is the smallest reusable part of a page, used to encapsulate specific functionality or display logic. A control can be a simple UI element (such as a button or input box) or a complex layout (such as a sidebar or navigation bar). A control usually has its own state and props, and can receive events. In modern front-end frameworks (such as React, Vue, and Angular), controls are the basic units for building applications.

[0084] Module is a component of the page. It is a logical and engineering division of the entire page function and contains one or more complete groups of functions.

[0085] Regardless of the granularity of the content in the original project, each modified area is carried out in the form of a single new component. For example: when modifying a page, the page includes multiple modules and controls, but the final modification is to treat the entire page as a whole, and the required reprogramming work will eventually produce a single new component. After determining the modification granularity, this application can update the new components that need to be added to the original project according to the modification granularity, thereby performing a gradual upgrade of the Web front-end project.

[0086] The new component to be added is the area involved in a transformation in a progressive upgrade, which can be a control, a module, or a page.

[0087] Step 401 can determine the specific parts and extents that need to be modified, and clarify which new components will be added to the original project.

[0088] 402. Add a component configuration method of the new component in a new project of a Web front end; the component configuration method at least includes: a mounting point and a life cycle of the new component in the original project.

[0089] Optionally, after adding the mount point and life cycle of the new component in the new project of the Web front end, the developed new component can be mounted to the mount point and the life cycle can be set for it, so that the new component can exist in the original project.

[0090] In Web front-end development, the mount point of a component refers to the specific location where the component is inserted or mounted in the Document Object Model (DOM) tree.

[0091] In Web front-end development, the component lifecycle refers to the entire process from component creation to destruction, including various stages such as component initialization, update, and destruction. Front-end frameworks with components as basic elements generally provide some functions called when components are created, rendered, and destroyed for developers to use. These functions are called lifecycle hooks.

[0092] Optionally, the present application can render stable page elements by modifying the code of the original project at the location where the component needs to be replaced, and call the mounting method provided by the component integration device after the element is rendered, and provide the unique non-repetitive ID of the element and the unique path of the new component to replace the original component. Before the element is uninstalled, call the uninstall method provided by the component integration device. Except for page reloading, the element is rendered before the code of the original project calls the mounting method; the element continues to exist before the code of the original project calls the uninstall method.

[0093] Through the unique path of the new component, the new component can be called and then mounted at the location where the component needs to be replaced, that is, the mount point.

[0094] Step 402 can define the configuration method for the new component, including the mount point and life cycle, to ensure that the new component can be correctly integrated into the original project. At the same time, by defining the life cycle of the new component, the creation, update and destruction process of the component can be managed, which is crucial for performance optimization and resource management. Step 402 can also clarify the specific mount location of the new component in the original project, which helps to keep the page structure clear and the component correctly rendered.

[0095] 403. Add a mapping relationship between the new component and the unique path of the new component.

[0096] Step 403 may establish a mapping relationship between the new component and the unique path, which helps to correctly route and access the new component in the Web application. Through the mapping relationship, it can be ensured that the user request can be correctly directed to the corresponding new component, which is particularly important for single-page applications (SPA).

[0097] 404. At least based on the mapping relationship and the component configuration method, update the original project according to the transformation granularity.

[0098] Step 404 can update the original project according to the predetermined transformation granularity based on the mapping relationship and component configuration mode, which helps to gradually introduce new functions and improvements while reducing the impact on existing functions. This method allows the original project to gradually transition to the new version without interrupting service, which is crucial to maintaining user experience and business continuity. At the same time, by controlling the transformation granularity, it is possible to flexibly handle upgrades of different parts, from small local updates to comprehensive reconstruction.

[0099] Optionally, step 404 may include:

[0100] Querying the new component based on a unique path of the new component;

[0101] The queried new component is mounted on the mounting point, and the new component is managed based on the life cycle.

[0102] After the new component is mounted on the mounting point and the new component is managed based on the life cycle, the new component can be added to the original project to replace the original component, thereby realizing the gradual transformation of the original project.

[0103] In actual application, steps 401 to 404 can be performed multiple times, that is, once for each object that needs to be transformed. Figure 4 The method shown.

[0104] like Figure 5 As shown, a Web front-end project upgrade method provided by an embodiment of the present invention may further include, before step 401:

[0105] 501. Extract CSS rules that meet basic style features from the original project, and construct a basic style rule set based on the extracted CSS rules.

[0106] Specifically, CSS rules with the following two characteristics can be extracted from the original project:

[0107] 1. Global styles that are not related to class names;

[0108] 2. Styles with class names that are commonly used in the original project.

[0109] The extracted CSS rule set can be called the base style, and the new project is affected by these base styles by default. The remaining CSS rules of the original project should not contain any global styles that are not related to the class name. At the same time, a unique class name prefix should be used in the new project to distinguish it from the CSS rules of the original project to avoid any conflicts.

[0110] By extracting global and commonly used styles as base styles, you can ensure that components in new projects will not conflict when inheriting these styles. New projects are affected by these base styles by default, which helps maintain visual and interactive consistency between the original project and the new project. By standardizing CSS, it is easier to manage and maintain code, especially in large projects. Using unique class name prefixes in new projects can limit the scope of style changes and avoid affecting other parts of the original project.

[0111] 502. A function interface for querying a common configuration is set in the global scope of the original project. The common configuration is a configuration that both the original project and the new project need to use.

[0112] By providing an interface for the component integration device to query and use, it can be ensured that the configuration information shared between the original project and the new project is consistent. At the same time, it can also avoid repeating the same configuration information in two projects and reduce code redundancy. When the configuration information needs to be updated, it only needs to be updated in one place, and all components that rely on the configuration will be automatically updated, which improves the flexibility of the project. Of course, step 502 also realizes centralized management of configuration information, making the project configuration clearer and easier to understand and manage.

[0113] The above function interface can be used by the component integration device for query. The component integration device mainly plays a role when the page is running. It exists in the new project in the form of a third-party library and provides a global interface for both the original project and the new project. The structure of the component integration device can be as follows Figure 6 As shown. The following describes each unit included in the component integration device:

[0114] Instance creation unit: includes a mapping table from component paths to components (i.e. Figure 6 ). Its main functions are: accepting the unique ID of the element, the initialization properties and listening function of the component, and the path of the component, and creating an instance of the corresponding component according to the path, properties and listening function. After the creation is completed, the instance is modified using the component decorator according to the general steps pre-defined by the developer, and then passed to the instance storage unit.

[0115] Instance storage unit: The instance created by the instance creation unit is delivered to this unit and temporarily stored in the instance storage. This unit provides two methods: mount and unmount. After the rendering of the mount point provided by the original project is closed (completed), the code of the original project calls the mount method, and this unit mounts the instance to the corresponding element; before the original project prepares to clean up the mount point, it should call the unmount method provided by this unit and give the unique non-repetitive ID of the element, and this unit will then unmount and delete the corresponding instance. Describes a process of mounting a created instance to the mount point of the original project, and when this mount point is no longer in use, the mounted instance needs to be unmounted first.

[0116] State management unit: responsible for initializing global state management and injecting centralized state management objects into each instance so that these instances can access the global state managed within the unit. Centralized means that the state values ​​used by all instances are processed in one state management object. Each global state is stored in the state memory.

[0117] Routing management unit: provides a page jump mechanism for routing objects and a routing switching method. If there is no routing on the page, notify the original project to perform the corresponding page content switching operation; if there is routing on the page but the routing is managed by the original project, notify the original project to perform the routing switching operation; if there is routing on the page and the routing is managed by the new project, the routing management module is saved internally in this unit and injected into each instance. When the component uses the routing switching method provided by this unit, it directly operates the internal routing management module.

[0118] Basic configuration management unit: responsible for the management of the overall configuration information of the project, that is, obtaining basic configuration information from the original project and then providing an interface for the new project to query; or obtaining global configuration information from the internal components of the new project and passing it to the original project for synchronization. The basic configuration is stored in the configuration storage.

[0119] 503. Introduce the compiled resource file of the new project into the HTML code with global effect of the original project.

[0120] Compiled resource files can be JavaScript files, CSS files, etc.

[0121] By introducing the resource files (such as JavaScript and CSS files) of the new project into the original project, the functions of the new project can be used by the original project, allowing the original project to expand its functions and features by introducing the resources of the new project. By properly introducing resource files, the page loading performance can be optimized, such as by on-demand loading or code splitting. Step 503 can make the deployment of the new project and the deployment of the original project more closely integrated, simplifying the deployment process.

[0122] Through steps 501 to 503, the present application can smoothly integrate the new project into the original project while maintaining the style consistency, configuration sharing and resource optimization of the two projects, which helps to ensure the compatibility and collaborative work between the new and old projects.

[0123] In an optional embodiment of the present invention, the component configuration method further includes:

[0124] The new component obtains the configuration of the shared attributes from the component integration device;

[0125] The new component updates the obtained global configuration to the configuration in the component integration device;

[0126] The new component queries the configuration of the global configuration from the component integration device;

[0127] The new component obtains the configuration of the routing service from the component integration device;

[0128] The CSS style used by the new component itself has a preset local scope configuration.

[0129] The new component obtains the configuration of shared attributes from the component integration device, and can convert the shared attributes obtained by the component from the outside into those obtained from the centralized state management, and use the centralized state management for the states that are managed internally by the component but need to be shared.

[0130] The new component updates the obtained global configuration to the configuration in the component integration device, and the component itself can update the global configuration obtained by querying the API interface or other means to the component integration device.

[0131] The configuration of the new component querying the global configuration from the component integration device may cause the global configuration referenced by the component to be queried from the component integration device.

[0132] Regarding the configuration of the new component obtaining the routing service from the component integration device, routing is generally used to organize pages in modern front-end frameworks. However, in the process of progressive transformation, there may be cases where routing does not exist or the routing is controlled by the original project. Therefore, it is necessary to uniformly forward the component's modification of routing to the routing unit of the component integration device, and the component integration device will coordinate the page routing.

[0133] The configuration that the CSS styles used by the new component itself have a preset local scope can ensure that the CSS styles used by the component itself have a local scope. This can be achieved by adding a CSS class name prefix.

[0134] The above component configuration methods play a vital role in Web front-end development, especially in controllable and modular architecture. These configuration methods ensure the correct integration, functional implementation and style isolation of components. These component configuration methods work together to ensure the independence, maintainability and extensibility of components. They enable components to be flexibly integrated into different projects while maintaining consistency in style and behavior. By centrally managing configuration and routing, project maintenance and functional expansion can be easier.

[0135] Here is what the above component configuration does:

[0136] New components obtain configuration of shared properties from component integration devices: Allow new components to access and use shared properties defined in component integration devices. This helps to achieve centralized management and reuse of properties, reduce code redundancy, and maintain consistency of property values.

[0137] The new component updates the obtained global configuration to the configuration in the component integration device: When the new component has new global configuration information, it can be updated to the component integration device to ensure that all components that rely on these configurations can access the latest configuration information. This helps maintain the uniformity and real-time update of configurations.

[0138] New components can query global configuration from component integration devices: New components can obtain the required global configuration through query interfaces instead of hard-coding configuration information. This improves the flexibility and maintainability of configuration because configuration changes only need to be made in one place.

[0139] New components get the routing service configuration from the component integration device: By getting the routing service configuration from the component integration device, the new component can correctly handle routing logic, such as page jumps and parameter passing. This helps keep the routing logic centrally managed and consistent, especially in single-page applications (SPA).

[0140] The CSS styles used by the new component itself have a preset local scope configuration: Make sure the styles of the new component have a local scope to avoid affecting other components or global styles. This is achieved by using naming methods such as CSS Modules, BEM (BlockElement Modifier), or the scoped feature of preprocessors. Locally scoped styles help reduce style conflicts and improve style maintainability.

[0141] The present invention has at least the following advantages:

[0142] The present invention allows the original project to be upgraded and renovated with different granularities such as controls, modules or pages, so the renovation granularity is flexible and controllable, the update scope and scale of each batch can be adjusted accordingly, and the stability of the overall operation of the project can also be flexibly controlled.

[0143] The present invention requires less modification to the original project and has lower requirements. Component mounting only requires the original project to provide stable page elements (i.e., mounting points) and two lifecycle hook functions. The transformation solution based on micro-frontends requires major adjustments to the original project. Therefore, this project can achieve wider applicability at a lower cost and can also be applied to various front-end frameworks.

[0144] The present invention is based on a centralized state management design and simultaneously handles common requirements in the progressive migration process such as routing and configuration query. It can more conveniently realize data sharing and component interaction, and integrate components with the original project, with lower transformation costs than other solutions.

[0145] The above introduces a Web front-end project upgrade method provided by an embodiment of the present application. The following will introduce a device for executing the above-mentioned Web front-end project upgrade method.

[0146] See also Figure 7 , Figure 7 A schematic diagram of a Web front-end project upgrade device provided in an embodiment of the present application. Figure 7 As shown, the Web front-end project upgrading device includes:

[0147] A granularity determination unit 701 is used to determine the transformation granularity of the original project of the Web front end and determine the new components to be added;

[0148] A component adding unit 702 is used to add a component configuration mode of the new component in a new project of a Web front end; the component configuration mode at least includes: a mounting point and a life cycle of the new component in the original project;

[0149] A mapping unit 703, configured to add a mapping relationship between the new component and the unique path of the new component;

[0150] The updating unit 704 is used to update the original project according to the transformation granularity based on at least the mapping relationship and the component configuration mode.

[0151] Optionally, the Web front-end project upgrading device further includes:

[0152] An extraction unit, configured to extract CSS rules that meet basic style features from the original project before the granularity determination unit determines the transformation granularity of the original project of the Web front end, and construct a basic style rule set based on the extracted CSS rules;

[0153] An interface setting unit, used to set a function interface for querying a common configuration in the global scope of the original project, where the common configuration is a configuration that both the original project and the new project need to use;

[0154] The introduction unit is used to introduce the compiled resource file of the new project into the HTML code with global effect of the original project.

[0155] Optionally, the component configuration method further includes:

[0156] The new component obtains the configuration of the shared attributes from the component integration device;

[0157] The new component updates the obtained global configuration to the configuration in the component integration device;

[0158] The new component queries the configuration of the global configuration from the component integration device;

[0159] The new component obtains the configuration of the routing service from the component integration device;

[0160] The CSS style used by the new component itself has a preset local scope configuration.

[0161] Optionally, the updating unit is specifically configured as:

[0162] The new component is queried based on the unique path of the new component; the queried new component is mounted on the mounting point, and the new component is managed based on the life cycle.

[0163] Optionally, the transformation granularity includes: controls, modules, and pages.

[0164] This application provides a structured way to upgrade Web front-end projects. By clarifying the transformation granularity, configuration management, path mapping and gradual updates, it ensures the controllability and success rate of the upgrade process. It is particularly suitable for projects that need to introduce new features while keeping existing businesses running, and realizes the gradual transformation of the project.

[0165] The present application also provides an electronic device in an embodiment. Figure 8 As shown, it shows a schematic diagram of the structure of an electronic device suitable for implementing the embodiment of the present application. The electronic device in the embodiment of the present application may include but is not limited to fixed terminals such as mobile phones, laptops, PDAs (personal digital assistants), PADs (tablet computers), desktop computers, etc. Figure 8 The electronic device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0166] like Figure 8 As shown, the electronic device may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage device 608 to a random access memory (RAM) 603. When the electronic device is powered on, various programs and data required for the operation of the electronic device are also stored in the RAM 603. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0167] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touch pad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a memory card, a hard disk, etc.; and a communication device 609. The communication device 609 may allow the electronic device to communicate with other devices wirelessly or by wire to exchange data. Although Figure 8An electronic device having various devices is shown, but it should be understood that it is not required to implement or possess all the devices shown. More or fewer devices may be implemented or possessed instead.

[0168] An embodiment of the present application also provides a computer program product, including computer-readable instructions. When the computer-readable instructions are executed on an electronic device, the electronic device implements any one of the Web front-end project upgrade methods provided in the embodiments of the present application.

[0169] A computer-readable storage medium is also provided in an embodiment of the present application. The storage medium carries one or more computer programs. When the one or more computer programs are executed by an electronic device, the electronic device can implement any one of the Web front-end project upgrade methods provided in the embodiment of the present application.

[0170] It should also be noted that the device embodiments described above are merely schematic, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed over multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. In addition, in the drawings of the device embodiments provided by the present application, the connection relationship between the modules indicates that there is a communication connection between them, which may be specifically implemented as one or more communication buses or signal lines.

[0171] Through the description of the above implementation mode, the technicians in the field can clearly understand that the present application can be implemented by means of software plus necessary general hardware, and of course, it can also be implemented by special hardware including special integrated circuits, special CPUs, special memories, special components, etc. In general, all functions completed by computer programs can be easily implemented by corresponding hardware, and the specific hardware structure used to implement the same function can also be various, such as analog circuits, digital circuits or special circuits. However, for the present application, software program implementation is a better implementation mode in more cases. Based on such an understanding, the technical solution of the present application is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a readable storage medium, such as a computer floppy disk, a U disk, a mobile hard disk, a ROM, a RAM, a disk or an optical disk, etc., including a number of instructions to enable a computer device (which can be a personal computer, a training device, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0172] In the above embodiments, all or part of the embodiments may be implemented by software, hardware, firmware or any combination thereof. When implemented by software, all or part of the embodiments may be implemented in the form of a computer program product.

[0173] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions may be transmitted from a website site, a computer, a training device, or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, training device, or data center. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a training device, a data center, etc. that includes one or more available media integrations. The available medium may be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive (SSD)), etc.

Claims

1. A Web front-end project upgrade method, characterized in that: include: Determine the transformation granularity of the original Web front-end project and the new components to be added; A component configuration method for adding the new component in a new project of a Web front end; the component configuration method at least includes: a mounting point and a life cycle of the new component in the original project; Adding a mapping relationship between the new component and the unique path of the new component; At least based on the mapping relationship and the component configuration mode, the original project is updated according to the transformation granularity.

2. The method according to claim 1, characterized in that Before determining the transformation granularity of the original project of the Web front end, the method further includes: Extracting CSS rules that meet basic style features from the original project, and constructing a basic style rule set based on the extracted CSS rules; Setting a function interface for querying common configuration in the global scope of the original project, where the common configuration is the configuration that both the original project and the new project need to use; The compiled resource file of the new project is introduced into the HTML code with global effect of the original project.

3. The method according to claim 1, characterized in that The component configuration method also includes: The new component obtains the configuration of the shared attributes from the component integration device; The new component updates the obtained global configuration to the configuration in the component integration device; The new component queries the configuration of the global configuration from the component integration device; The new component obtains the configuration of the routing service from the component integration device; The CSS style used by the new component itself has a preset local scope configuration.

4. The method according to claim 1, characterized in that: The updating of the original project according to the transformation granularity based at least on the mapping relationship and the component configuration mode includes: Querying the new component based on a unique path of the new component; The queried new component is mounted on the mounting point, and the new component is managed based on the life cycle.

5. The method according to claim 1, characterized in that The transformation granularity includes three types: controls, modules, and pages.

6. A Web front-end project upgrade device, characterized in that: include: The granularity determination unit is used to determine the transformation granularity of the original project of the Web front end and determine the new components to be added; A component adding unit, used for adding a component configuration mode of the new component in a new project of the Web front end; the component configuration mode at least includes: a mounting point and a life cycle of the new component in the original project; A mapping unit, used for adding a mapping relationship between the new component and the unique path of the new component; An updating unit is used to update the original project according to the transformation granularity based on at least the mapping relationship and the component configuration mode.

7. The device according to claim 6, characterized in that Also includes: An extraction unit, configured to extract CSS rules that meet basic style features from the original project before the granularity determination unit determines the transformation granularity of the original project of the Web front end, and construct a basic style rule set based on the extracted CSS rules; An interface setting unit, used to set a function interface for querying a common configuration in the global scope of the original project, where the common configuration is a configuration that both the original project and the new project need to use; The introduction unit is used to introduce the compiled resource file of the new project into the HTML code with global effect of the original project.

8. A computer program product, characterized in that It includes computer-readable instructions, and when the computer-readable instructions are executed on an electronic device, the electronic device implements the Web front-end project upgrading method as described in any one of claims 1 to 5.

9. An electronic device, characterized in that: The method comprises at least one processor and a memory connected to the processor, wherein: The memory is used to store computer programs; The processor is used to execute the computer program so that the electronic device can implement the Web front-end project upgrading method as described in any one of claims 1 to 5.

10. A computer storage medium, characterized in that: The storage medium carries one or more computer programs, and when the one or more computer programs are executed by an electronic device, the electronic device can implement the Web front-end project upgrading method as described in any one of claims 1 to 5.

Images