开关组件的实现方法、装置、设备及存储介质制造方法及图纸

本公开涉及一种开关组件的实现方法、装置、设备及存储介质，其中，方法包括：封装用于创建开关组件的JS文件；响应于在页面中创建多个开关组件的触发操作，在所述页面中添加多个开关容器元素；引入所述JS文件并基于所述多个开关容器元素创建所述多个开关组件；响应于针对所述开关组件的操作请求，对所述开关组件执行与所述操作请求匹配的目标操作。根据本公开的技术方案提供了一种基于该JS文件的复用创建多个开关的方法，避免重复编写相同的代码，实现开关组件的高效率开发。实现开关组件的高效率开发。实现开关组件的高效率开发。

【技术实现步骤摘要】
开关组件的实现方法、装置、设备及存储介质


[0001]本公开涉及计算机
，尤其涉及一种开关组件的实现方法、装置、设备及存储介质。

技术介绍

[0002]web应用程序被广泛运用到各个场景，例如购物商城、博客网、硬件设备的管理界面等。在设备的web管理界面这一场景中，广泛地应用到开关按钮，在web管理界面中，开关主要起到以下两个作用：展示某项的状态，改变某项的状态。
[0003]目前，由于web管理界面会应用到大量的开关按钮，因此，如何实现开关按钮的组件化，减少代码重复编写是待解决的问题。

技术实现思路

[0004]为了解决上述技术问题或者至少部分地解决上述技术问题，本公开提供了一种开关组件的实现方法、装置、设备及存储介质。
[0005]第一方面，本公开实施例提供了一种开关组件的实现方法，包括：
[0006]封装用于创建开关组件的JS文件，其中，所述JS文件由构造函数组成，所述构造函数的参数包括：容器标识、名称参数、开关状态、回调函数、开关状态与真实值的映射关系、可用状态；
[0007]响应于在页面中创建多个开关组件的触发操作，在所述页面中添加多个开关容器元素；
[0008]引入所述JS文件并基于所述多个开关容器元素创建所述多个开关组件；
[0009]响应于针对所述开关组件的操作请求，对所述开关组件执行与所述操作请求匹配的目标操作。
[0010]可选地，通过以下步骤创建每个所述开关组件：根据传入的参数对容器标识、名称参数、开关状态和开关状态与真实值的映射关系进行赋值；创建开关存储值更新函数、开关渲染函数、开关监听事件函数、初始化函数和操作函数；其中，所述开关存储值更新函数用于更新开关存储元素中的值，所述开关渲染函数用于设置开关状态、设置可用状态以及渲染开关组件，所述开关监听事件函数用于在开关组件启用时添加监听事件以及在开关组件禁用时取消监听事件，所述初始化函数用于调用所述开关渲染函数和所述开关监听事件函数。
[0011]可选地，所述操作函数包括真实值设置函数、真实值获取函数，所述响应于针对所述开关组件的操作请求，对所述开关组件执行与所述操作请求匹配的目标操作，包括：接收传入的目标真实值，调用真实值设置函数将所述开关组件的当前真实值更新为所述目标真实值，并根据所述目标真实值和所述映射关系更新所述开关组件的开关状态；或者，获取所述开关组件的开关状态，调用真实值获取函数根据所述开关组件的开关状态和所述映射关系，查询所述开关组件的真实值。
[0012]可选地，当所述开关组件应用于表单中时，所述响应于针对所述开关组件的操作请求，对所述开关组件执行与所述操作请求匹配的目标操作，包括：响应于表单提交请求，获取所述开关组件的名称参数；将所述名称参数和所述开关组件的真实值上传至服务端。
[0013]可选地，所述操作函数包括启用禁用函数，所述响应于针对所述开关组件的操作请求，对所述开关组件执行与所述操作请求匹配的目标操作，包括：接收传入的目标可用状态，调用启用禁用函数将所述开关组件的当前可用状态更新为所述目标可用状态；调用开关渲染函数和开关监听事件函数，以重新渲染所述开关组件。
[0014]可选地，在引入所述JS文件并基于所述多个开关容器元素创建所述多个开关组件之后，还包括：对所述开关组件执行初始化操作，以设置所述开关组件的开关状态以及可用状态。第二方面，本公开实施例提供了一种开关组件的实现装置，包括：
[0015]封装模块，用于封装用于创建开关组件的JS文件，其中，所述JS文件由构造函数组成，所述构造函数的参数包括：容器标识、名称参数、开关状态、回调函数、开关状态与真实值的映射关系、可用状态；
[0016]添加模块，用于响应于在页面中创建多个开关组件的触发操作，在所述页面中添加多个开关容器元素；
[0017]创建模块，用于引入所述JS文件并基于所述多个开关容器元素创建所述多个开关组件；
[0018]操作模块，用于响应于针对所述开关组件的操作请求，对所述开关组件执行与所述操作请求匹配的目标操作。
[0019]第三方面，本公开实施例提供了一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述第一方面所述的开关组件的实现方法。
[0020]第四方面，本公开实施例提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面所述的开关组件的实现方法。
[0021]本公开实施例提供的技术方案与现有技术相比具有如下优点：通过封装用于创建开关组件的JS文件，在页面中添加多个开关容器元素，引入JS文件并基于多个开关容器元素创建多个开关组件；响应于针对所述开关组件的操作请求，对开关组件执行与所述操作请求匹配的目标操作，由此，实现了一种基于封装的JS文件的复用创建多个开关的方法，在创建多个开关组件的场景中可以达到一次声明，多处引用的效果，避免重复编写相同的代码，实现开关组件的高效率开发。
附图说明
[0022]此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
[0023]为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见的，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0024]图1为本公开实施例所提供的一种开关组件的实现方法的流程示意图；
[0025]图2为本公开实施例所提供的一种封装的开关组件JS文件的具体实现的流程示意图；
[0026]图3为本公开实施例所提供的一种开关组件的实现装置的结构示意图；
[0027]图4为本公开实施例提供的一种电子设备的结构示意图。
具体实施方式
[0028]为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。
[0029]在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。
[0030]图1为本公开实施例所提供的一种开关组件的实现方法的流程示意图，本公开实施例提供的方法可以由开关组件的实现装置来执行，该装置可以采用软件和/或硬件实现，并可集成在任意具有计算能力的电子设备上，例如智能手机、平板电脑等用户终端。
[0031]如图1所示，本公开实施例提供的开关组件的实现方法可包括：
[0032]步骤101，封装用于创建开关组件的JS文件。
[0033]本实施例中，将开关组件所需的HTML(Hyper Text Markup Language，超文本标记语言本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种开关组件的实现方法，其特征在于，包括：封装用于创建开关组件的JS文件，其中，所述JS文件由构造函数组成，所述构造函数的参数包括：容器标识、名称参数、开关状态、回调函数、开关状态与真实值的映射关系、可用状态；响应于在页面中创建多个开关组件的触发操作，在所述页面中添加多个开关容器元素；引入所述JS文件并基于所述多个开关容器元素创建所述多个开关组件；响应于针对所述开关组件的操作请求，对所述开关组件执行与所述操作请求匹配的目标操作。2.如权利要求1所述的方法，其特征在于，通过以下步骤创建每个所述开关组件：根据传入的参数对容器标识、名称参数、开关状态和开关状态与真实值的映射关系进行赋值；创建开关存储值更新函数、开关渲染函数、开关监听事件函数、初始化函数和操作函数；其中，所述开关存储值更新函数用于更新开关存储元素中的值，所述开关渲染函数用于设置开关状态、设置可用状态以及渲染开关组件，所述开关监听事件函数用于在开关组件启用时添加监听事件以及在开关组件禁用时取消监听事件，所述初始化函数用于调用所述开关渲染函数和所述开关监听事件函数。3.如权利要求2所述的方法，其特征在于，所述操作函数包括真实值设置函数、真实值获取函数，所述响应于针对所述开关组件的操作请求，对所述开关组件执行与所述操作请求匹配的目标操作，包括：接收传入的目标真实值，调用真实值设置函数将所述开关组件的当前真实值更新为所述目标真实值，并根据所述目标真实值和所述映射关系更新所述开关组件的开关状态；或者，获取所述开关组件的开关状态，调用真实值获取函数根据所述开关组件的开关状态和所述映射关系，查询所述开关组件的真实值。4.如权利要求3所述的方法，其特征在于，当所述开关组件应用于表单中时，所述响应于针对所述开关组件的操作请求，对所述开关组件执行与所述操作请求匹配的目标操...

【专利技术属性】
技术研发人员：吴静文，
申请(专利权)人：北京天融信网络安全技术有限公司北京天融信科技有限公司北京天融信软件有限公司，
类型：发明
国别省市：