Можно ли использовать объект вместо оператора Switch? - PullRequest
Новая
       12

Можно ли использовать объект вместо оператора Switch?

0 голосов
/ 11 апреля 2020

Я часто использую оператор switch в своем коде, я читаю об объекте, и многие разработчики говорят, что его лучше использовать. Я хочу использовать меньше кода, знаете ли вы, ребята, альтернативный способ сделать этот код более эффективным?

полный код ссылки здесь - https://jsfiddle.net/lmanhaes/5ebjypo1/

Ниже я поделился двумя примерами, которые хотел бы изменить.

Большое спасибо. 

//fisrt example
$(document).ready(function () {

    $("#country").change(function () {
        var cityName;
        var select = $("#country option:selected").val(); 
        switch (select) {
            case "England":
                cityName = "england";
                city(cityName);
                break;
            case "Scotland":
                cityName = "scotland";
                city(cityName);
                break;
            case "Wales":
                cityName = "wales";
                city(cityName);
                break;
            case "Northern Ireland":
                cityName = "nireland";
                city(cityName);
                break;
            default:
                $("#city").empty();

                break;
        }
    });

    $("#city").change(function () { 
        var cityValue = $("#city").val();
        getWeatherApi(cityValue);
    });
    
 //second example
    
    $.each(response.weather, function (index, value) {  
                    cond = response.weather[index].main;

                    

                    switch (cond) { 
                        case "Clouds":
                            icon = '<img src="./weather_icons/cloud.png" alt="cloud" width="70px" height="80%"/>';
                            break;
                        case "Hail":
                            icon = '<img src="./weather_icons/hail.png" alt="hail" width="70px" height="80%"/>';
                            break;
                        case "Heavy Cloud":
                            icon = '<img src="./weather_icons/heavy cloud.png" alt="heavy-clouds" width="70px" height="80%"/>';
                            break;
                        case "Heavy Rain":
                            icon = '<img src="./weather_icons/heavy rain.png" alt="heavy-rain" width="70px" height="80%"/>';
                            break;
                        case "Rain":
                            icon = '<img src="./weather_icons/rain.png" alt="rain" width="70px" height="80%"/>';
                            break;
                        case "Sleet":
                            icon = '<img src="./weather_icons/sleet.png" alt="sleet" 70px" height="80%"/>';
                            break;
                        case "Snow":
                            icon = '<img src="./weather_icons/snow.png" alt="snow" width="70px" height="80%"/>';
                            break;
                        case "Sun":
                            icon = '<img src="./weather_icons/sun.png" alt="sun" 70px" height="80%"/>';
                            break;
                        case "Sun and Clouds":
                            icon = '<img src="./weather_icons/sun and cloud.png" alt="sun-cloud" width="70px" height="80%"/>';
                            break
                        case "Thunderstorm":
                            icon = '<img src="./weather_icons/thunderstorm.png" alt="thunderstorm" width="70px" height="80%"/>';
                            break;
                        default: 
                            icon = '';
                            break;
                    }
                });

Ответы [ 3 ]

0 голосов
/ 11 апреля 2020

Да, вы находитесь в правильном направлении, когда ваш код оператора switch кажется слишком большим, возможно, лучше было бы вместо этого использовать объект, поэтому вам следует рассмотреть следующее 

const getCity = (cityName) => () => city(cityName);
const cityAction = {
England: getCity('england'),
Scotland: getCity('scotland'),
Wales: getCity('wales'),
'Northern Ireland': getCity('nireland'),
_UNKNOWN_: () => $("#city").empty()
}

// then use it like so:

 $("#city").change(function () { 
    var cityValue = $("#city").val();
    const cityHandler = cityAction[cityValue] || cityAction._UNKNOWN_;
    cityHandler();
 });

Надеюсь, что это может помочь вам.

Вы можете повторить это и для изображения переключателя, так как вы можете видеть, что у вашего тега одинаковый шаблон, меняется только имя изображения и его атрибут alt, поэтому его можно переместить в одна функция, чтобы сделать это для вас.

0 голосов
/ 11 апреля 2020

Слишком большие различия между объектом и блоком переключения. Объект - это структура данных для безопасных данных, а блок переключателей - это структура syntacti c для сокращения структуры if-else. Для работы с памятью и процессором используйте оператор switch-case.

Для лучшего обзора кода: поищите дубликаты в своих кейсах. Вы также можете передать свои операторы switch в свои собственные функции. Для получения дополнительной информации используйте чистые имена функций и передайте такую ​​функцию модулям.

Например: 

$(document).ready(function () {

    $("#country").change(function () {
        var cityName;
        var select = $("#country option:selected").val(); 
        var convertedCityName = convertCityNames(select);
        if(convertedCityName) {
            city(convertCityNames);
        } else {
            $("#city").empty();
        }
    });

    function convertCityNames(inputedCityName) {
        switch (inputedCityName) {
            case "England":
                return "england";
            case "Scotland":
                return "scotland";
            case "Wales":
                return "wales";
            case "Northern Ireland":
                return "nireland";
            default:
                return;
        }
    }
0 голосов
/ 11 апреля 2020

Вы можете сделать что-то вроде этого: 

var cityName;
var select = $("#country option:selected").val(); 
var countryToCity = {
    "England": "england",
    "Scotland": "scotland",
    "Wales": "wales",
    "": ""
}
if (select in countryToCity) {
    city(countryToCity[select]);
}
$("#city").empty();

Не уверен, что он более читабелен, но вы можете использовать этот синтаксис.

Объект имеет ключи и значения. Каждый ключ имеет свое значение, поэтому в приведенном выше примере значение «England» равно «england», поэтому вы можете найти значение на основе ключа.

Вы можете сделать то же самое с изображениями что у вас есть.

...