时间戳

首页 > 解决方案 > 如何为下面的函数编写更高效的代码？

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_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”，则只有国家/地区选择标签将被激活，并且根据国家/地区可供选择的区域将显示为复选框。 在此处输入图像描述

标签： javascript

解决方案

在这种情况下，我将使用if ... elsestatements 而不是switch，从一开始就给变量值，并且只有在它们符合我的标准时才更改它们。在我们的例子中，如果过滤器值等于“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
  // ...
}

推荐阅读