Implementation Method, Device, Equipment and Storage Medium of Switching Component

Abstract

The present disclosure relates to a method, apparatus, device, and storage medium for implementing a switch component. The method comprises: encapsulating a JS file for creating a switch component; in response to a trigger operation to create multiple switch components on a page, adding multiple switch container elements to the page; importing the JS file and creating the multiple switch components based on the multiple switch container elements; and in response to an operation request for the switch component, performing a target operation on the switch component that matches the operation request. The technical solution of the present disclosure provides a method for creating multiple switches based on the reuse of the JS file, avoiding the need to rewrite the same code and achieving efficient development of switch components.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a method, apparatus, device, and storage medium for implementing a switch assembly. Background Art

[0002] Web applications are widely used in various scenarios, such as shopping malls, blogs, and hardware device management interfaces. In device web management interfaces, switch buttons are widely used. In web management interfaces, switches primarily serve two purposes: displaying the status of an item and changing its status.

[0003] Currently, since web management interfaces use a large number of switch buttons, how to componentize the switch buttons and reduce code duplication is a problem to be solved. Summary of the Invention

[0004] In order to solve the above technical problems or at least partially solve the above technical problems, the present disclosure provides a method, apparatus, device and storage medium for implementing a switch assembly.

[0005] In a first aspect, an embodiment of the present disclosure provides a method for implementing a switch assembly, including:

[0006] Encapsulate a JS file for creating a switch component, wherein the JS file consists of a constructor whose parameters include: container identifier, name parameter, switch state, callback function, mapping relationship between switch state and real value, and available state;

[0007] In response to a triggering operation of creating multiple switch components in a page, adding multiple switch container elements to the page;

[0008] Import the JS file and create the multiple switch components based on the multiple switch container elements;

[0009] In response to an operation request for the switch component, a target operation matching the operation request is performed on the switch component.

[0010] Optionally, each of the switch components is created by the following steps: assigning values to the container identifier, name parameter, switch state, and the mapping relationship between the switch state and the real value according to the passed-in parameters; creating a switch storage value update function, a switch rendering function, a switch event listening function, an initialization function, and an operation function; wherein the switch storage value update function is used to update the value in the switch storage element, the switch rendering function is used to set the switch state, set the available state, and render the switch component, the switch event listening 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 event listening function.

[0011] Optionally, the operation function includes a real value setting function and a real value acquisition function. In response to the operation request for the switch component, the target operation matching the operation request is performed on the switch component, including: receiving the incoming target real value, calling the real value setting function to update the current real value of the switch component to the target real value, and updating the switch state of the switch component according to the target real value and the mapping relationship; or, obtaining the switch state of the switch component, calling the real value acquisition function to query the real value of the switch component according to the switch state of the switch component and the mapping relationship.

[0012] Optionally, when the switch component is applied to a form, the response to the operation request for the switch component is to perform a target operation matching the operation request on the switch component, including: obtaining a name parameter of the switch component in response to the form submission request; and uploading the name parameter and the real value of the switch component to the server.

[0013] Optionally, the operation function includes an enable / disable function, which responds to an operation request for the switch component and performs a target operation matching the operation request on the switch component, including: receiving an incoming target available state, calling the enable / disable function to update the current available state of the switch component to the target available state; and calling the switch rendering function and the switch event listening function to re-render the switch component.

[0014] Optionally, after introducing the JS file and creating the multiple switch components based on the multiple switch container elements, the method further includes: performing an initialization operation on the switch components to set the switch state and available state of the switch components. In a second aspect, an embodiment of the present disclosure provides an implementation device for a switch component, including:

[0015] An encapsulation module, configured to encapsulate a JS file for creating a switch component, wherein the JS file is composed of a constructor whose parameters include: a container identifier, a name parameter, a switch state, a callback function, a mapping relationship between the switch state and the actual value, and an available state;

[0016] An adding module, configured to add a plurality of switch container elements to the page in response to a triggering operation of creating a plurality of switch components in the page;

[0017] Creating a module, configured to import the JS file and create the multiple switch components based on the multiple switch container elements;

[0018] The operation module is configured to, in response to an operation request for the switch component, perform a target operation matching the operation request on the switch component.

[0019] In a third aspect, an embodiment of the present disclosure provides an electronic device, comprising: a processor; a memory for storing executable instructions of the processor; the processor, for reading the executable instructions from the memory and executing the instructions to implement the implementation method of the switch component described in the first aspect above.

[0020] In a fourth aspect, an embodiment of the present disclosure provides a computer-readable storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, the implementation method of the switch component described in the first aspect above is implemented.

[0021] The technical solution provided by the embodiments of the present disclosure has the following advantages over the prior art: by encapsulating the JS file used to create the switch component, adding multiple switch container elements to the page, introducing the JS file and creating multiple switch components based on the multiple switch container elements; in response to an operation request for the switch component, performing a target operation matching the operation request on the switch component, thereby realizing a method for creating multiple switches based on the reuse of the encapsulated JS file. In the scenario of creating multiple switch components, the effect of one declaration and multiple references can be achieved, thus avoiding repeated writing of the same code and realizing efficient development of switch components. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0023] In order to more clearly illustrate the embodiments of the present disclosure or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0024] Figure 1 A schematic flow chart of a method for implementing a switch assembly provided in an embodiment of the present disclosure;

[0025] Figure 2 A schematic diagram of a specific implementation flow of a packaged switch component JS file provided in an embodiment of the present disclosure;

[0026] Figure 3 A schematic structural diagram of a device for implementing a switch assembly provided in an embodiment of the present disclosure;

[0027] Figure 4 A schematic structural diagram of an electronic device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0028] In order to more clearly understand the above-mentioned objectives, features and advantages of the present disclosure, the scheme of the present disclosure will be further described below. It should be noted that the embodiments of the present disclosure and the features therein can be combined with each other in the absence of conflict.

[0029] In the following description, many specific details are set forth to facilitate a full understanding of the present disclosure, but the present disclosure may also be implemented in other ways different from those described herein; it is obvious that the embodiments in the specification are only part of the embodiments of the present disclosure, rather than all of the embodiments.

[0030] Figure 1 This is a flow chart of a method for implementing a switch component provided in an embodiment of the present disclosure. The method provided in an embodiment of the present disclosure can be executed by an implementation device of the switch component, which can be implemented using software and / or hardware and can be integrated into any electronic device with computing capabilities, such as user terminals such as smartphones and tablet computers.

[0031] like Figure 1 As shown, the implementation method of the switch assembly provided by the embodiment of the present disclosure may include:

[0032] Step 101: encapsulate a JS file for creating a switch component.

[0033] In this embodiment, the HTML (Hypertext Markup Language) structure required by the switch component and the switch state processing logic are encapsulated to generate a JavaScript file. The JavaScript file consists of a constructor function that creates a switch instance. The constructor parameters 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 between the switch state and the actual value (hereinafter referred to as switchGroup), and an available state (hereinafter referred to as switchState).

[0034] As an example, the parameters of the constructor are shown in the following table.

[0035]

[0036] Among them, id: the id of the switch container element, each switch corresponds to a unique id.

[0037] name: Assign the name parameter to the name attribute of the switch storage element.

[0038] switchValue: The state of the switch, open or closed. When the constructor is first passed in, the switch state is the initial state, for example, the initial state is closed.

[0039] changeFun: callback function after the switch state is switched, used for event processing after the switch state is switched.

[0040] switchGroup: A custom mapping between switch states and values, that is, a key-value pair of open and closed, for example: {open: 'on', closed: 'off'}.

[0041] switchState: used to enable or disable the switch. You can set whether the switch is enabled during initialization.

[0042] Step 102 : In response to a triggering operation of creating multiple switch components in a page, multiple switch container elements are added to the page.

[0043] In this embodiment, for each switch component, a switch container element is added to the HTML file of the page. The switch container element may be a block element or an inline element, and a unique id of the switch container element is set.

[0044] Step 103: Import the JS file and create multiple switch components based on multiple switch container elements.

[0045] In this embodiment, the switch container element corresponds to the switch component one-to-one. By introducing the JS file encapsulated in the above steps into the page, and then using the JS file to create a switch instance under the page, multiple switches can be created based on the reuse of the JS file to implement a component-based method for switch buttons, avoiding repeated writing of the same code. For example, when applied to a web management interface, in the scenario of creating multiple switch components, the effect of one declaration and multiple references can be achieved, solving the problem of repeated code writing and achieving efficient development.

[0046] As an example, based on the above JS file, the switch component is created through the following steps: assign values to the container identifier, name parameter, switch state, and the mapping relationship between the switch state and the real value according to the passed-in parameters; create a switch storage value update function, a switch rendering function, a switch listening event function, an initialization function, and an operation function; wherein, the switch storage value update function is used to update the value in the switch storage element, 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.

[0047] Step 104 : In response to the operation request for the switch component, perform a target operation matching the operation request on the switch component.

[0048] In this embodiment, for the switch component created in the above manner, a series of operations can be performed on the switch component to flexibly control the switch to meet the operational requirements of the switch component in different scenarios, where the target operations include setting the switch state, obtaining the actual value of the switch, etc.

[0049] According to the technical solution of the embodiment of the present disclosure, by encapsulating the JS file used to create the switch component, multiple switch container elements are added to the page, the JS file is introduced and multiple switch components are created based on the multiple switch container elements; in response to the operation request for the switch component, the target operation matching the operation request is performed on the switch component. Thus, a method for creating multiple switches based on the reuse of the encapsulated JS file is realized. In the scenario of creating multiple switch components, the effect of one declaration and multiple references can be achieved, thereby avoiding repeated writing of the same code and realizing efficient development of switch components.

[0050] Based on the above embodiment, the steps of creating a switch component are described below.

[0051] Figure 2 This is a flow chart of a specific implementation of a packaged switch component JS file provided in an embodiment of the present disclosure, such as Figure 2As shown, the creation steps include:

[0052] Step 201 : Assign values to the container identifier, name parameter, switch status, and mapping relationship between the switch status and the real value according to the input parameters.

[0053] In this embodiment, first, the input parameters are verified and mounted on the switch instance object, that is, the parameters are assigned to the switch instance object, including id, name, switchValue, and switchGroup.

[0054] Step 202 , executing in sequence the creation of a switch storage value update function, a switch rendering function, a switch event monitoring function, an initialization function, and an operation function.

[0055] In this embodiment, a switch storage value update function is created to update the value in the switch storage element according to the switch state.

[0056] Create a switch rendering function, which is used to set the switch state, enable state, and render the switch component. Specifically, the current switch state is set according to switchValue. When switchValue is open, the switch state is selected, otherwise it is unselected. Set the switch to enabled or disabled according to switchState. Add the actual value of the switch to the switch storage element. Render the HTML structure into the switch container element.

[0057] Create a switch event listener function, which adds a listener event when the switch component is enabled and cancels the listener event when the switch component is disabled. Specifically, when a switch click event is detected, the switch state switchValue is inverted and the current switch state is recorded on the switch instance object. The switch storage value update function is called to update the value in the switch storage element. The callback function changeFun is called.

[0058] Create an initialization function, which is used to call the switch rendering function and the switch event monitoring function.

[0059] Create operation functions, which include real value setting function, real value acquisition function, state setting function, and enable / disable function.

[0060] In one embodiment of the present disclosure, after introducing the JS file and creating multiple switch components based on multiple switch container elements, the method further includes: performing an initialization operation on the switch components to set the switch state and available state of the switch components.

[0061] The target operation of the switch assembly is described below.

[0062] In one embodiment of the present disclosure, in response to an operation request for a switch component, performing a target operation on the switch component that matches the operation request includes: receiving an incoming target real value, calling a real value setting function to update the current real value of the switch component to the target real value, and updating the switch state of the switch component based on the target real value and the mapping relationship. Specifically, the value of switchValue is determined based on the incoming real value and the mapping relationship between the switch state and value, the switchValue value is updated, and then the switch rendering function is called to re-render the page while changing the switch state.

[0063] Furthermore, the switch state of the switch component is obtained, and the real value acquisition function is called to query the real value of the switch component according to the switch state and the mapping relationship of the switch component. Specifically, the real value of the switch is determined according to the value of switchVaule and the mapping relationship between the switch state and the value.

[0064] And, receiving the incoming target switch state, calling the state setting function to update the current switch state of the switch component to the target switch state. Specifically, modifying the value of switchValue according to the received parameters and calling the switch rendering function to re-render the page.

[0065] In practical applications, the switch values sent from the server to the client vary, and the definitions of switch values also vary. This embodiment allows users to customize the mapping between switch states and values by registering a switch component during interface initialization, solving the problem of switch value transmission. Specifically, the switch can store real values, establish a mapping relationship between switch states and values, and support user customization. For example, when the switch is on, the switch state is open, and the real value is set to a; when the switch is off, the switch state is closed, and the real value is set to b. Thus, users can define the real value represented by the switch being on or off when creating a component instance.

[0066] Furthermore, in one embodiment of the present disclosure, when a switch component is applied to a form, in response to an operation request for the switch component, a target operation matching the operation request is performed on the switch component, including: obtaining a name parameter of the switch component in response to the form submission request; and uploading the name parameter and actual value of the switch component to the server.

[0067] Specifically, the input element is used to store the real value of the switch component. In this example, the input element is called a switch storage element. 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 named state needs to be submitted to the server, state is assigned to the name attribute of the switch storage element. The mapping relationship between the switch state and the value is set to open for on and closed for off. When the switch is turned on, the real value on of the switch is assigned to the value attribute of the switch storage element. When the switch is closed, the real value off of the switch is assigned to the value attribute of the switch storage element. At this time, the real value is consistent with the value in the switch storage element. Furthermore, when the form is submitted to the server, the server can receive the value value in the input element whose name attribute is state, that is, the value in the switch storage element. It can be seen that for the switch in the form, there is a need to directly obtain the real value corresponding to the switch state and submit it to the server. In this embodiment, the switch component embeds an input element. When the component is registered, the name parameter is passed in to construct an input element with a name attribute that can be directly submitted to the server. Then, the input element can be submitted directly to the server through this input element, solving the problem of submitting the real value of the switch state in the form to be compatible with form submission.

[0068] In one embodiment of the present disclosure, in response to an operation request for a switch component, performing a target operation matching the operation request on the switch component includes: receiving an incoming target availability state, calling an enable / disable function to update the current availability state of the switch component to the target availability state; and calling a switch rendering function and a switch event listening function to re-render the switch component. The target availability state includes an enabled state and a disabled state.

[0069] Specifically, the parameter passed in is enable (indicating enable). The switchState on the switch instance is reassigned, and the switch rendering function and switch event listening function are called to re-render the switch element and re-add the event.

[0070] Among them, the checkbox type input element (i.e., checkbox) is used to control the state of the switch: when the input element is selected, it corresponds to the switch on state; when the input element is unselected, it corresponds to the switch off state; and, adding the disabled attribute to the input element corresponds to the disabled state; when the disabled attribute of the input element is removed, it corresponds to the enabled state. Among them, when the available state of the switch is disabled, the switch can only be viewed and cannot be modified (on or off), that is, the switch cannot be selected or unchecked, nor can it be clicked, and thus the state of the switch cannot be modified, achieving a disabled effect; when the available state of the switch is enabled, it can be modified. In this way, the enable and disable functions of the switch component are expanded.

[0071] Figure 3 This is a structural diagram of a device for implementing a switch assembly provided by an embodiment of the present disclosure, such as Figure 3 As shown, the implementation device of the switch component includes: an encapsulation module 31, an adding module 32, a creation module 33, and an operation module 34.

[0072] Among them, the encapsulation module 31 is used to encapsulate the JS file used to create the switch component, wherein the JS file is composed of a constructor, and the parameters of the constructor include: container identifier, name parameter, switch status, callback function, mapping relationship between switch status and real value, and available status.

[0073] The adding module 32 is configured to add a plurality of switch container elements in the page in response to a triggering operation of creating a plurality of switch components in the page.

[0074] The creation module 33 is configured to import the JS file and create the multiple switch components based on the multiple switch container elements.

[0075] The operation module 34 is configured to, in response to an operation request for the switch component, perform a target operation matching the operation request on the switch component.

[0076] In one embodiment of the present disclosure, the creation module 33 is specifically used to: assign values to the container identifier, name parameter, switch state, and the mapping relationship between the switch state and the real value according to the input parameters; create a switch storage value update function, a switch rendering function, a switch listening event function, an initialization function, and an operation function; wherein the switch storage value update function is used to update the value in the switch storage element, 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.

[0077] In one embodiment of the present disclosure, the operation function includes a real value setting function and a real value acquisition function, and the operation module 34 is specifically used to: receive an incoming target real value, call the real value setting function to update the current real value of the switch component to the target real value, and update the 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 acquisition function to query the real value of the switch component according to the switch state of the switch component and the mapping relationship.

[0078] In one embodiment of the present disclosure, when the switch component is applied to a form, the operation module 34 is specifically used to: obtain the name parameter of the switch component in response to a form submission request; and upload the name parameter and the actual value of the switch component to the server.

[0079] In one embodiment of the present disclosure, the operation function includes an enable / disable function, and the operation module 34 is specifically used to: receive the incoming target available state, call the enable / disable function to update the current available state of the switch component to the target available state; call the switch rendering function and the switch listening event function to re-render the switch component.

[0080] In one embodiment of the present disclosure, the implementation device of the switch component further includes: an initialization module for performing an initialization operation on the switch component to set the switch state and the available state of the switch component. The initialization operation is to dynamically generate a DOM structure and render the DOM structure into the switch container.

[0081] The implementation device of the switch assembly provided in the embodiments of the present disclosure can execute any implementation method of the switch assembly provided in the embodiments of the present disclosure, and has the corresponding functional modules and beneficial effects of the implementation method. For any content not fully described in the embodiments of the device of the present disclosure, reference can be made to the description of any method embodiment of the present disclosure.

[0082] Figure 4 This is a schematic diagram of the structure of an electronic device provided by an embodiment of the present disclosure. Figure 4 As shown, electronic device 600 includes one or more processors 601 and memory 602 .

[0083] The processor 601 may be a central processing unit (CPU) or other forms of processing units having data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device 600 to perform desired functions.

[0084] 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 may include, for example, random access memory (RAM) and / or cache memory. Non-volatile memory may include, for example, read-only memory (ROM), a hard disk, flash memory, etc. 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 described above and / or other desired functions. Various contents such as input signals, signal components, noise components, etc. may also be stored in the computer-readable storage medium.

[0085] In one example, the electronic device 600 may further include an input device 603 and an output device 604, which are interconnected via a bus system and / or other forms of connection mechanisms (not shown). Furthermore, the input device 603 may include, for example, a keyboard, a mouse, and the like. The output device 604 may output various information to the outside, including determined distance information, direction information, and the like. The output device 604 may include, for example, a display, a speaker, a printer, a communication network, and remote output devices connected thereto.

[0086] Of course, to simplify, Figure 4 Only some of the components related to the present disclosure in the electronic device 600 are shown, and components such as buses, input / output interfaces, etc. are omitted. In addition, the electronic device 600 may further include any other appropriate components according to specific application scenarios.

[0087] In addition to the above methods and devices, the embodiments of the present disclosure may also be a computer program product, which includes computer program instructions. When the computer program instructions are executed by a processor, the processor executes any method provided by the embodiments of the present disclosure.

[0088] The computer program product may be written in any combination of one or more programming languages to implement the operations of the disclosed embodiments, including object-oriented programming languages such as Java, C++, and conventional procedural programming languages such as C or similar programming languages. The program code may be executed entirely on the user's computing device, partially on the user's computing device, as a stand-alone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0089] In addition, the embodiments of the present disclosure may also be a computer-readable storage medium having computer program instructions stored thereon. When the computer program instructions are executed by a processor, the processor is enabled to perform any method provided by the embodiments of the present disclosure.

[0090] Computer readable storage media can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can, for example, include but is not limited to a system, device or component of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination thereof. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with 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 disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof.

[0091] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of other identical elements in the process, method, article, or device comprising the element.

[0092] The foregoing description is intended only to provide specific embodiments of the present disclosure, intended to enable those skilled in the art to understand and implement the present disclosure. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the embodiments described herein, but rather to be construed in the broadest manner consistent with the principles and novel features disclosed herein.

Claims

1. A method for implementing a switch component, characterized in that: include: Encapsulate a JS file for creating a switch component, wherein the JS file consists of a constructor whose parameters include: container identifier, name parameter, switch state, callback function, mapping relationship between switch state and real value, and available state; In response to a triggering operation of creating multiple switch components in a page, adding multiple switch container elements to the page; Import the JS file and create the multiple switch components based on the multiple switch container elements; receiving an incoming target real value, calling a real value setting function to update the current real value of the switch component to the target real value, and updating the switch state of the switch component according to the target real value and the mapping relationship; or obtaining the switch state of the switch component, calling a 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 response to the form submission request, obtaining a name parameter of the switch component; The name parameter and the real value of the switch component are uploaded to the server, wherein the real value of the switch component is stored in a switch storage element, the name parameter is assigned to the name attribute of the switch storage element, and the real value is assigned to the value attribute of the switch storage element, and submitted to the server through the switch storage element when the form is submitted.

2. The method according to claim 1, wherein Create each of the switch components by following these steps: Assign values to the container ID, name parameter, switch status, and the mapping between switch status and real value based on the passed parameters; Create the switch storage value update function, switch rendering function, switch event monitoring function, initialization function and operation function; Among them, the switch storage value update function is used to update the value in the switch storage element, 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.

3. The method according to claim 2, wherein The method further comprises: Receive the incoming target available state, and call the enable / disable function to update the current available state of the switch component to the target available state; Call the switch rendering function and the switch event listening function to re-render the switch component.

4. The method according to claim 1, wherein After importing the JS file and creating the multiple switch components based on the multiple switch container elements, the method further includes: An initialization operation is performed on the switch component to set a switch state and an available state of the switch component.

5. A device for implementing a switch assembly, characterized in that: include: An encapsulation module, configured to encapsulate a JS file for creating a switch component, wherein the JS file is composed of a constructor whose parameters include: a container identifier, a name parameter, a switch state, a callback function, a mapping relationship between the switch state and the actual value, and an available state; An adding module, configured to add a plurality of switch container elements to the page in response to a triggering operation of creating a plurality of switch components in the page; Creating a module, configured to import the JS file and create the multiple switch components based on the multiple switch container elements; an operation module, configured to receive an incoming target real value, call a real value setting function to update the current real value of the switch component to the target real value, and update the 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 a 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 response to the form submission request, obtaining a name parameter of the switch component; The name parameter and the real value of the switch component are uploaded to the server, wherein the real value of the switch component is stored in a switch storage element, the name parameter is assigned to the name attribute of the switch storage element, and the real value is assigned to the value attribute of the switch storage element, and submitted to the server through the switch storage element when the form is submitted.

6. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to read the executable instructions from the memory and execute the instructions to implement the method for implementing the switch component according to any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that The storage medium stores a computer program, and when the computer program is executed by a processor, the method for implementing the switch component according to any one of claims 1 to 4 is implemented.

Images