关灯
开启左侧

JavaScript代码重构

[复制链接]
紫米 发表于 2018-7-9 11:25:56 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
前言
最近,我一直在使用多个步骤(具有“上一步” 和“下一步”按钮)的HTML表单,其中表单的各个部分具有相同的“其他” 复选框。我使用“ onchange ”的JavaScript事件检查何时CheckBox被选中,然后显示“其他”标签和输入字段。我遇到的问题是,因为有多个“其他”复选框,它们都有不同的“ id ”,这是一个问题,因为我要在同一个函数中处理具不同的id。
重构前的代码
以下是代码重构之前的原始函数,显示如何获取元素,并检查“其他” Checkbox是否被检查,然后更改CSS样式。
1.jpeg

重构前的代码

在这里,if 语句只是检查Checkbox是否被选中,然后我将为其他标签设置CSS显示值,并输入“ inline
”来显示它们,或者“ none”使其隐藏。
代码重构
由于在整个表格中共有七(7)个“其他”的Checkbox ,所以有七个相似的功能,基本上做同样的事情是没有意义的。所以我决定对代码重构并做一个主要的功能,并传递一个数组中的元素的id值。
简化的代码如下:
2.jpeg

重构后的代码

在这种情况下,Values参数是Array传递给该函数的。这里,如果我们要对“员工”赋值,可以调用函数“changeEmploy”进行赋值,“changeEmploy”函数如下:
3.jpeg

赋值函数

同样地,如果我们要对“个人”进行赋值,同样可以重用“handleCheckbox”,代码如下:
4.jpeg

赋值函数

代码是不是变得更简洁了呢?

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  安仔IT技术交流论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )