CN116431112A

CN116431112A - Implementation method and device of extensible front-end functional component and electronic equipment

Info

Publication number: CN116431112A
Application number: CN202310189665.0A
Authority: CN
Inventors: 秦武涛
Original assignee: Guoke Chushi Chongqing Software Co ltd
Current assignee: Guoke Chushi Chongqing Software Co ltd
Priority date: 2023-03-01
Filing date: 2023-03-01
Publication date: 2023-07-14

Abstract

The disclosure relates to a method, a device and an electronic device for realizing an extensible front-end functional component, wherein the method comprises the following steps: the method comprises the steps of decoupling a front-end page function module to obtain a plurality of script files which are abstractly packaged into a single component function, multiplexing the script files across frames, adding the script files to an initialization member list, initializing the script files in the initialization member list to obtain a target component with unique identification, detecting a base component which is associated with the target component in a base, associating the target component with the base component to obtain a function component, and adding the function component to the base to obtain a front-end function component library. The centralized control of the components is realized, and the maintenance is convenient; the assembly can be applied across frames, and the application range is wide; and the function expansion can be carried out through the association between the components, so that the front-end function requirement is met, and the development efficiency and the development quality are improved.

Description

Implementation method and device of extensible front-end functional component and electronic equipment

Technical Field

The disclosure relates to the technical field of computer software development, and in particular relates to a method and a device for realizing an extensible front-end functional component, electronic equipment and a computer readable storage medium.

Background

In the related technology, with the development of software and internet, the front-end development technology has a larger and larger proportion in project development, and the requirements on the front-end development technology are also higher and higher. At the same time, the front-end library and the framework are also endless, such as Jquery, angular, vue, react, which respectively realize separation of appearance, structure and function in a self-mode, but the front-end library and the framework also mean that projects of different frameworks cannot compatibly de-multiplex functional modules, and meanwhile, the research and development tasks are multiplied by the change of technical selection.

Therefore, a method for realizing code cross-frame multiplexing is needed to be widely applicable without depending on a three-party library and a frame.

Disclosure of Invention

To overcome the problems in the related art, the present disclosure provides a method, an apparatus, an electronic device, and a computer-readable storage medium for implementing an extensible front-end function module.

According to a first aspect of an embodiment of the present disclosure, there is provided a method for implementing an extensible front-end function component, including: decoupling the functional modules of the front-end page to obtain a plurality of script files which are abstractly packaged into a single component function, wherein the script files can be multiplexed across frames; adding the script file to an initialization member list, and initializing the script file in the initialization member list to obtain a target component with a unique identifier; detecting a basic component which is associated with the target component in a base, and associating the target component with the basic component to obtain a functional component; and adding the functional components into the base library to obtain a front-end functional component library.

In some embodiments, the decoupling the functional module of the front-end page to obtain a plurality of script files abstractly packaged into a single component function includes: acquiring a plurality of functional modules of a front page, wherein the functional modules comprise corresponding functional fields, and decoupling the functional modules according to the functional fields to obtain a plurality of decoupling files; abstracting the plurality of decoupling files into independent single component functions by adopting a singleness principle; and packaging the single component function to obtain a corresponding script file.

In some embodiments, the adding the script file to an initializing member list, initializing the script file in the initializing member list to obtain a target component with a unique identifier, includes: adding a plurality of script files to an initialized member list; injecting an initialization function into a script file corresponding to the initialization member list; and uniformly initializing the script files in a batch mode by combining a batch function and the initialization function, and marking the initialized script files with unique identifiers to obtain target components.

In some embodiments, the base component is used for realizing a front-end page base demand function, monitoring and calling the base component by introducing a base class function and naming, and constructing a base library by combining the base class function and the base component.

In some embodiments, the detecting the base component associated with the target component in the base library, associating the target component with the base component, and obtaining the functional component includes: detecting at least one basic component with an association relation with the target component in the base based on the target component; and associating the target component with at least one basic component according to the basic class function to obtain a functional component.

In some embodiments, the adding the functional component to the base library to obtain a front-end functional component library includes: adding the functional components into the base, and configuring an event mechanism according to the association relation to obtain a front-end functional component base; and monitoring the event mechanism through the base class function, and calling a corresponding functional component in the front-end functional component library when the base class function monitors that the event mechanism is triggered, namely simultaneously calling a target component and at least one basic component associated with the target component.

According to a second aspect of the embodiments of the present disclosure, there is provided an implementation apparatus of an expandable front-end function component, including: the script file acquisition module is used for decoupling the functional module of the front page to obtain a plurality of script files which are abstracted and packaged into a single component function, and the script files can be multiplexed across frames; the script file initializing module is used for adding the script file into an initializing member list, and initializing the script file in the initializing member list to obtain a target component with a unique identifier; the component association module is used for detecting a basic component which is associated with the target component in the base library, and associating the target component with the basic component to obtain a functional component; and the component library construction module is used for adding the functional components into the base library to obtain a front-end functional component library.

In some embodiments, the apparatus further comprises: the decoupling module is used for acquiring a plurality of functional modules of the front-end page, wherein the functional modules comprise corresponding functional fields, and the functional modules are decoupled according to the functional fields to obtain a plurality of decoupling files; the file abstraction module is used for abstracting the plurality of decoupling files into independent single component functions by adopting a singleness principle; and the component packaging module is used for packaging the single component function to obtain a corresponding script file.

According to a third aspect of embodiments of the present disclosure, there is provided an electronic device, comprising: a processor; a memory for storing the processor-executable instructions; the processor is configured to read the executable instructions from the memory and execute the instructions to implement a method for implementing the extensible front-end function component provided in the first aspect of the disclosure.

According to a fourth aspect of embodiments of the present disclosure, there is provided a computer readable storage medium having stored thereon computer program instructions which, when executed by a processor, implement the steps of a method for implementing an extensible front-end function component provided in the first aspect of the present disclosure.

The technical scheme provided by the embodiment of the disclosure can comprise the following beneficial effects: the front-end page function module is decoupled to obtain a plurality of script files which are abstractly packaged into a single component function, and the script files can be multiplexed across frames, so that the application range of the script files is enlarged; the script files are added into an initialization member list, the script files in the initialization member list are initialized to obtain a target component with a unique identifier, and the target component is obtained through unified script files, so that the function expansion and unified management of the target component are facilitated, and the component maintenance is facilitated; detecting a basic component which is associated with a target component in a base, associating the target component with the basic component to obtain a functional component, and realizing function expansion through association between the components; the function components are added into the base to obtain a front-end function component library, the target components can be called in the front-end function component library, centralized control of the components is realized, maintenance is convenient, function expansion can be carried out through association among the components, component application can be carried out across frames, the application range is enlarged, and development efficiency and development quality are improved.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the disclosure and together with the description, serve to explain the principles of the disclosure.

FIG. 1 is a flowchart illustrating a method of implementing an extensible front-end function component, according to an example embodiment.

Fig. 2 is a flow chart illustrating a method of decoupling functional modules according to an example embodiment.

FIG. 3 is a schematic diagram illustrating a single component functional package, according to an example embodiment.

FIG. 4 is a flowchart illustrating a script file initialization method, according to an exemplary embodiment.

FIG. 5 is a flowchart illustrating a method of associating a target component with a base component, according to an example embodiment.

FIG. 6 is a flowchart illustrating a method of functional component library construction, according to an example embodiment.

FIG. 7 is a block diagram illustrating an implementation of an extensible front-end function component, according to an example embodiment.

Fig. 8 is a block diagram of an electronic device, according to an example embodiment.

Detailed Description

Exemplary embodiments will be described in detail below with reference to the accompanying drawings.

It should be noted that the related embodiments and the drawings are only for the purpose of describing exemplary embodiments provided by the present disclosure, and not all embodiments of the present disclosure, nor should the present disclosure be construed to be limited by the related exemplary embodiments.

It should be noted that the terms "first," "second," and the like, as used in this disclosure, are used merely to distinguish between different steps, devices, or modules, and the like. Relational terms are used not to indicate any particular technical meaning nor sequence or interdependence between them.

It should be noted that the modifications of the terms "one", "a plurality", "at least one" as used in this disclosure are intended to be illustrative rather than limiting. Unless the context clearly indicates otherwise, it should be understood as "one or more".

It should be noted that the term "and/or" is used in this disclosure to describe an association between associated objects, and generally indicates that there are at least three associations. For example, a and/or B may at least represent: a exists independently, A and B exist simultaneously, and B exists independently.

It should be noted that the various steps recited in the method embodiments of the present disclosure may be performed in a different order and/or performed in parallel. The scope of the present disclosure is not limited by the order of description of the steps in the related embodiments unless specifically stated.

It should be noted that, all actions for acquiring signals, information or data in the present disclosure are performed under the condition of conforming to the corresponding data protection rule policy of the country of the location and obtaining the authorization given by the owner of the corresponding device.

Exemplary method

FIG. 1 is a flow chart illustrating a method of implementing an extensible front-end functional component, as shown in FIG. 1, for use in front-end development, according to an exemplary embodiment, including the following steps.

In step S110, the functional modules of the front page are decoupled to obtain a plurality of script files that are abstractly packaged into a single component function, and the script files can be multiplexed across the frames.

In some embodiments, when developing the front-end page, the functional module of the front-end page is decoupled first, and the functional module is abstracted into script files with multiple single component functions according to the functions, so that the script files can be multiplexed across frames, thereby being convenient for expansion and being suitable for multiple frames and databases.

Compared with the existing system and framework, the module is decoupled as far as possible, abstracted into the script file by a single function, and packaged into the script file, such as js file, so that a caller can call the required function by the minimum file, and meanwhile, the mutual expansion of the components can be ensured, and the call between the components is not influenced when the maintenance of the addition, the modification and the deletion is performed.

In step S120, the script file is added to the initialized member list, and the script file in the initialized member list is initialized, so as to obtain the target component with the unique identifier.

In some embodiments, since there may be multiple different specifications for the decoupled script file, in order to enable all script files to be used and expanded across frameworks, it is necessary to add the script file with a single component function to the initializing member list, so as to uniformly initialize the script file, and obtain a target component with a unique identifier, where the unique identifier can be used to identify and determine the target component.

In step S130, a base component associated with the target component in the base library is detected, and the target component is associated with the base component, thereby obtaining a functional component.

In some embodiments, the base library is a base function component library, a plurality of base components are pre-stored in the base library, the base components are used for realizing a plurality of base functions, such as moving, switching and selecting, after the target components are acquired, whether the base components related to the target components exist in the base library is detected through unique identifiers of the target components, when the base components related to the target components exist in the base library, the corresponding base components are related to the target components, so that the function components are obtained, and the related base components can be conveniently and simultaneously called when the target components are called, so that the convenience of calling the target components is improved, and the development efficiency and quality are effectively improved.

In step S140, the function component is added to the base library, so as to obtain a front-end function component library, and the target component can be called in the front-end function component library.

In some embodiments, steps S110-S130 are repeated to obtain a plurality of functional components, the obtained plurality of functional components are added to the base library, a front-end functional component library is constructed to obtain the front-end functional component library, the front-end functional component library can be expanded by continuously filling the functional components, the target component can be called in the front-end functional component library, expansion and cross-frame application of the functional components can be realized through the front-end functional component library, in addition, centralized control of the functional components can be realized, and component maintenance is facilitated.

When the function component is called, the simultaneous calling of the target component and the associated base component is realized, for example, when the target component is moving and the associated base component is a selected moving target and stops moving, the moving function component is constructed; when the mobile function component is called, firstly, the base component is called to select a mobile target, secondly, the target component is called to move the mobile target, and finally, the base component is called to stop the movement of the mobile target, so that the moving process of the selected target is realized. Through the mode, the components can be multiplexed for multiple times, and development efficiency is improved; the components can be arbitrarily associated, and various functional components are obtained through combination; based on the association between the components, the front-end system realizes multiple functions required by the front-end, and reduces development difficulty.

The front-end development is abstracted into a plurality of independent target components which are separated from business and adhere to unified convention according to functions, the target components can be associated to obtain functional components, and an extensible front-end functional component library which can be controlled in a centralized manner and can be quoted according to requirements is formed based on the functional components. The method is realized based on the native javascript, does not depend on any three-party library and frame, but can be applied to any library and frame project, can realize required functions in a spliced mode, and component codes can be multiplexed across the frame, so that the research and development quality and efficiency are effectively improved, and meanwhile, the multiplied research and development cost risk caused by technology stack change can be effectively avoided to the greatest extent.

In the embodiment, the front-end page function module is decoupled to obtain a plurality of script files which are abstractly packaged into a single component function, and the script files can be multiplexed across frames, so that the application range of the script files is enlarged; the script files are added into an initialization member list, the script files in the initialization member list are initialized to obtain a target component with a unique identifier, and the target component is obtained through unified script files, so that the function expansion and unified management of the target component are facilitated, and the component maintenance is facilitated; detecting a basic component which is associated with a target component in a base, associating the target component with the basic component to obtain a functional component, and realizing function expansion through association between the components; the function components are added into the base to obtain a front-end function component library, the target components can be called in the front-end function component library, centralized control of the components is realized, maintenance is convenient, function expansion can be carried out through association among the components, component application can be carried out across frames, the application range is enlarged, and development efficiency and development quality are improved.

Fig. 2 is a flowchart illustrating a function module decoupling method according to an exemplary embodiment, and as shown in fig. 2, the function module decoupling method is used in step S110, and includes the following steps:

step S210, a plurality of functional modules of the front-end page are obtained, the functional modules comprise corresponding functional components, and the plurality of functional modules are decoupled according to the functional fields to obtain a plurality of decoupling files.

Specifically, the front-end page is realized by integrating a plurality of functional modules, so that the front-end page corresponds to the functional modules, the functional modules comprise corresponding functional components, the functional modules are usually constructed by a plurality of functions, one functional module can realize a plurality of functions, namely, the functional modules are also integrated by a plurality of functions, and therefore, the functional modules can be decoupled through functional fields to obtain a plurality of decoupling files.

In step S220, a single principle is adopted to abstract the plurality of decoupling files into independent single component functions.

Specifically, in order to avoid the situation that one decoupling file corresponds to a plurality of functions in the decoupling file, a singleness principle needs to be adopted, and a plurality of decoupling files are respectively abstracted into independent single component functions, so that the single component functions can be expanded, multiple multiplexing of single component function codes can be realized, and the working tasks of front-end development can be lightened.

And step S230, packaging the functions of the single component to obtain a corresponding script file.

Specifically, after the single component function is obtained, the single component function is packaged to obtain a script file corresponding to the single component function, and the script file is an independent file with the minimum unit of a basic software language, such as js file, so that the script file can realize cross-frame multiplexing and is compatible with the projects of a plurality of frames, and the application range of the functional component formed by the script file is enlarged.

For example, the functions are abstracted into independent single component functions according to a singleness principle and packaged into independent files, as shown in fig. 3, components such as pop.js, drag.js, tab.js, timer.js and the like are abstracted into a single script file and are respectively used for realizing pop-up windows, dragging, tab switching, timers and the like, so that the functions can be applicable to various framework systems and can be conveniently expanded.

In this embodiment, by acquiring a plurality of function modules including corresponding function components of the front page, decoupling the plurality of function modules according to the function fields to obtain a plurality of decoupled files, abstracting the plurality of decoupled files into independent single component functions by adopting a singleness principle, and packaging the single component functions to obtain corresponding script files, the script files can be conveniently expanded in function, and can be multiplexed across frames, so that compatibility among a plurality of frame systems is realized, and the application range is enlarged.

Fig. 4 is a flowchart illustrating a script file initialization method according to an exemplary embodiment, which is used in step S120 as shown in fig. 4, and includes the steps of:

in step S410, a number of script files are added to the initialized member list.

Specifically, after the script files are acquired, unified processing is required to be performed on the script files with various formats or different specifications, and a plurality of script files are added into the initialized member list so as to perform unified processing on the script files in the initialized member list.

Step S420, injecting an initialization function into the script file corresponding to the initialization member list.

Specifically, after the script files to be processed are added to the initialized member list, an initialization function is injected into the initialized member list, and unified initialization is carried out on all the script files in the list, so that the processed script files are ensured to be uniform in format and specification, and the expansion among components is convenient to realize.

Step 430, uniformly initializing the script file in a batch mode by combining the batch function and the initialization function, and marking the initialized script file with a unique identifier to obtain the target component.

Specifically, when the script file in the initialized member list is initialized, the script file is uniformly initialized in a batch mode by combining a batch function and an initialization function in the base class, so that the initialization efficiency is improved, and the initialized script file is marked with a unique identifier to obtain a target component, so that the target component can be conveniently identified through the unique identifier.

When initialization is carried out, a base class base.js is firstly introduced, and a simple name is assigned for the base class base.js, so that the subsequent faster quotation is facilitated; secondly, introducing one or more components according to the functions to be realized by the front end, and finally, initializing the introduced components, for example, carrying out tab switching initialization on the elements instance1, instance2 and instance3, and carrying out drag initialization on the elements instance4, instance5 and instance6, wherein the elements instance1, instance2 and instance3 have tab switching tab functions, and the elements instance4, instance5 and instance6 have compatible drag flag functions, so that unified target components are obtained, and the components are convenient to expand.

In this embodiment, by adding a plurality of script files to the initializing member list, injecting an initializing function into the initializing member list, and uniformly initializing the script files by adopting a batch processing mode in combination with batch processing functions and initializing functions in the base class, processing efficiency of the script files is improved, unique identification is marked on the initialized script files to obtain a target component, and the target component is obtained through script file processing, so that the target component can realize expansion with the components, thereby realizing multiple functions required by the front end, being applicable to multiple frame systems, and having a wide application range.

In one embodiment, the base component is used for realizing the function of the front-end page base requirement, monitoring and calling the base component are realized by introducing the base class function and naming, and the base library is constructed by combining the base class function and the base component.

Before detecting whether a base component associated with a target component exists in the base, the base needs to be constructed, namely the base is the base component base and is used for realizing the base demand function of a front-end page, so that corresponding base function modules can be obtained based on the base demand function through obtaining the base demand function developed by the front end, such as a pop-up frame, dragging, tab switching, a timer and the like, and the base function modules are split based on a single function to obtain a plurality of single function modules so as to be conveniently associated with the target component and realize function expansion.

And secondly, obtaining codes corresponding to the single function modules according to the acquired single function modules, and carrying out abstract packaging on the codes of the single function modules to obtain a basic script file corresponding to the basic single function.

After the basic script file is obtained, the basic script file is initialized to obtain a basic component with a unique identifier, so that the basic component can be conveniently identified according to the unique identifier, the basic component can be used for realizing the basic function of the front page, and the basic component can be associated with the target component through an association relationship, so that the function expansion is realized.

And introducing and naming the base class function so as to conveniently and quickly quote the base class function, and monitoring and calling the base component through the base class function so as to conveniently and timely call the base component when the base component is triggered.

The base library is constructed by combining the base class functions and the base components, and the base components can be connected through the base class functions based on the association relation, so that the combination triggering is realized, and the efficiency of calling the components is improved; of course, the base component in the base library can be associated with the target component through the association relation, and the combined triggering of the base component and the target component is realized. The base class functions can also provide basic support for the implementation of the base components, such as get elements, add events, and the like.

In this embodiment, by acquiring the basic requirement function developed at the front end, acquiring the corresponding basic function module, splitting the basic requirement function module to obtain a plurality of single function modules, acquiring codes of the plurality of single function modules, abstracting and packaging the codes to obtain the corresponding basic script file, initializing the basic script file to obtain a basic component with unique identification, introducing a basic class function, naming the basic component, monitoring and calling the basic component through the basic class function, and constructing a basic library by combining the basic class function and the basic component, wherein the basic component in the basic library can be called through the basic class function in a combined way, so that the efficiency and convenience of component calling are improved.

FIG. 5 is a flowchart illustrating a method of associating a target component with a base component, as shown in FIG. 5, for use in step S130, according to an exemplary embodiment, comprising the steps of:

step S510, based on the target component, at least one basic component which has an association relation with the target component is detected in the base.

Specifically, the unique identification corresponding to the target component is obtained, the unique identification is detected in the base, the unique identification of the base component in the base is traversed, at least one base component with an association relation with the target component is obtained, and the target component can be associated with the base component based on the association relation, so that function expansion is realized, the calling efficiency of the component is improved, and the development efficiency is improved.

And step S520, associating the target component with at least one basic component according to the basic class function to obtain the functional component.

Specifically, after at least one basic component is obtained, the target component and the at least one basic component are associated through the basic class function, so that a functional component is obtained, that is, when the functional component is called, the target component and the corresponding associated basic component can be called simultaneously, and the complex function required by the front end is realized.

In this embodiment, based on the target component, at least one base component having an association relationship with the target component is detected in the base, the target component and the at least one base component are associated through the base class function, so as to obtain the functional component, and the target component and the associated base component can be simultaneously called through the functional component, so that the calling efficiency of the component is improved, the function expansion is realized, and the front-end development efficiency is improved.

Fig. 6 is a flowchart illustrating a function component library construction method according to an exemplary embodiment, which is used in step S130, as shown in fig. 6, and includes the steps of:

step S610, adding the functional components into a base library, and configuring an event mechanism according to the association relation to obtain a front-end functional component library.

Specifically, after the functional components are acquired, the functional components are added into a base, and a plurality of functional components are added into the base; meanwhile, according to the association relation of the target components, an event mechanism is configured so as to conveniently and simultaneously call the target components and the basic components in the functional components by triggering the event mechanism, thereby improving the component calling efficiency and accelerating the front-end development process; after the functional components and the corresponding event mechanisms are added in the base library, a front-end functional component library is constructed, and the centralized management of the components can be realized through the front-end functional component library, so that the maintenance of the components is facilitated.

Step S620, through the base class function monitoring event mechanism, when the base class function monitors the triggering of the event mechanism, the corresponding functional component is called in the front-end functional component library, namely, the target component and at least one base component associated with the target component are called at the same time.

Specifically, after the event mechanism is configured, the event mechanism is monitored through the base class function, when the base class function monitors that the event mechanism is triggered, the corresponding functional component is called, namely, the simultaneous calling of the target component and at least one base component associated with the target component is realized, the function expansion is realized through the association between the components, and the front-end development efficiency is improved.

In the embodiment, the function components are added into the base library, the event mechanism is configured according to the association relation to obtain a front-end function component library, the event mechanism is monitored through the base class function, when the base class function monitors that the event mechanism triggers, the corresponding function components are called in the front-end function component library, namely, the target function component and at least one associated base component are called at the same time, and function expansion is realized through the association between the components, so that front-end development efficiency and development quality are improved through the components, and the front-end development process is accelerated.

For a better understanding of the present disclosure, implementation methods of the present disclosure are illustrated below.

Components are defined in a functional form and function members are extended to them in a prototype chain form: init, start, move, stop are used for realizing the processing of 4 actions of initializing, starting dragging, moving and stopping moving of the dragging component. Based on Init, start, move, stop these 4 function members, a drag component drags.js is constructed.

The Init function is used to obtain some metadata of the instance, calculate necessary initial values, such as element border width and margin in this example, and monitor event of the instance element.

The Start function is used for setting the z-axis of the element to a higher value (8888 in the component) so as not to be blocked by other elements to influence the dragging effect, and recording the initial coordinate position of the mouse; meanwhile, when the method starts for the first time, event monitoring of movement is added to the element, so that the Move function processes a mouse movement event.

The Move function is used for disabling selection firstly so as not to influence the drag effect of the mouse, when the moving behavior is captured by the component, the coordinate value of the current event is recorded firstly, the initial coordinate value at the Start is subtracted by the value, so that the coordinate distance of the movement in the current event is calculated, when the mouse is about to Move out to the boundary of the webpage, the calculated coordinate value is corrected in time, and finally, the corrected coordinate value is given to the positioning attribute style/top of the element to realize the drag function from the page.

The Stop function is used to clear the interception of movement events and mouse pop events, and at the same time trigger the custom event drop of the component, so that other components have the capability of capturing and processing the events.

Based on the drag component drags.js, when the element is dragged, the width and the margin of the frame of the element are obtained through the Init function, and the left and upper positions of absolute positioning relative to the range element are calculated. Recording a starting point for starting dragging through a Start function, namely, the coordinates of the mouse relative to documents; when the drag target is a picture, the picture is opened in the new window by default in firefox. Limiting the moving x-axis by a Move function, and recording the exceeding range of the left side or the right side of the x-axis; limiting a y-axis, and recording the exceeding range of the upper side or the lower side of the y-axis; calculating the moving distance of the x axis and the y axis, and updating whether an exceeding value exists or not, so that a back pull response can be realized when the exceeding value exists; after the back pull is carried out, the element positions are updated through a Stop function, and the left and upper positions which are positioned relative to the range element absolutely are calculated, so that the element is accurately dragged.

Exemplary apparatus

FIG. 7 is a block diagram of an implementation of an extensible front-end functionality component, shown in accordance with an exemplary embodiment. Referring to fig. 7, the apparatus 700 includes a script file acquisition module 710, a script file initialization module 720, a component association module 730, and a component library construction module 740.

The script file obtaining module 710 is configured to decouple the function module of the front page to obtain a plurality of script files that are abstractly packaged into a single component function, where the script files can be multiplexed across frames;

the script file initializing module 720 is configured to add a script file to an initializing member list, and initialize the script file in the initializing member list to obtain a target component with a unique identifier;

the component association module 730 is configured to detect a base component associated with a target component in the base library, and associate the target component with the base component to obtain a functional component;

the component library construction module 740 is configured to add a functional component to the base library to obtain a front-end functional component library.

In this embodiment, the functional modules of the front end page are decoupled by the script file obtaining module 710 to obtain a plurality of script files abstractly packaged into a single component function, and the script files can be used for implementing cross-frame multiplexing and multiplexing of a plurality of systems, the script file initializing module 720 is used for adding the script files to the initialized member list, initializing the script files in the initialized member list to obtain a target component with unique identification, so that the target component is conveniently identified according to the unique identification, detecting the target component by the component association module 730 to obtain a base component associated with the target component in the base library, and associating the target component with the base component to obtain a functional component, and adding the functional component to the base library by the component library constructing module 740 to obtain a front end functional component library, thereby enabling the target component to be called in the front end functional component library, facilitating the centralized management of the components, facilitating the cross-frame multiplexing of the components in the component library, having a wide application range, and being capable of calling the corresponding base component or functional component according to requirements, realizing the function expansion by the association between the components, improving the quality and developing the front end.

In some embodiments, the apparatus further comprises: the decoupling module is used for acquiring a plurality of functional modules of the front-end page, wherein the functional modules comprise corresponding functional fields, and the plurality of functional modules are decoupled according to the functional fields to obtain a plurality of decoupling files; the file abstraction module is used for abstracting a plurality of decoupling files into independent single component functions by adopting a singleness principle; and the component packaging module is used for packaging the single component function to obtain a corresponding script file.

In some embodiments, the apparatus further comprises: the script file adding module is used for adding a plurality of script files to the initialized member list; the initialization function injection module is used for injecting the initialization function in the base library into the script file corresponding to the initialization member list; the initialization module is used for combining the batch processing function and the initialization function, uniformly initializing the script file in a batch processing mode, and marking the initialized script file with a unique identifier to obtain the target component.

In some embodiments, the apparatus further comprises: the base library construction module is used for realizing monitoring and calling of the base assembly by introducing the base class function and naming, and combining the base class function and the base assembly to construct a base library, wherein the base assembly is used for realizing the function of the front-end page base requirement.

In some embodiments, the apparatus further comprises: the association relation detection module is used for detecting at least one basic component which has association relation with the target component in the base based on the target component; and the functional component acquisition module is used for associating the target component with at least one basic component according to the basic class function to obtain the functional component.

In some embodiments, the apparatus further comprises: the event mechanism configuration module is used for adding the functional components into the base library, and configuring an event mechanism according to the association relation to obtain a front-end functional component library; and the function component calling module is used for calling the corresponding function component in the front-end component library when the base class function monitors the event mechanism to trigger through the base class function, namely, simultaneously calling the target component and at least one base component associated with the target component.

In the above embodiment, through the operation of the device, the implementation method based on an expandable front-end function component is implemented, so that the device is ensured to be capable of implementing all contents of the implementation method of the expandable front-end function component.

Exemplary electronic device

Fig. 8 is a block diagram of an electronic device 800, according to an example embodiment. The electronic device 800 may be a vehicle controller, an in-vehicle terminal, an in-vehicle computer, or other type of electronic device.

Referring to fig. 8, an electronic device 800 may include at least one processor 810 and memory 820. Processor 810 may execute instructions stored in memory 820. The processor 810 is communicatively coupled to the memory 820 via a data bus. In addition to memory 820, processor 810 may also be communicatively coupled to input device 830, output device 840, and communication device 850 via a data bus.

The processor 810 may be any conventional processor, such as a commercially available CPU. The processor may also include, for example, an image processor (Graphic Process Unit, GPU), a field programmable gate array (Field Programmable Gate Array, FPGA), a System On Chip (SOC), an application specific integrated Chip (Application Specific Integrated Circuit, ASIC), or a combination thereof.

The memory 820 may be implemented by any type or combination of volatile or nonvolatile memory devices such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disk.

In the embodiment of the present disclosure, the memory 820 stores executable instructions, and the processor 810 may read the executable instructions from the memory 820 and execute the instructions to implement all or part of the steps of the implementation method of the expandable front-end function component according to any of the foregoing exemplary embodiments.

Exemplary computer-readable storage Medium

In addition to the methods and apparatus described above, exemplary embodiments of the present disclosure may also be a computer program product or a computer readable storage medium storing the computer program product. The computer program product comprises computer program instructions executable by a processor to perform all or part of the steps described in any of the methods of the exemplary embodiments described above.

The computer program product may write program code for performing the operations of embodiments of the present application in any combination of one or more programming languages, including an object oriented programming language such as Java, C++ or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages, as well as scripting languages (e.g., python). The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device, partly on a remote computing device, or entirely on the remote computing device or server.

The computer readable storage medium may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may include, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the readable storage medium include: a Static Random Access Memory (SRAM), an electrically erasable programmable read-only memory (EEPROM), an erasable programmable read-only memory (EPROM), a programmable read-only memory (PROM), a read-only memory (ROM), a magnetic memory, a flash memory, a magnetic or optical disk, or any suitable combination of the foregoing having one or more electrical conductors.

Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure. This application is intended to cover any adaptations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

It is to be understood that the present disclosure is not limited to the precise arrangements and instrumentalities shown in the drawings, and that various modifications and changes may be effected without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for implementing an extensible front-end functional component, comprising:

decoupling the functional modules of the front-end page to obtain a plurality of script files which are abstractly packaged into a single component function, wherein the script files can be multiplexed across frames;

adding the script file to an initialization member list, and initializing the script file in the initialization member list to obtain a target component with a unique identifier;

Detecting a basic component which is associated with the target component in a base, and associating the target component with the basic component to obtain a functional component;

and adding the functional components into the base library to obtain a front-end functional component library.

2. The method for implementing the extensible front-end function module according to claim 1, wherein the decoupling the function module of the front-end page to obtain a plurality of script files abstractly packaged into a single module function includes:

acquiring a plurality of functional modules of a front page, wherein the functional modules comprise corresponding functional fields, and decoupling the functional modules according to the functional fields to obtain a plurality of decoupling files;

abstracting the plurality of decoupling files into independent single component functions by adopting a singleness principle;

and packaging the single component function to obtain a corresponding script file.

3. The method for implementing the extensible front-end function component according to claim 1, wherein adding the script file to an initializing member list, initializing the script file in the initializing member list, and obtaining the target component with the unique identifier, includes:

Adding a plurality of script files to an initialized member list;

injecting an initialization function into a script file corresponding to the initialization member list;

and uniformly initializing the script files in a batch mode by combining a batch function and the initialization function, and marking the initialized script files with unique identifiers to obtain target components.

4. The method for implementing the extensible front-end function component according to claim 1, wherein the base component is used for implementing a front-end page base demand function, monitoring and calling are implemented on the base component by introducing a base class function and naming, and a base library is constructed by combining the base class function and the base component.

5. The method for implementing the extensible front-end function component according to claim 4, wherein the detecting a base component associated with the target component in the base, associating the target component with the base component, and obtaining the function component includes:

detecting at least one basic component with an association relation with the target component in the base based on the target component;

and associating the target component with at least one basic component according to the basic class function to obtain a functional component.

6. The method for implementing the extensible front-end function component according to claim 5, wherein adding the function component to the base library to obtain a front-end function component library comprises:

adding the functional components into the base, and configuring an event mechanism according to the association relation to obtain a front-end functional component base;

and monitoring the event mechanism through the base class function, and calling a corresponding functional component in the front-end functional component library when the base class function monitors that the event mechanism is triggered, namely simultaneously calling a target component and at least one basic component associated with the target component.

7. An implementation apparatus of an expandable front-end functional component, comprising:

the script file acquisition module is used for decoupling the functional module of the front page to obtain a plurality of script files which are abstracted and packaged into a single component function, and the script files can be multiplexed across frames;

the script file initializing module is used for adding the script file into an initializing member list, and initializing the script file in the initializing member list to obtain a target component with a unique identifier;

The component association module is used for detecting a basic component which is associated with the target component in the base library, and associating the target component with the basic component to obtain a functional component;

and the component library construction module is used for adding the functional components into the base library to obtain a front-end functional component library.

8. The apparatus for implementing an extensible front end function module according to claim 7, wherein said apparatus further comprises:

the decoupling module is used for acquiring a plurality of functional modules of the front-end page, wherein the functional modules comprise corresponding functional fields, and the functional modules are decoupled according to the functional fields to obtain a plurality of decoupling files;

the file abstraction module is used for abstracting the plurality of decoupling files into independent single component functions by adopting a singleness principle;

and the component packaging module is used for packaging the single component function to obtain a corresponding script file.

9. An electronic device, comprising:

a processor;

a memory for storing the processor-executable instructions;

the processor is configured to read the executable instructions from the memory and execute the instructions to implement the method for implementing the extensible front-end function component of any one of claims 1 to 6.

10. A computer readable storage medium having stored thereon computer program instructions, which when executed by a processor, perform the steps of the method of implementing the extensible front-end functionality component of any of claims 1 to 6.