Disclosure of Invention
In order to solve the technical problems described above or at least partially solve the technical problems described above, the present disclosure provides a method, an apparatus, a device, and a storage medium for implementing a switch assembly.
In a first aspect, an embodiment of the present disclosure provides a method for implementing a switch assembly, including:
The JS file used for creating the switch component is packaged, wherein the JS file is composed of a construction function, and parameters of the construction function comprise a container identifier, a name parameter, a switch state, a callback function, a mapping relation between the switch state and a true value and an available state;
Adding a plurality of switch container elements in a page in response to a trigger operation that creates a plurality of switch components in the page;
introducing the JS file and creating the plurality of switch components based on the plurality of switch container elements;
In response to an operation request for the switch assembly, a target operation matching the operation request is performed on the switch assembly.
Optionally, each switch component is created by assigning a container identifier, a name parameter, a switch state and a mapping relation of the switch state and a true value according to the input parameters, creating a switch storage value updating function, a switch rendering function, a switch monitoring event function, an initializing function and an operating function, wherein the switch storage value updating function is used for updating values in switch storage elements, the switch rendering function is used for setting the switch state, setting the available state and rendering the switch component, the switch monitoring event function is used for adding a monitoring event when the switch component is started and canceling the monitoring event when the switch component is disabled, and the initializing function is used for calling the switch rendering function and the switch monitoring event function.
Optionally, the operation function comprises a true value setting function and a true value obtaining function, wherein the response to the operation request for the switch component executes target operation matched with the operation request for the switch component, and the operation function comprises the steps of receiving an incoming target true value, calling the true value setting function to update the current true value of the switch component to the target true value, and updating the switch state of the switch component according to the target true value and the mapping relation, or obtaining the switch state of the switch component, calling the true value obtaining function to inquire the true value of the switch component according to the switch state of the switch component and the mapping relation.
Optionally, when the switch component is applied to a form, the responding to the operation request for the switch component executes the target operation matched with the operation request for the switch component, wherein the responding to the form submitting request comprises the steps of acquiring the name parameter of the switch component, and uploading the name parameter and the real value of the switch component to a server.
Optionally, the operation function comprises an enabling and disabling function, and the target operation matched with the operation request is performed on the switch component in response to the operation request of the switch component, wherein the method comprises the steps of receiving an incoming target available state, calling the enabling and disabling function to update the current available state of the switch component to the target available state, and calling a switch rendering function and a switch monitoring event function to re-render the switch component.
Optionally, after the JS file is imported and the plurality of switch components are created based on the plurality of switch container elements, an initialization operation is performed on the switch components to set a switch state and an available state of the switch components. In a second aspect, an embodiment of the present disclosure provides an implementation apparatus of a switch assembly, including:
The packaging module is used for packaging a JS file for creating a switch component, wherein the JS file is composed of a construction function, and parameters of the construction function comprise a container identifier, a name parameter, a switch state, a callback function, a mapping relation between the switch state and a true value and an available state;
an adding module for adding a plurality of switch container elements in a page in response to a trigger operation of creating a plurality of switch components in the page;
A creation module for importing the JS file and creating the plurality of switch components based on the plurality of switch container elements;
and the operation module is used for responding to the operation request for the switch assembly and executing target operation matched with the operation request on the switch assembly.
In a third aspect, an embodiment of the present disclosure provides an electronic device, including a processor, a memory for storing executable instructions of the processor, and the processor, configured to read the executable instructions from the memory and execute the instructions to implement a method for implementing the switch assembly described in the first aspect.
In a fourth aspect, an embodiment of the present disclosure provides a computer readable storage medium, where a computer program is stored, where the computer program is executed by a processor to implement a method of implementing the switch assembly described in the first aspect.
Compared with the prior art, the technical scheme provided by the embodiment of the disclosure has the advantages that the JS file for creating the switch assembly is packaged, a plurality of switch container elements are added in a page, the JS file is introduced, the plurality of switch assemblies are created based on the plurality of switch container elements, and the target operation matched with the operation request is executed on the switch assembly in response to the operation request for the switch assembly, so that the method for creating the plurality of switches based on multiplexing of the packaged JS file is realized, one declaration and multiple quotation effects can be achieved in a scene of creating the plurality of switch assemblies, the repeated writing of the same code is avoided, and the high-efficiency development of the switch assembly is realized.
Detailed Description
In order that the above objects, features and advantages of the present disclosure may be more clearly understood, a further description of aspects of the present disclosure will be provided below. It should be noted that, without conflict, the embodiments of the present disclosure and features in the embodiments may be combined with each other.
In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present disclosure, but the present disclosure may be practiced otherwise than as described herein, and it is apparent that the embodiments in the specification are only some, rather than all, of the embodiments of the present disclosure.
Fig. 1 is a flow chart of a method for implementing a switch assembly according to an embodiment of the present disclosure, where the method provided by the embodiment of the present disclosure may be implemented by an implementation device of the switch assembly, and the device may be implemented by software and/or hardware and may be integrated on any electronic device having computing capabilities, for example, a user terminal such as a smart phone, a tablet computer, or the like.
As shown in fig. 1, a method for implementing a switch assembly provided in an embodiment of the disclosure may include:
step 101, a JS file for creating a switch component is encapsulated.
In this embodiment, HTML (Hyper Text Markup Language ) structures required by the switch component and the state processing logic of the switch are encapsulated to generate the JS file. The JS file is composed of constructors to create instances of switches by constructors. The parameters of the constructor include a container identifier (hereinafter referred to as id), a name parameter (hereinafter referred to as name), a switch state (hereinafter referred to as switchValue), a callback function (hereinafter referred to as changeFun), a mapping relationship between the switch state and a true value (hereinafter referred to as switchGroup), and an available state (hereinafter referred to as SWITCHSTATE).
As one example, the parameters of the constructor are shown in the following table.
Wherein, id is the id of the switch container element, and each switch corresponds to a unique id.
Name-the name parameter is assigned to the name attribute of the switch storage element.
SwitchValue the state of the switch, open or closed, the state of the switch when the constructor is first entered is an initial state, e.g. the initial state is an off state.
ChangeFun a callback function after switching the switch state, which is used for processing the event after switching the switch state.
SwitchGroup the mapping relation between the self-defined switch state and the value is the key value pair of open and closed, for example, { open: 'on', closed: 'off' }.
SWITCHSTATE for enabling and disabling of the switch, it can be set at initialization whether the switch is enabled.
Step 102, adding a plurality of switch container elements in a page in response to a trigger operation that creates a plurality of switch components in the page.
In this embodiment, for each switch component, a switch container element is added to the HTML file of the page, where the switch container element may be a block element or an in-line element, and a switch container element unique id is set.
Step 103, a JS file is imported and a plurality of switch components are created based on the plurality of switch container elements.
In this embodiment, the switch container elements are in one-to-one correspondence with the switch components, and the JS file packaged in the foregoing steps is introduced into the page, and then, a switch instance is created under the page by using the JS file, so that multiple switches can be created based on multiplexing of the JS file, so as to implement a method for componentizing a switch button, avoid repeated writing of the same code, for example, the method is applied to a web management interface, and in a scene of creating multiple switch components, the effects of one-time declaration and multiple references can be achieved, the problem of repeated writing of codes is solved, and high-efficiency development is realized.
As an example, based on the JS file, the switch component is created by assigning values to the container identifier, the name parameter, the switch state and the mapping relation between the switch state and the real value according to the input parameter, creating a switch storage value updating function, a switch rendering function, a switch monitoring event function, an initializing function and an operating function, wherein the switch storage value updating function is used for updating the value in the switch storage element, the switch rendering function is used for setting the switch state, setting the available state and rendering the switch component, the switch monitoring event function is used for adding a monitoring event when the switch component is started and canceling the monitoring event when the switch component is disabled, and the initializing function is used for calling the switch rendering function and the switch monitoring event function.
Step 104, in response to the operation request for the switch component, performing a target operation matching the operation request on the switch component.
In this embodiment, for the switch assembly created in the above manner, a series of operations may be performed on the switch assembly to flexibly control the switch, so as to meet the operation requirements of the switch assembly in different scenarios, where the target operations include setting the switch state, obtaining the actual value of the switch, and so on.
According to the technical scheme of the embodiment of the disclosure, the JS file used for creating the switch assembly is packaged, a plurality of switch container elements are added in a page, the JS file is introduced, the plurality of switch assemblies are created based on the plurality of switch container elements, and the target operation matched with the operation request is performed on the switch assembly in response to the operation request aiming at the switch assembly, so that the method for creating the plurality of switches based on multiplexing of the packaged JS file is realized, one-time statement can be achieved in a scene of creating the plurality of switch assemblies, the effect of multiple references is achieved, repeated writing of the same codes is avoided, and the high-efficiency development of the switch assembly is realized.
Based on the above embodiments, the following description is made in connection with the creation step of the switch assembly.
Fig. 2 is a flowchart of a specific implementation of a packaged switch assembly JS file according to an embodiment of the disclosure, where, as shown in fig. 2, the creating step includes:
And 201, assigning values to the container identification, the name parameter, the switch state and the mapping relation between the switch state and the true value according to the input parameters.
In this embodiment, first, the input parameters are checked and mounted on the switch instance object, i.e. the parameters are assigned to the switch instance object, including id, name, switchValue, switchGroup.
Step 202, a switch stored value update function, a switch rendering function, a switch listening event function, an initialization function and an operation function are sequentially executed.
In this embodiment, a switch storage value update function is created for updating the values in the switch storage elements according to the switch states.
Creating a switch rendering function for setting a switch state, setting an available state, and rendering a switch component. Specifically, when the current switch state is open according to switchValue and switchValue, the switch state is selected, otherwise, the switch state is deselected, enabling or disabling of the switch is set according to SWITCHSTATE, the real value of the switch is added into the switch storage element, and the html structure is rendered into the switch container element.
A switch snoop event function is created for adding snoop events when the switch component is enabled and canceling snoop events when the switch component is disabled. Specifically, when an event of clicking a switch is detected, a reverse operation is performed on the switch state switchValue, the current switch state is recorded on a switch instance object, a switch storage value update function is called to update a value in a switch storage element, and a callback function changeFun is called.
And creating an initialization function, wherein the initialization function is used for calling the switch rendering function and the switch monitoring event function.
Creating an operation function, wherein the operation function comprises a true value setting function, a true value acquisition function, a state setting function and an enabling and disabling function.
In one embodiment of the present disclosure, after introducing the JS file and creating the plurality of switch components based on the plurality of switch container elements, further comprising performing an initialization operation on the switch components to set a switch state and an available state of the switch components.
The target operation of the switch assembly is described below.
In one embodiment of the present disclosure, in response to an operation request for a switch assembly, performing a target operation on the switch assembly that matches the operation request includes receiving an incoming target real value, invoking a real value setting function to update a current real value of the switch assembly to a target real value, and updating a switch state of the switch assembly according to the target real value and the mapping relationship. Specifically, the value of switchVaule is determined from the entered true value and the mapping of switch state and value, the switchVaule value is updated, and then the switch rendering function is invoked to re-render the page while changing the switch state.
And acquiring the switching state of the switch assembly, calling a real value acquisition function, and inquiring the real value of the switch assembly according to the switching state and the mapping relation of the switch assembly. Specifically, the switch true value is determined according to the value switchVaule and the mapping relationship between the switch state and the value.
And receiving the incoming target switch state, and calling a state setting function to update the current switch state of the switch assembly to the target switch state. Specifically, the value of switchVaule is modified according to the received parameters and the switch rendering function is invoked to re-render the page.
In practical application, the switch values sent to the client by the server have diversity and different definitions of the switch values, and in the embodiment, the user is supported to self-define the corresponding relation between the switch state and the switch values by registering the switch component when initializing the interface, so that the problem of switching value transmission is solved. Specifically, the switch may store a real value, establish a mapping relationship between a switch state and a value, and support user definition, for example, when the switch is turned on, the switch state is open, the real value is set to a, when the switch is turned off, the switch state is closed, and the real value is set to b, so that a user may define a real value represented by the switch being turned on or off when creating a component instance.
Further, in one embodiment of the present disclosure, when the switch assembly is applied to a form, in response to an operation request for the switch assembly, performing a target operation on the switch assembly that matches the operation request includes obtaining a name parameter of the switch assembly in response to a form submission request, and uploading the name parameter and a true value of the switch assembly to a server.
In particular, the real value of the switch component is stored with an input element, referred to as a switch storage element in this example. When the component is initialized, the name of the parameter to be submitted in the form is assigned to the name attribute, for example, if data with the name of state needs to be submitted to the server, the state is assigned to the name attribute of the switch storage element. Setting the mapping relation between the switch state and the value as open corresponding on and closed corresponding off, when the switch is turned on, assigning the real value on of the switch to the value attribute of the switch storage element, and when the switch is turned off, assigning the real value off of the switch to the value attribute of the switch storage element, wherein the real value is consistent with the value in the switch storage element. Further, when the form is submitted to the server, the server may receive a value in the input element with a name attribute of state, i.e. a value in the switch storage element. Therefore, for the switch in the form, there is a need to directly obtain the real value corresponding to the switch state and submit the real value to the server, in this embodiment, the input element is embedded in the switch component, and when the component is registered, the input element with the name attribute, which can be directly submitted to the server, is constructed, and the input element can be directly submitted to the server, so that the problem of submitting the real value of the switch state in the form is solved, and the form submission is compatible.
In one embodiment of the present disclosure, in response to an operation request for the switch component, performing a target operation on the switch component that matches the operation request includes receiving an incoming target available state, invoking an enable disable function to update a current available state of the switch component to the target available state, and invoking a switch render function and a switch snoop event function to re-render the switch component. Wherein the target availability states include an enabled state and a disabled state.
Specifically, the parameter that is entered is enable (indicating enablement). And reassigning SWITCHSTATE on the switch instance, calling a switch rendering function and a switch monitoring event function, and realizing the re-rendering of the switch element and the re-adding of the event.
The input element (i.e. check box) of the checkbox type is used for controlling the state of the switch, wherein the input element corresponds to the switch on state when being checked, corresponds to the switch off state when being unchecked, adds an disable attribute to the input element and corresponds to the disable state, and the input element corresponds to the enable state when being removed. When the available state of the switch is in a disabled state, the switch can only be checked and can not be modified (opened or closed), namely, the switch can not be selected or cancelled or clicked, so that the state of the switch can not be modified, the disabled effect can be achieved, and when the available state of the switch is in an enabled state, the switch can be modified. Thereby, the enabling and disabling functionality of the switch assembly is extended.
Fig. 3 is a schematic structural diagram of an implementation device of a switch assembly according to an embodiment of the present disclosure, and as shown in fig. 3, the implementation device of the switch assembly includes a packaging module 31, an adding module 32, a creating module 33, and an operating module 34.
The encapsulation module 31 is configured to encapsulate a JS file for creating a switch component, where the JS file is composed of a constructor, and parameters of the constructor include a container identifier, a name parameter, a switch state, a callback function, a mapping relationship between a switch state and a real value, and an available state.
An adding module 32 for adding a plurality of switch container elements in a page in response to a trigger operation that creates a plurality of switch components in the page.
A creation module 33 for importing the JS file and creating the plurality of switch components based on the plurality of switch container elements.
An operation module 34, configured to perform, on the switch assembly, a target operation matched with the operation request in response to the operation request for the switch assembly.
In one embodiment of the present disclosure, the creation module 33 is specifically configured to assign values to the container identifier, the name parameter, the switch state, and the mapping relation between the switch state and the real value according to the parameters, create a switch storage value update function, a switch rendering function, a switch listening event function, an initialization function, and an operation function, where the switch storage value update function is used to update the values in the switch storage elements, the switch rendering function is used to set the switch state, set the available state, and render the switch component, the switch listening event function is used to add a listening event when the switch component is enabled, and cancel the listening event when the switch component is disabled, and the initialization function is used to call the switch rendering function and the switch listening event function.
In one embodiment of the present disclosure, the operation function includes a real value setting function and a real value obtaining function, and the operation module 34 is specifically configured to receive an incoming target real value, call the real value setting function to update a current real value of the switch component to the target real value, and update a switch state of the switch component according to the target real value and the mapping relationship, or obtain the switch state of the switch component, call the real value obtaining function to query the real value of the switch component according to the switch state of the switch component and the mapping relationship.
In one embodiment of the present disclosure, when the switch component is applied to a form, the operation module 34 is specifically configured to obtain a name parameter of the switch component in response to a form submitting request, and upload the name parameter and a true value of the switch component to a server.
In one embodiment of the present disclosure, the operating functions include an enable disable function, and the operating module 34 is specifically configured to receive an incoming target available state, call the enable disable function to update the current available state of the switch assembly to the target available state, and call a switch render function and a switch snoop event function to re-render the switch assembly.
In one embodiment of the disclosure, the implementation device of the switch assembly further comprises an initialization module, which is used for performing initialization operation on the switch assembly to set the switch state and the available state of the switch assembly. The initialization operation is to dynamically generate a DOM structure and render the DOM structure into a switch container.
The implementation device of the switch assembly provided by the embodiment of the disclosure can execute the implementation method of any switch assembly provided by the embodiment of the disclosure, and has the corresponding functional modules and beneficial effects of the execution method. Details of the embodiments of the apparatus of the present disclosure that are not described in detail may refer to descriptions of any of the embodiments of the method of the present disclosure.
Fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the disclosure. As shown in fig. 4, the electronic device 600 includes one or more processors 601 and memory 602.
The processor 601 may be a Central Processing Unit (CPU) or other form of processing unit having data processing and/or instruction execution capabilities and may control other components in the electronic device 600 to perform desired functions.
The memory 602 may include one or more computer program products, which may include various forms of computer-readable storage media, such as volatile memory and/or non-volatile memory. Volatile memory can include, for example, random Access Memory (RAM) and/or cache memory (cache) and the like. The non-volatile memory may include, for example, read Only Memory (ROM), hard disk, flash memory, and the like. One or more computer program instructions may be stored on a computer readable storage medium and the processor 601 may execute the program instructions to implement the methods of the embodiments of the present disclosure above and/or other desired functions. Various contents such as an input signal, a signal component, a noise component, and the like may also be stored in the computer-readable storage medium.
In one example, the electronic device 600 may also include an input device 603 and an output device 604, which are interconnected by a bus system and/or other form of connection mechanism (not shown). In addition, the input device 603 may also include, for example, a keyboard, a mouse, and the like. The output device 604 may output various information to the outside, including the determined distance information, direction information, and the like. The output means 604 may include, for example, a display, speakers, a printer, and a communication network and remote output devices connected thereto, etc.
Of course, only some of the components of the electronic device 600 that are relevant to the present disclosure are shown in fig. 4 for simplicity, components such as buses, input/output interfaces, etc. are omitted. In addition, the electronic device 600 may include any other suitable components depending on the particular application.
In addition to the methods and apparatus described above, embodiments of the present disclosure may also be a computer program product comprising computer program instructions which, when executed by a processor, cause the processor to perform any of the methods provided by the embodiments of the present disclosure.
The computer program product may be written 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. 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.
Furthermore, embodiments of the present disclosure may also be a computer-readable storage medium having stored thereon computer program instructions which, when executed by a processor, cause the processor to perform any of the methods provided by the embodiments of the present disclosure.
A 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 (a non-exhaustive list) of a readable storage medium include an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
It should be noted that in this document, relational terms such as "first" and "second" and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises an element.
The foregoing is merely a specific embodiment of the disclosure to enable one skilled in the art to understand or practice the disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the disclosure. Thus, the present disclosure is not intended to be limited to the embodiments shown and described herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.