Как правильно скоротить код JavaScript с IF\ELSE?

Question

[Rostyk Ice]

Здравствуйте, столкнулся с проблемой плохо оптимизированного кода, его нужно скоротить, а знаний как это делать не хватает, не подскажите как будет лучше его скоротить?
Скрипт уменьшен на 2\3 поскольку в пост нельзя больше 10 к символов вставлять, найбольше места занимает часть с IF\ELSE.
Спасибо.
PS. сократить нужно только if else не изменяя другую часть кода.

var cppm;
if (width < 768) {
    if ($('.ppm[data-toggle="popover"]').hasClass("xs-bottom")) {
        cppm = 'bottom';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("xs-top")) {
        cppm = 'top';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("xs-left")) {
        cppm = 'left';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("xs-right")) {
        cppm = 'right';
    }
} else if (width >= 768 && width < 992) {
    if ($('.ppm[data-toggle="popover"]').hasClass("sm-bottom")) {
        cppm = 'bottom';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("sm-top")) {
        cppm = 'top';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("sm-left")) {
        cppm = 'left';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("sm-right")) {
        cppm = 'right';
    }
} else if (width >= 992 && width < 1200) {
    if ($('.ppm[data-toggle="popover"]').hasClass("md-bottom")) {
        cppm = 'bottom';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("md-top")) {
        cppm = 'top';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("md-left")) {
        cppm = 'left';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("md-right")) {
        cppm = 'right';
    }
} else if (width >= 1200 && width < 1600) {
    if ($('.ppm[data-toggle="popover"]').hasClass("lg-bottom")) {
        cppm = 'bottom';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("lg-top")) {
        cppm = 'top';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("lg-left")) {
        cppm = 'left';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("lg-right")) {
        cppm = 'right';
    }
} else if (width >= 1600) {
    if ($('.ppm[data-toggle="popover"]').hasClass("xlg-bottom")) {
        cppm = 'bottom';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("xlg-top")) {
        cppm = 'top';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("xlg-left")) {
        cppm = 'left';
    } else if ($('.ppm[data-toggle="popover"]').hasClass("xlg-right")) {
        cppm = 'right';
    }
}

var pchedt;
if (width < 768) {
    if ($('.has-error [data-toggle="popover"]').hasClass("xs-bottom")) {
        pchedt = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xs-top")) {
        pchedt = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xs-left")) {
        pchedt = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xs-right")) {
        pchedt = 'right';
    }
} else if (width >= 768 && width < 992) {
    if ($('.has-error [data-toggle="popover"]').hasClass("sm-bottom")) {
        pchedt = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("sm-top")) {
        pchedt = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("sm-left")) {
        pchedt = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("sm-right")) {
        pchedt = 'right';
    }
} else if (width >= 992 && width < 1200) {
    if ($('.has-error [data-toggle="popover"]').hasClass("md-bottom")) {
        pchedt = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("md-top")) {
        pchedt = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("md-left")) {
        pchedt = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("md-right")) {
        pchedt = 'right';
    }
} else if (width >= 1200 && width < 1600) {
    if ($('.has-error [data-toggle="popover"]').hasClass("lg-bottom")) {
        pchedt = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("lg-top")) {
        pchedt = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("lg-left")) {
        pchedt = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("lg-right")) {
        pchedt = 'right';
    }
} else if (width >= 1600) {
    if ($('.has-error [data-toggle="popover"]').hasClass("xlg-bottom")) {
        pchedt = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xlg-top")) {
        pchedt = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xlg-left")) {
        pchedt = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xlg-right")) {
        pchedt = 'right';
    }
}


var pche;
if (width < 768) {
    if ($('.has-error [data-toggle="popover"]').hasClass("xs-bottom")) {
        pche = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xs-top")) {
        pche = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xs-left")) {
        pche = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xs-right")) {
        pche = 'right';
    }
} else if (width >= 768 && width < 992) {
    if ($('.has-error [data-toggle="popover"]').hasClass("sm-bottom")) {
        pche = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("sm-top")) {
        pche = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("sm-left")) {
        pche = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("sm-right")) {
        pche = 'right';
    }
} else if (width >= 992 && width < 1200) {
    if ($('.has-error [data-toggle="popover"]').hasClass("md-bottom")) {
        pche = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("md-top")) {
        pche = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("md-left")) {
        pche = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("md-right")) {
        pche = 'right';
    }
} else if (width >= 1200 && width < 1600) {
    if ($('.has-error [data-toggle="popover"]').hasClass("lg-bottom")) {
        pche = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("lg-top")) {
        pche = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("lg-left")) {
        pche = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("lg-right")) {
        pche = 'right';
    }
} else if (width >= 1600) {
    if ($('.has-error [data-toggle="popover"]').hasClass("xlg-bottom")) {
        pche = 'bottom';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xlg-top")) {
        pche = 'top';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xlg-left")) {
        pche = 'left';
    } else if ($('.has-error [data-toggle="popover"]').hasClass("xlg-right")) {
        pche = 'right';
    }
}
        var a = {
                trigger: "hover",
                container: "body",
                placement: "top",
                html: !0,
                viewport: {
                    selector: "body",
                    padding: 2
                },
                template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
            },
            b = {
                trigger: "hover",
                container: "body",
                placement: "top",
                html: !0,
                template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
            },
            c = {
                trigger: "hover",
                container: "body",
                placement: pchedt,
                html: !0,
                template: '<div class="popover popover-error"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
            },
            d = {
                trigger: "hover",
                container: "body",
                placement: pche,
                html: !0,
                template: '<div class="popover popover-error"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
            },
            e = {
                trigger: "hover",
                container: "body",
                placement: cppm,
                delay: {
                    show: 500,
                    hide: 10
                },
                html: !0,
                template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
            },
            f = {
                trigger: "hover",
                container: "body",
                placement: pcao,
                html: !0,
                template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
            };
        $(".mobile-checkout").length > 0 ? ($('.ppm[data-toggle="popover"]').popover(e),
         $('.spm[data-toggle="popover"]').popover(e1), 
         $('.has-error [data-toggle="popover"]').popover(d), 
         $('[data-toggle="popover"]').popover(b)) : ($('.ppm[data-toggle="popover"]').popover(e),
         $('.has-error [data-toggle="popover"]').popover(c),
         $('[data-toggle="popover"]').popover(a))

Answer 1

[Владлен Хеллсайт]

А вот как сказал Alexander, полностью согласен.
Если и даже так, вам весело копипастить один и тот же селектор?
Ну раз там система одна и та же, можно предположить вот так. Хотя это тоже не лучший вариант, я просто предложил.

var $ppm = $('.ppm[data-toggle="popover');
var $error = $('.has-error[data-toggle="popover"]');
var $issue = $('.issue-block [data-toggle="popover"]');

var prefix,pchedt,pche,cppm,pcib;

if (width < 768) {
	prefix = 'xs';
} else if (width >= 768 && width < 992) {
	prefix = 'sm';
} else if (width >= 992 && width < 1200) {
	prefix = 'md';
} else if (width >= 1200 && width < 1600) {
	prefix = 'lg';
} else if (width >= 1600) {
	prefix = 'xlg';
}

cppm = getPosition($ppm,prefix);
pche = pchedt = getPosition($error,prefix);
pcib = getPosition($issue,prefix);

/**
 * Возвращает позицию по селектору
 *
 * @param jQuery $selector
 * @param string prefix
 *
 * @return string
 */
function getPosition ($selector,prefix) {
	if ($selector.hasClass(prefix+'-bottom')) {
		return 'bottom';
	}

	if ($selector.hasClass(prefix+'-top')) {
		return 'top';
	}

	if ($selector.hasClass(prefix+'-left')) {
		return 'left';
	}

	if ($selector.hasClass(prefix+'-right')) {
		return 'right';
	}

	return '';
}

Comments

[Rostyk Ice]

Я не особо понимаю где тут var -ы
e = {
trigger: "hover",
container: "body",
placement: cppm,
delay: {
show: 500,
hide: 10
},
html: !0,
template: ''
},

Они должны быть неизменны, скоротить хотелось бы только if\else

[Владлен Хеллсайт]

Rostyk Ice: просто замените ваши if else которые выше. После кода который я описан выше идёт var a, b... и т.д.

[Rostyk Ice]

Владлен Хеллсайт: тоесть не нужно уже ничего дописывать? Просто мне еще нужно добавить 6 болоков с if else(тут они не вместились).
Еще вопрос почему у вас в 2 строке pche равно pchedt, а в 1 нет?
1 cppm = getPosition($ppm,'xs');
2 pche = pchedt = getPosition($error,'xs');

[Владлен Хеллсайт]

Rostyk Ice: потому что селекторы для pche такие же как и у pchedt, по такой тактике можно скармливать функции селектор jQuery и префикс и получить нужную позицию.

[Rostyk Ice]

Тоесть добавление нового блока будет выглядеть так?

var $ppm = $('.ppm[data-toggle="popover');
var $error = $('.has-error[data-toggle="popover"]');
var $issue = $('.issue-block [data-toggle="popover"]');

var pchedt,pche,cppm,pcib;

if (width < 768) {
  cppm = getPosition($ppm,'xs');
  pche = pchedt = getPosition($error,'xs');
  pcib = getPosition($issue,'xs');
} else if (width >= 768 && width < 992) {
  cppm = getPosition($ppm,'sm');
  pche = pchedt = getPosition($error,'sm');
  pcib = getPosition($issue,'sm');
} else if (width >= 992 && width < 1200) {
  cppm = getPosition($ppm,'md');
  pche = pchedt = getPosition($error,'md');
  pcib = getPosition($issue,'md');
} else if (width >= 1200 && width < 1600) {
  cppm = getPosition($ppm,'lg');
  pche = pchedt = getPosition($error,'lg');
  pcib = getPosition($issue,'lg');
} else if (width >= 1600) {
  cppm = getPosition($ppm,'xlg');
  pche = pchedt = getPosition($error,'xlg');
  pcib = getPosition($issue,'xlg');
}

[Владлен Хеллсайт]

Rostyk Ice: именно)

[Rostyk Ice]

Владлен Хеллсайт: Окай, спасибо, вангую скоро будет тема: как превратить в case?

[Владлен Хеллсайт]

Хоть я и не знаю полной картины, можно код на pastebin скинуть, но это уж лучше будет чем тот копипаст.
Вообщем если код настолько сильно повторяется можно один раз получить префикc. Сейчас обновлю свой ответ.

[Rostyk Ice]

Владлен Хеллсайт: Не особо понимаю, сдесь не нужно ничего менять?

function getPosition ($selector,prefix) {
  if ($selector.hasClass(prefix+'-bottom')) {
    return 'bottom';
  }

  if ($selector.hasClass(prefix+'-top')) {
    return 'top';
  }

  if ($selector.hasClass(prefix+'-left')) {
    return 'left';
  }

  if ($selector.hasClass(prefix+'-right')) {
    return 'right';
  }

  return '';
}

[Владлен Хеллсайт]

Rostyk Ice: нет не нужно, я просто упростил систему if else. Функцию я никак не изменял.

Answer 2

[Alexander]

Удалить весь этот код. И написать на css с брекпоинтами.

Comments

[Никита Кит]

Согсален. ну или хотя бы switch case юзать. Раз уж упоролся))))

[Rostyk Ice]

Так суть в том что я знаю только If else и как превратить все в switch case не знаю. :(

[Alexander]

Rostyk Ice: а как на счет узнать ?

[Rostyk Ice]

Alexander: пробывал но как переделать уже существующий код не знаю, пробывал но одни ероры в итоге, пришел сюда после недели проб и ошибок.

[Alexander]

Rostyk Ice: мне вас жаль. Но эту задачу можно и правильно решать с помощью css.

[Rostyk Ice]

Alexander: Можно и с css но функционал нужно добавлять с помощю JS

[Alexander]

Rostyk Ice: какой функционал ? у вас адаптация через js идет.

[Rostyk Ice]

Alexander: Да через Js, а через css это не возможно реализовать.

[Alexander]

Rostyk Ice:

[Rostyk Ice]

Alexander: CSS-ом в моей ситуации никак не реализовать, только JS, потому что адаптация через js идет.
PS гифка лучше чем фото.