Javascript 如何为下面的函数编写更高效的代码?
此功能显示/隐藏根据员工指定选择位置的选择标记。代码我写的作品很好,但我觉得它可以更有效Javascript 如何为下面的函数编写更高效的代码?,javascript,Javascript,此功能显示/隐藏根据员工指定选择位置的选择标记。代码我写的作品很好,但我觉得它可以更有效 //according to different designation different set of locations options gets activated function location_served_option_by_designation(filter) { var area_display_setting; var city_dis
//according to different designation different set of locations options gets activated
function location_served_option_by_designation(filter)
{
var area_display_setting;
var city_display_setting;
var region_display_setting;
var zone_display_setting;
var country_display_setting;
var location_title;
switch(filter.value.toLowerCase()){
case 'bm':
area_display_setting = 'none';
city_display_setting = 'flex';
region_display_setting = 'flex';
zone_display_setting = 'flex';
country_display_setting = 'flex';
location_title = 'area';
break
case 'abm':
area_display_setting = 'none';
city_display_setting = 'flex';
region_display_setting = 'flex';
zone_display_setting = 'flex';
country_display_setting = 'flex';
location_title = 'area';
break
case 'rsm':
area_display_setting = 'none';
city_display_setting = 'none';
region_display_setting = 'none';
zone_display_setting = 'flex';
country_display_setting = 'flex';
location_title = 'region';
break
case 'zsm':
area_display_setting = 'none';
city_display_setting = 'none';
region_display_setting = 'none';
zone_display_setting = 'none';
country_display_setting = 'flex';
location_title = 'zone';
break
case 'nsm':
area_display_setting = 'none';
city_display_setting = 'none';
region_display_setting = 'none';
zone_display_setting = 'none';
country_display_setting = 'none';
location_title = 'country';
break
}
location_served_area.style.display = area_display_setting;
selected_served_area.options[0].selected = 'true';
location_served_city.style.display = city_display_setting;
selected_served_city.options[0].selected = 'true';
location_served_region.style.display = region_display_setting;
selected_served_region.options[0].selected = 'true';
location_served_zone.style.display = zone_display_setting;
selected_served_zone.options[0].selected = 'true';
location_served_country.style.display = country_display_setting;
selected_served_country.options[0].selected = 'true';
location_served_title.innerText = location_title[0].toUpperCase() + location_title.slice(1);
}
HTML标记的图像|此处选择的名称为“BM”,因此激活国家:印度、地区:中部地区、地区:恰蒂斯加尔和城市:Durg1,并根据城市区域激活以选择员工服务区域。如果名称为“ZSM”,则只有国家/地区选择标签将被激活,并且根据国家/地区选择将显示为复选框。
在这种情况下,如果。。。else语句而不是
开关
,从一开始就给出变量值,并且仅当它们满足我的条件时才更改它们。在我们的例子中,如果过滤器值等于“nsm”,那么这些值保持不变,以便我们可以检查其他情况。在javaScript中,建议对变量名进行区分大小写,并保持名称相当简短和相关。
这是我如何干燥代码的:
function byDesignation(filter) {
let filterValue = filter.value.toLowerCase();
let area = "none";
let city = "none";
let region = "none";
let zone = "none";
let country = "none";
let locationTitle = "country";
if (filterValue === "zsm") {
country = "flex";
locationTitle = "zone";
} else if (filterValue === "rsm") {
locationTitle = "region";
zone = "flex";
country = "flex";
} else if (filterValue === "abm" || filterValue === "bm") {
locationTitle = "area";
city = "flex";
region = "flex";
zone = "flex";
country = "flex";
}
// the rest of the function
// ...
}
“过早优化是万恶之源”—唐纳德Knuth@Skusku谢谢你的建议,它真的很有帮助。我喜欢另一个类似的版本“让它工作|让它更好|让它更快”。我将尝试遵循您的建议。谢谢您从逻辑上讲,您的代码是正确的。我唯一想建议的是,删除重复性和冗余。将类似的操作移动到单独的函数中。1.用于每次设置选项值的函数。2.用于设置显示设置的函数,只需传递参数。在“bm”情况下:您可以移动:区域显示设置='none';城市显示设置='flex';区域显示设置='flex';区域显示设置='flex';国家显示设置='flex';位置标题='area';中断;“因为下一条语句包含相同的逻辑。对于其余的代码,我不会通过使其更通用来进一步简化,因为这通常会导致代码不可读和不灵活,并且不会加快速度。感谢您的改进。”。