CN112307402B - Webpage component creation method and device, electronic equipment and readable storage medium - Google Patents
Webpage component creation method and device, electronic equipment and readable storage medium Download PDFInfo
- Publication number
- CN112307402B CN112307402B CN202011257572.XA CN202011257572A CN112307402B CN 112307402 B CN112307402 B CN 112307402B CN 202011257572 A CN202011257572 A CN 202011257572A CN 112307402 B CN112307402 B CN 112307402B
- Authority
- CN
- China
- Prior art keywords
- component
- custom
- tag name
- created
- manager
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 64
- 230000006399 behavior Effects 0.000 claims description 24
- 230000006870 function Effects 0.000 claims description 24
- 238000004590 computer program Methods 0.000 claims description 9
- 238000012544 monitoring process Methods 0.000 claims description 3
- 238000012546 transfer Methods 0.000 claims description 3
- 230000008878 coupling Effects 0.000 abstract description 14
- 238000010168 coupling process Methods 0.000 abstract description 14
- 238000005859 coupling reaction Methods 0.000 abstract description 14
- 238000012545 processing Methods 0.000 description 13
- 230000008569 process Effects 0.000 description 8
- 238000010586 diagram Methods 0.000 description 6
- 238000011161 development Methods 0.000 description 5
- 230000001960 triggered effect Effects 0.000 description 5
- 238000004891 communication Methods 0.000 description 3
- 238000013507 mapping Methods 0.000 description 3
- 238000013508 migration Methods 0.000 description 2
- 230000005012 migration Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000002054 transplantation Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
The application provides a webpage component creation method, a webpage component creation device, electronic equipment and a readable storage medium. The method comprises the following steps: triggering a lifecycle event of the custom component to be created when the creation of the specified signature in the HTML is detected; intercepting, by a manager, a first event during a period of a lifecycle event; instantiating the component class corresponding to the specified tag name into a component object through a manager, and binding the component object with a preset standard DOM object corresponding to the created specified tag name; the behavior strategy of the preset standard DOM object is mounted to the component object through the hook function; and creating a first UI structure for the component object of the mounting behavior strategy to obtain the created custom component. In the scheme, the custom component which is created has a behavior strategy similar to a preset standard DOM object, and the custom component has low coupling degree with the Web frame, so that the custom component is convenient to transplant.
Description
Technical Field
The present invention relates to the field of web page development technologies, and in particular, to a web page component creation method, a device, an electronic device, and a readable storage medium.
Background
Web (Web page) class products are typically deployed with multiple Web frameworks during development. For example, the Web frame may be a frame such as Vue, reactJS, angular. Each Web framework implements a respective function by invoking a respective Web page component. While one component may be multiplexed by multiple Web frameworks. If the component is not a general component, for example, for a custom component, the component needs to be configured and developed with a Web framework in a targeted manner in the component development process, so that the corresponding Web framework can only call the component. The custom component created by the method has high coupling with the Web framework and lacks portability.
Disclosure of Invention
An object of the embodiments of the present application is to provide a method, an apparatus, an electronic device, and a readable storage medium for creating a Web page component, which can improve the problems of high coupling between a custom component and a Web frame and inconvenience in migration.
In order to achieve the above object, embodiments of the present application are realized by:
in a first aspect, an embodiment of the present application provides a method for creating a web page component, where the method includes:
triggering a life cycle event of a custom component to be created when a designated signature is detected to be created in the HTML, wherein the designated tag name is a tag name corresponding to a preset component class which is registered in a manager in advance;
intercepting, by the manager, a first event during a period of the lifecycle event;
instantiating the component class corresponding to the specified tag name into a component object through the manager, and binding the component object with a preset standard DOM object corresponding to the created specified tag name;
the behavior strategy of the preset standard DOM object is mounted to the component object through a hook function;
and creating a first UI structure for the component object on which the behavior strategy is mounted, and obtaining the created custom component.
In the embodiment, the manager intercepts the event, and then mounts the behavior strategy of the preset standard DOM object to the component object, so that the created custom component has the behavior strategy similar to the preset standard DOM object, and has low coupling degree with the Web frame, thereby being convenient for transplanting.
With reference to the first aspect, in some optional embodiments, before triggering the lifecycle event of the about-to-be-created custom component, the method further comprises:
calling a component registration interface through the manager to register a preset component class;
and establishing and storing a corresponding relation between the preset component class and a tag name, wherein the tag name is used for representing the component name.
In the above embodiment, the manager registers the preset component class, and establishes a corresponding relationship between the preset component class and the tag name, so that the manager is facilitated to detect the created designated tag name, so as to trigger the lifecycle event of the custom component to be created.
With reference to the first aspect, in some optional embodiments, creating a first UI structure for the component object, resulting in a created custom component, including:
and adding the HTML code segment of the component class corresponding to the appointed tag name into the component object to serve as the first UI structure, so as to obtain the custom component.
With reference to the first aspect, in some optional embodiments, the method further includes:
when an instruction for inheriting the custom component by utilizing a second component is received, and the first UI structure of the custom component is different from the second UI structure of the second component, marking the appointed tag name as a rewriting tag;
creating a target UI structure for inheritance as a UI structure of the second component through a creation policy corresponding to the rewrite tag;
and inheriting the custom component through a second component with the target UI structure.
In the above-described embodiment, when the created custom component is inherited by the second component, if there is a difference between the internal UI structure of the second component and the UI structure of the custom component, the UI structure for inheritance may be re-created as the UI structure of the inherited second component.
With reference to the first aspect, in some optional embodiments, the method further includes:
receiving a request to invoke a component;
when the request is used for calling the custom component, the custom component is called through the preset standard DOM object or the custom component is called through an API provided by a specified webpage frame.
In the above embodiment, after the custom component is created, if the custom component needs to be called later, since the behavior policy of the custom component is the same as that of the preset standard DOM object, it can support multiple types of Web frameworks to call the custom component, so that the problems of high coupling between the custom component and the Web framework and inconvenience in transplantation can be improved.
With reference to the first aspect, in some optional embodiments, the first event includes one of component creation, document addition, document removal, transfer from an old document to a new document.
In a second aspect, an embodiment of the present application further provides a device for creating a web page component, where the device includes:
the monitoring unit is used for triggering a life cycle event of a custom component to be created when a designated signature is detected to be created in the HTML, wherein the designated tag name is a tag name corresponding to a preset component class, and the preset component class is registered in the manager in advance;
an interception unit intercepting a first event through the manager during a period of the lifecycle event;
the binding unit is used for instantiating the component class corresponding to the appointed tag name into a component object through the manager and binding the component object with the created preset standard DOM object corresponding to the appointed tag name;
the mounting unit is used for mounting the behavior strategy of the preset standard DOM object to the component object through a hook function;
and the creation unit is used for creating a first UI structure for the component object on which the behavior strategy is mounted, and obtaining the created custom component.
With reference to the second aspect, in some optional embodiments, the apparatus further includes a registration unit and a relationship establishment unit, where the registration unit is configured to invoke, by the manager, a component registration interface to register a preset component class before triggering a lifecycle event of a custom component to be created;
the relation establishing unit is used for establishing and storing the corresponding relation between the preset component class and the tag name, and the tag name is used for representing the component name.
In a third aspect, an embodiment of the present application further provides an electronic device, where the electronic device includes a processor and a memory coupled to each other, where the memory stores a computer program, and when the computer program is executed by the processor, causes the electronic device to perform the method described above.
In a fourth aspect, embodiments of the present application further provide a computer readable storage medium, where a computer program is stored, which when run on a computer, causes the computer to perform the above-mentioned method.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the embodiments of the present application will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present application and should not be considered as limiting the scope, and other related drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Fig. 2 is a schematic flow chart of a method for creating a web page component according to an embodiment of the present application.
Fig. 3 is a second flowchart of a web page component creation method according to an embodiment of the present application.
Fig. 4 is a flowchart of a web page component creation apparatus according to an embodiment of the present application.
Icon: 10-an electronic device; 11-a processing module; 12-a memory module; 100-web page component creation means; 110-a listening unit; 120-interception unit; 130-a binding unit; 140-mounting units; 150-creation unit.
Detailed Description
The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application. It should be noted that the terms "first," "second," and the like are used merely to distinguish between descriptions and should not be construed as indicating or implying relative importance.
The applicant has found that in the development of Web products, web page components can generally be divided into two main categories, one being generic components and one being custom components. When a component can be created by a standard function document.create (tagName) and can be queried by a standard selector with standard context node relationships, such a component is considered a generic component, such as DIV, A, IMG components that can be supported in standard HTML (Hyper Text Markup Language ). Illustratively, assume that the a-node relationship of the generic component is: UI 1- & gtA- & gtUI 2 (the general component A has definite upper and lower levels), and when the general component A is called, the call of the component A can be realized no matter the node of 'UI 1' or 'UI 2' is found. However, the standard HTML supporting components have a single structure, and usually require secondary processing, that is, multiple standard HTML components are combined into one complex component, and multiple complex components can be recombined into new components, which is generally implemented through custom components. The existing custom component B can be built in a combination of multiple standard HTML components, and its node path can be regarded as: UI 1- & gt DIV-B- & gt SPAN-B- & gt UI2 (the component B does not really exist on a node path, but instead, a UI node is constructed when the component B is defined, DIV and SPAN cannot be directly obtained through the UI node), when other frames need to call the component B, corresponding configuration is needed to be carried out on the component B according to each frame in advance, the component B can be called through a specific method, and the component B cannot be directly called through a standard mode of a general component, so that the coupling degree of a self-defined component and the frame is high, and the migration is inconvenient.
Based on the above problems, the applicant has proposed the following embodiments to improve the above technical problems. The following embodiments and features of the embodiments may be combined with each other without conflict.
Referring to fig. 1, an embodiment of the present application provides an electronic device 10, which can create a corresponding Web custom component during the development process of a Web product, so as to improve the expansibility of the created custom component and reduce the coupling between the custom component and a Web frame (or referred to as a Web frame). The Web framework may include, but is not limited to, a Vue, reactJS, angular framework or the like.
The electronic device 10 may include a processing module 11 and a memory module 12. The memory module 12 stores a computer program which, when executed by the processing module 11, enables the electronic device 1010 to perform the steps of the method described below.
Of course, the electronic device 10 may also include other modules. For example, the electronic device 10 may further include a functional module of the web page component creation apparatus 100 solidified in the storage module 12. It will be appreciated that the processing module 11, the storage module 12, and the various elements of the web page component creation apparatus 100 are electrically connected, either directly or indirectly, to enable transmission or interaction of data. For example, the components may be electrically connected to each other via one or more communication buses or signal lines.
In the present embodiment, the electronic device 10 may be, but is not limited to, a personal computer, a server, or the like.
Referring to fig. 2, an embodiment of the present application provides a method for creating a web page component, which may be applied to the above-mentioned electronic device 10, and executed or implemented by the electronic device 10. Before the method is executed, a corresponding web page frame and manager are installed in the electronic device 10 in advance. The method may comprise the steps of:
step S210, triggering a life cycle event of a custom component to be created when a specified signature is created in the HTML, wherein the specified tag name is a tag name corresponding to a preset component class, and the preset component class is registered in a manager in advance;
step S220, intercepting a first event by the manager in a period of the life cycle event;
step S230, instantiating the component class corresponding to the specified tag name into a component object through the manager, and binding the component object with the created preset standard DOM object corresponding to the specified tag name;
step S240, the behavior strategy of the preset standard DOM object is mounted to the component object through a hook function;
step S250, a first UI structure is created for the component object on which the behavior strategy is mounted, and the created custom component is obtained.
In the embodiment, the manager intercepts the event, and then mounts the behavior strategy of the preset standard DOM object to the component object, so that the created custom component has the behavior strategy similar to the preset standard DOM object, and has low coupling degree with the Web frame, thereby being convenient for transplanting.
The steps of the method will be described in detail below, as follows:
in step S210, the manager in the electronic device 10 may detect operations related to the component in real time, including operations of creating the component, calling the component, and the like. For example, when a user needs to create a custom component, the user may create a designated signature in HTML via electronic device 10, and the process may be detected by the manager. The manager may be simply referred to as a component manager, and may be used to manage the creation and calling processes of the components, which may be understood as software functional modules in the electronic device 10.
When the manager detects that the specified signature is created in the HTML, the next operation is considered to be the operation of creating the custom component, and at this time, the lifecycle event of the custom component to be created is automatically triggered. The lifecycle event serves as a time reference for creating the custom component, and the corresponding operation within the period of the lifecycle event can be understood as the corresponding operation step for creating the custom component.
In this embodiment, the designation target signature may be determined according to the actual situation. Generally, before executing step S210, a preset component class is registered in advance in the manager, and a corresponding relationship between the preset component class and a corresponding tag name is established as a mapping relationship between the preset component class and the tag name. The manager may store the correspondence. The tag name is used to represent the component name. That is, before step S210, the method may further include:
calling a component registration interface through the manager to register a preset component class;
and establishing and storing the corresponding relation between the preset component class and the tag name.
In this embodiment, the component registration interface may be understood as a Web component registration interface, which may be called by a manager, and may be used to implement registration of a preset component class, and binding of the preset component class with a tag name.
The preset component classes can be set according to actual conditions, one component class corresponds to one label, and the function setting of the component classes is not particularly limited. For example, the function of one preset component class is a "virtual button" whose function can be a switch that is triggered or turned off by the function. In general, the tag names of the components of different classes are different, and the tag names of the component classes have uniqueness so as to distinguish. For example, a "button 1" component class, a "button 2" component class, may be defined that functions the same as or similar to a "virtual button" component class. The "button 1" and the "button 2" may be respectively used as the tag names of the two component classes, and the tag names of the "button 1" component class and the "button 2" component class are different for convenience of distinguishing.
In this embodiment, if the manager detects that the tag name created in the HTML is the tag name corresponding to the preset component class, it indicates that the tag name created in the HTML is the tag name registered in the manager in advance, and at this time, a lifecycle event of the custom component to be created is triggered. If the manager detects that the tag name created in the HTML is not registered in the manager, the lifecycle event of the custom component to be created is not triggered.
In the above embodiment, the manager registers the preset component class and establishes a corresponding relationship between the preset component class and the tag name, so that the manager is facilitated to detect that the created designated tag name is the registered tag name, thereby triggering the lifecycle event of the custom component to be created.
In step S220, after the registration of the preset component class is completed, during the period of the life cycle time, the event corresponding to the preset component class passes through the manager, and the manager monitors and intercepts the event. The first event includes one of component creation, document addition, document removal, transfer from an old document to a new document.
In step S230, the instantiation of the component class is known to those skilled in the art, and can be understood as: component classes corresponding to the specified tag names need to be added in the corresponding containers when in use to implement instantiation.
The preset standard DOM object may be determined according to practical situations, which are well known to those skilled in the art. In this embodiment, the electronic device 10 may establish a correspondence between the tag signature and the corresponding preset standard DOM object when registering the component class. Thus, when step S230 is performed, the instantiated component object may be bound with the preset standard DOM object corresponding to the specified tag name based on the correspondence.
In step S240, the Hook function is a Hook function, and the behavior policy of the preset standard DOM object may be mounted to the component object by means of hooking according to the actual situation. Therefore, the component object has the behavior policy of the standard DOM object, and the coupling degree of the standard DOM object and the webpage frame is low, so that the method is convenient for transplanting and updating, and is beneficial to reducing the coupling degree of the created custom component and the webpage frame, and convenient for transplanting and updating the custom component.
In step S250, after the behavior policy of the preset standard DOM object is installed on the component object, an internal UI structure may be created for the component object as the first UI structure, so as to obtain the created custom component.
In this embodiment, step S250 may include:
and adding the HTML code segment of the component class corresponding to the appointed tag name into the component object to serve as the first UI structure, so as to obtain the custom component.
Understandably, in creating the UI structure, the InnerHTML can be used, and an internal UI structure can be created for the component object, resulting in a custom component.
In this embodiment, when the component needs to be inherited, the method further includes:
when an instruction for inheriting the custom component by utilizing a second component is received, and the first UI structure of the custom component is different from the second UI structure of the second component, marking the appointed tag name as a rewriting tag;
creating a target UI structure for inheritance as a UI structure of the second component through a creation policy corresponding to the rewrite tag;
and inheriting the custom component through a second component with the target UI structure.
In this embodiment, the first UI structure is a UI structure of the custom component. The second UI structure is the UI structure of the second component. When the first UI structure is different from the second UI structure, the designated tag name can be marked, and the rewritten tag is used as a marking bit and is provided for the inside of the component to create the UI according to the scene.
The creation policy may be determined according to the actual situation, for example, the first UI structure may be continued as a target UI structure for inheritance, or the second UI structure may be regarded as a target UI structure for inheritance, or UI structures different from the first UI structure and the second UI structure may be created as target UI structures for inheritance. The custom component may then be inherited by a second component having the target UI structure, such that the second component inherits the corresponding functional roles of the custom component.
When the first UI structure is the same as the second UI structure, the second component can be directly utilized to inherit the custom component.
Referring to fig. 3, as an alternative embodiment, after step S250, the method may further include step S260 and step S270, as follows:
step S260, receiving a request for calling a component;
step S270, when the request is for calling the custom component, the custom component is called through the preset standard DOM object, or the custom component is called through an API (Application Programming Interface, application program interface) provided by the specified web page frame.
In the above embodiment, after the custom component is created, if the custom component needs to be called later, since the behavior policy of the custom component is the same as that of the preset standard DOM object, it can support multiple types of Web frameworks to call the custom component, so that the problems of high coupling between the custom component and the Web framework and inconvenience in transplantation can be improved.
To facilitate understanding of the implementation of the method, the implementation of the method will be illustrated below as follows:
firstly, registering the self-defined component class to a component manager (namely the manager), and then establishing binding between a standard signature and the component class, namely establishing a mapping relation between a preset component class and a corresponding standard signature; the component manager can provide a registration function and a component shell, the registration function can store the corresponding relation between the label name and the component class into the component manager, and call a customElements.define method to define a component (the second step), the component name is the label name, and the event callback of the component points to an event interceptor (EventInterceptor) of the component shell; in addition to the four events required to implement the customElements.define in the component shell (component creates a CreatedCallBack, adds to the document AttacedCallback, removes DetacedCalack from the document, moves from the old document to the new document AdoptedCallback event), while initializing the things of the component in the createdCallback callback (sixth step).
And secondly, the component manager calls a Web component registration interface to register corresponding component classes, all events of the registered component classes pass through the component manager, wherein the registered component classes are irrelevant to object-oriented relation, but the binding of event callbacks is introduced into the component manager, the standard event callbacks of the Web components can be bound with component shells of the component manager, and the component shells are bridges for actually interacting with the component classes.
Thirdly, when the component manager detects that a tag name is created in the HTML and the tag name is a tag name which is registered in the component manager in advance, triggering a life cycle event of the Web custom component; for example, when < aui-tagName > </aui-tagName > occurs in a page or created by js, i.e., document. Create element (tagName), a component will be entered when it has been defined in the customElements definition.
Fourth, since the event callbacks bound in the first step in customElementDefine for the tags are part of the component shell, the component shell's event interceptor can monitor callbacks that the component creates, adds to the document, removes from the document, moves from the old document to the new document.
Fifthly, the component manager calls a method corresponding to the component according to different events in the event interceptor, the event intercepted by the component shell calls a corresponding life cycle event of the component class, and the steps are as follows: the createdCallback callback creates a callback for a component, and is necessarily the first triggered callback, in the callback, according to the mapping relation between the marked signature in the first step and the component class, the class of the component is found and instantiated as a component object, the object has a corresponding method for four events defined in the customElements.definition, for example, a created function of the component is called when the createdCallback event callback is performed, and an atached function is called when the atachedCallback callback is performed, and repeated description of each event is omitted.
In the sixth step, in the Created method of the component life cycle, all the hook of the add-delete-modify-check interface of the current component is needed, because the custom component has its own internal structure, the father-son relationship of the custom component relative to the outer component is different, and the Created method is actually called when the Created call is called, and the internal implementation process is as follows: the method comprises the steps of finding out a component class mapped in the first step of registration through a tag name, instantiating the component class to obtain a component object, then taking a native DOM method of a Hook component, and mounting the behavior of a standard DOM on the component object, so that the component object takes responsibility instead of the native DOM object of the component, and the coupling degree of the created custom component and a webpage frame is low.
Seventh, creating an internal UI structure of the component object, and replacing the rewriting label to rewrite the UI structure, so as to obtain a custom component; the process of creating the component UI is to add the HTML code segments in the component class to the component, so that the created custom component can be obtained.
Based on the design, when the custom component is called, the custom component can be called in a standard DOM mode, so that the coupling degree of the custom component and the frame is low, and the custom component is convenient to transplant.
Referring to fig. 4, an embodiment of the present application further provides a web page component creation apparatus 100, which may be applied to the above-mentioned electronic device 10, for executing each step in the method. The web page component creation apparatus 100 includes at least one software function module that may be stored in the storage module 12 in the form of software or Firmware (Firmware) or cured in an Operating System (OS) of the electronic device 10. The processing module 11 is configured to execute executable modules stored in the storage module 12, such as software function modules and computer programs included in the web page component creation apparatus 100.
The web page component creation apparatus 100 may include a listening unit 110, an interception unit 120, a binding unit 130, a mounting unit 140, and a creation unit 150, and the operation steps performed may be as follows:
a monitoring unit 110, configured to trigger a lifecycle event of a custom component to be created when a specified signature is detected to be created in HTML, where the specified tag name is a tag name corresponding to a preset component class, and the preset component class is pre-registered in a manager;
an interception unit 120 intercepting a first event through the manager during a period of the lifecycle event;
a binding unit 130, configured to instantiate, by the manager, a component class corresponding to the specified tag name as a component object, and bind with the created preset standard DOM object corresponding to the specified tag name;
a mounting unit 140, configured to mount, by using a hook function, a behavior policy of the preset standard DOM object to the component object;
the creating unit 150 is configured to create a first UI structure for the component object on which the behavior policy is mounted, so as to obtain a created custom component.
Optionally, the web page component creation apparatus 100 may further include a registration unit and a relationship establishment unit. Before triggering a life cycle event of a custom component to be created, the registration unit is used for calling a component registration interface through the manager to register a preset component class; the relation establishing unit is used for establishing and storing the corresponding relation between the preset component class and the tag name, and the tag name is used for representing the component name.
Optionally, the creation unit 150 may be further configured to: and adding the HTML code segment of the component class corresponding to the appointed tag name into the component object to serve as the first UI structure, so as to obtain the custom component.
Optionally, the web page component creation apparatus 100 may further include a marking unit and an inheritance unit. A marking unit, configured to mark the specified tag name as a rewrite tag when an instruction for inheriting the custom component by using a second component is received and a first UI structure of the custom component is different from a second UI structure of the second component; the creation unit 150 may be further configured to create a target UI structure for inheritance as a UI structure of the second component by a creation policy corresponding to the rewrite tag; the inheritance unit may be further configured to inherit the custom component through a second component having the target UI structure.
Optionally, the web page component creation apparatus 100 may further include a receiving unit and a calling unit. The receiving unit is used for receiving a request for calling the component; and the calling unit is used for calling the custom component through the preset standard DOM object or calling the custom component through an API provided by the appointed webpage frame when the request is used for calling the custom component.
In this embodiment, the processing module 11 may be an integrated circuit chip with signal processing capability. The processing module 11 may be a general purpose processor. For example, the processor may be a central processing unit (Central Processing Unit, CPU), digital signal processor (Digital Signal Processing, DSP), application specific integrated circuit (Application Specific Integrated Circuit, ASIC), field programmable gate array (Field-Programmable Gate Array, FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components, or may implement or perform the methods, steps, and logic blocks disclosed in embodiments of the present application.
The memory module 12 may be, but is not limited to, random access memory, read only memory, programmable read only memory, erasable programmable read only memory, electrically erasable programmable read only memory, and the like. In this embodiment, the storage module 12 may be configured to store a correspondence between a preset component class and a tag name, and so on. Of course, the storage module 12 may also be used to store a program, which is executed by the processing module 11 upon receiving an execution instruction.
The communication module is used for establishing communication connection between the electronic device 10 and other devices through a network and receiving and transmitting data through the network.
It is to be understood that the configuration shown in fig. 1 is merely a schematic diagram of one configuration of the electronic device 10, and that the electronic device 10 may include more components than those shown in fig. 1. The components shown in fig. 1 may be implemented in hardware, software, or a combination thereof.
It should be noted that, for convenience and brevity, the specific working process of the electronic device 10 described above may refer to the corresponding process of each step in the foregoing method, and will not be described in detail herein.
Embodiments of the present application also provide a computer-readable storage medium. The computer-readable storage medium has stored therein a computer program which, when run on a computer, causes the computer to perform the web page component creation method as described in the above embodiments.
From the foregoing description of the embodiments, it will be apparent to those skilled in the art that the present application may be implemented in hardware, or by means of software plus a necessary general hardware platform, and based on this understanding, the technical solution of the present application may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (may be a CD-ROM, a U-disc, a mobile hard disk, etc.), and includes several instructions to cause a computer device (may be a personal computer, a server, or a network device, etc.) to perform the methods described in the respective implementation scenarios of the present application.
In summary, the application provides a method and a device for creating a webpage component, an electronic device and a readable storage medium. The method comprises the following steps: triggering a life cycle event of a custom component to be created when a designation target signature is detected to be created in the HTML, designating a tag name as a tag name corresponding to a preset component class, wherein the preset component class is registered in a manager in advance; intercepting, by a manager, a first event during a period of a lifecycle event; instantiating the component class corresponding to the specified tag name into a component object through a manager, and binding the component object with a preset standard DOM object corresponding to the created specified tag name; the behavior strategy of the preset standard DOM object is mounted to the component object through the hook function; and creating a first UI structure for the component object of the mounting behavior strategy to obtain the created custom component. In the scheme, the event is intercepted by the manager, and then the behavior strategy of the preset standard DOM object is mounted to the component object, so that the created custom component has the behavior strategy similar to the preset standard DOM object, and the coupling degree with the Web frame is low, thereby being convenient for transplanting.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus, system, and method may be implemented in other manners as well. The above-described apparatus, systems, and method embodiments are merely illustrative, for example, flow charts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions. In addition, the functional modules in the embodiments of the present application may be integrated together to form a single part, or each module may exist alone, or two or more modules may be integrated to form a single part.
The foregoing is merely exemplary embodiments of the present application and is not intended to limit the scope of the present application, and various modifications and variations may be suggested to one skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principles of the present application should be included in the protection scope of the present application.
Claims (9)
1. A method of web page component creation, the method comprising:
triggering a life cycle event of a custom component to be created when a designated signature is detected to be created in the HTML, wherein the designated tag name is a tag name corresponding to a preset component class which is registered in a manager in advance;
intercepting, by the manager, a first event during a period of the lifecycle event;
instantiating the component class corresponding to the specified tag name into a component object through the manager, and binding the component object with a preset standard DOM object corresponding to the created specified tag name;
the behavior strategy of the preset standard DOM object is mounted to the component object through a hook function;
and adding the HTML code segment of the component class corresponding to the appointed tag name into the component object to serve as a first UI structure, so as to obtain the custom component.
2. The method of claim 1, wherein prior to triggering the lifecycle event of the about-to-be-created custom component, the method further comprises:
calling a component registration interface through the manager to register a preset component class;
and establishing and storing a corresponding relation between the preset component class and a tag name, wherein the tag name is used for representing the component name.
3. The method according to claim 1, wherein the method further comprises:
when an instruction for inheriting the custom component by utilizing a second component is received, and the first UI structure of the custom component is different from the second UI structure of the second component, marking the appointed tag name as a rewriting tag;
creating a target UI structure for inheritance as a UI structure of the second component through a creation policy corresponding to the rewrite tag;
and inheriting the custom component through a second component with the target UI structure.
4. The method according to claim 1, wherein the method further comprises:
receiving a request to invoke a component;
when the request is used for calling the custom component, the custom component is called through the preset standard DOM object or the custom component is called through an API provided by a specified webpage frame.
5. The method of claim 1, wherein the first event comprises one of a component creation, a document addition, a document removal, a transfer from an old document to a new document.
6. A web page component creation apparatus, the apparatus comprising:
the monitoring unit is used for triggering a life cycle event of a custom component to be created when a designated signature is detected to be created in the HTML, wherein the designated tag name is a tag name corresponding to a preset component class, and the preset component class is registered in the manager in advance;
an interception unit intercepting a first event through the manager during a period of the lifecycle event;
the binding unit is used for instantiating the component class corresponding to the appointed tag name into a component object through the manager and binding the component object with the created preset standard DOM object corresponding to the appointed tag name;
the mounting unit is used for mounting the behavior strategy of the preset standard DOM object to the component object through a hook function;
and the creation unit is used for adding the HTML code segment of the component class corresponding to the appointed tag name into the component object to be used as a first UI structure to obtain the custom component.
7. The apparatus according to claim 6, further comprising a registration unit and a relationship establishment unit, wherein the registration unit is configured to invoke a component registration interface by the manager to register a preset component class before triggering a lifecycle event of a custom component to be created;
the relation establishing unit is used for establishing and storing the corresponding relation between the preset component class and the tag name, and the tag name is used for representing the component name.
8. An electronic device comprising a processor and a memory coupled to each other, the memory storing a computer program that, when executed by the processor, causes the electronic device to perform the method of any of claims 1-5.
9. A computer readable storage medium, characterized in that the computer readable storage medium has stored therein a computer program which, when run on a computer, causes the computer to perform the method according to any of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011257572.XA CN112307402B (en) | 2020-11-11 | 2020-11-11 | Webpage component creation method and device, electronic equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011257572.XA CN112307402B (en) | 2020-11-11 | 2020-11-11 | Webpage component creation method and device, electronic equipment and readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112307402A CN112307402A (en) | 2021-02-02 |
| CN112307402B true CN112307402B (en) | 2024-01-26 |
Family
ID=74325390
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011257572.XA Active CN112307402B (en) | 2020-11-11 | 2020-11-11 | Webpage component creation method and device, electronic equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112307402B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113296758B (en) * | 2021-03-15 | 2022-11-25 | 上海爱数信息技术股份有限公司 | Front-end component library construction method and device and storage medium |
| CN114675923A (en) * | 2022-04-13 | 2022-06-28 | 上海微盟企业发展有限公司 | Configuration type operation interface setting method, device and medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103955364A (en) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | Front end assembly method suitable for mobile phone |
| CN104573066A (en) * | 2015-01-26 | 2015-04-29 | 中国工商银行股份有限公司 | Page reusing method and page reusing device |
| CN109697064A (en) * | 2018-10-31 | 2019-04-30 | 深圳壹账通智能科技有限公司 | A kind of generation method and device of the customized page |
| CN109918604A (en) * | 2019-03-07 | 2019-06-21 | 智慧芽信息科技(苏州)有限公司 | Page drawing method, apparatus, equipment and storage medium |
| CN111913637A (en) * | 2020-08-28 | 2020-11-10 | 平安国际智慧城市科技股份有限公司 | Component operation control method, device and storage medium |
-
2020
- 2020-11-11 CN CN202011257572.XA patent/CN112307402B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103955364A (en) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | Front end assembly method suitable for mobile phone |
| CN104573066A (en) * | 2015-01-26 | 2015-04-29 | 中国工商银行股份有限公司 | Page reusing method and page reusing device |
| CN109697064A (en) * | 2018-10-31 | 2019-04-30 | 深圳壹账通智能科技有限公司 | A kind of generation method and device of the customized page |
| CN109918604A (en) * | 2019-03-07 | 2019-06-21 | 智慧芽信息科技(苏州)有限公司 | Page drawing method, apparatus, equipment and storage medium |
| CN111913637A (en) * | 2020-08-28 | 2020-11-10 | 平安国际智慧城市科技股份有限公司 | Component operation control method, device and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112307402A (en) | 2021-02-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109547570B (en) | Service registration method, device, registration center management equipment and storage medium | |
| EP3839726B1 (en) | Software modification initiation method and apparatus | |
| CN112307402B (en) | Webpage component creation method and device, electronic equipment and readable storage medium | |
| CN111880987A (en) | Dynamic monitoring method and device of application program, storage medium and electronic device | |
| CN112416425B (en) | APP construction method and device, computer equipment and storage medium | |
| US20210312472A1 (en) | Method and system for prediction of smart contract violation using dynamic state space creation | |
| CN110808857A (en) | Network intercommunication method, device, equipment and storage medium for realizing Kubernetes cluster | |
| CN114327710B (en) | Function management method, management device, terminal equipment and readable storage medium | |
| CN112528296B (en) | Vulnerability detection method and device, storage medium and electronic equipment | |
| CN109933356A (en) | The hot replacement method of remote agent class and device | |
| CN109933407B (en) | Block chain DAPP virtual machine, data processing method and computing equipment | |
| CN105447384A (en) | Anti-monitoring method and system and mobile terminal | |
| CN109144520B (en) | Information interaction method, device, equipment and storage medium among different objects in Android | |
| CN116107590A (en) | Implementation method and system for compatible micro-service and monomer architecture in software product development and deployment | |
| CN114662102A (en) | File processing method and device and storage medium | |
| CN114416396A (en) | Interface version control method and device, electronic equipment and storage medium | |
| US11071151B2 (en) | Methods and apparatuses for connecting a wireless access point through an application in a user equipment | |
| CN112486559A (en) | Product adjusting method and device, storage medium and electronic device | |
| CN113791795A (en) | Plug-in installation method, device, system, equipment and storage medium | |
| CN110059125B (en) | Method for invoking proxy contract and related equipment | |
| CN111026563B (en) | Interface calling method and device, storage medium and electronic equipment | |
| CN117668392A (en) | Multi-station multi-page sign-up method, device, equipment and medium for micro front end | |
| CN111176648B (en) | Method and device for processing conversion of installation-free program, electronic equipment and storage medium | |
| CN112579872B (en) | Network resource access intermediary system based on resource plug-in and processing method thereof | |
| CN111339736B (en) | Method for adding prefix name, configuration acquisition method, device and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |