Как лучше скоротить скрипт с .each() и if\else?

Question

[Rostyk Ice]

Здравствуйте, как скоротить данный скрипт ?
У самого не хватает знаний что бы уменшить его не потеряв функционал.
В приоритете уменьшить часть с var-ы : top,left,bottom,right.

var top = {
                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>'
                },
                bottom = {
                trigger: "hover",
                container: "body",
                placement: "bottom",
                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>'
                },
                left = {
                trigger: "hover",
                container: "body",
                placement: "left",
                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>'
                },
                right = {
                trigger: "hover",
                container: "body",
                placement: "right",
                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>'
                };
                $('[data-toggle="popover"]').each(function() {
                    var width = $(window).width();
                    if(width<768){
                        if ($(this).hasClass("xs-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("xs-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("xs-left")){ $(this).popover(left);}
                        else if($(this).hasClass("xs-right")){ $(this).popover(right);}
                    }else if(width>=768 && width<992){
                        if ($(this).hasClass("sm-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("sm-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("sm-left")){ $(this).popover(left);}
                        else if($(this).hasClass("sm-right")){ $(this).popover(right);}
                    }else if(width>=992 && width<1200){
                        if ($(this).hasClass("md-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("md-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("md-left")){ $(this).popover(left);}
                        else if($(this).hasClass("md-right")){ $(this).popover(right);}
                    }else if(width>=1200 && width<1600){
                        if ($(this).hasClass("lg-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("lg-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("lg-left")){ $(this).popover(left);}
                        else if($(this).hasClass("lg-right")){ $(this).popover(right);}
                    }else if(width>=1600){
                        if ($(this).hasClass("xlg-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("xlg-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("xlg-left")){ $(this).popover(left);}
                        else if($(this).hasClass("xlg-right")){ $(this).popover(right);}
                    }
                });

Answer 1

[Олег]

Какой раз вы уже задаете здесь этот вопрос? )

$(function() {

    var width = $(window).width(),
        size = width < 768 ? 'xs' : width < 992 ? 'sm' : width < 1200 ? 'md' : width > 1600 ? 'xlg' : 'lg',
        options = {
            html: !0,
            trigger: 'hover',
            container: 'body',
            viewport: {
                selector: 'body',
                padding: 2
            },
            template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
        };

    $( '[data-toggle="popover"]' ).each( function() {
        
        var toggle = $(this);

            $.each([ 'bottom', 'top', 'left', 'right' ], function( i, value ) {

                var cls = size + '-' + value;

                if ( toggle.hasClass( cls ) ) options.placement = value;

                if ( cls === 'xs-top' && toggle.hasClass( 'error' ) ) {
                    options.delay = { show: 500, hide: 10 };
                    delete options.viewport;
                }

                toggle.popover( options );

            });

    });

});

Comments

[Rostyk Ice]

Да раз 3 уже, но с разними технологиями. :)
Да слабый я в джс, а узнать как бы написали код люди которые знают больше меня интерестно.
А если я захочю добавить что бы если в классе xs-top есть класс error тогда в option добавлялось

delay: {
                        show: 500,
                        hide: 10
                    },

и убиралось оттуда

viewport: {
                selector: 'body',
                padding: 2
            }

Это тяжело реализовать?

[Олег]

Rostyk Ice: Обновил.

[Rostyk Ice]

Олег: Не могу понять, оно почему то не работает, не делает ничего....(

[Олег]

Rostyk Ice: Смотрите консоль или пилите пример в песочнице, так сложно сказать.

[Rostyk Ice]

Олег: Когда вы все обгорнули в $(function() {
все перестало работать. Разобрался, спасибо Вам.

[Rostyk Ice]

Олег: Что у Вас делает эта строка.
$.each([ 'bottom', 'top', 'left', 'right' ], function( i, value )

А то такое впечатление что она бессполезна.

Answer 2

[Rsa97]

var re = /(?:^|\s)(?:xs|sm|md|lg|xlg)-(bottom|top|left|right)(?:$|\s)/;
$('[data-toggle="popover"]').each(function() {
  var classList = $(this).attr('class');
  var ok = re.exec(classList);
  if (ok !== null) {
    $(this).popover({
      trigger: "hover",
      container: "body",
      placement: ok[1],
      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>'
    });
  }
});

Comments

[Rostyk Ice]

Выглядит красиво, но не пойму почему не работает...)

[Rsa97]

Rostyk Ice: Поправил.

[Rostyk Ice]

Rsa97: А как добавить

delay: {
                        show: 500,
                        hide: 10
                    },

в popover если в [data-toggle="popover"] есть класс error?

[Rostyk Ice]

Rsa97: Код у вас выглядит круто, да и работает, для меня останется тайной что он делает, буду по ходу дела разбирать ваш скрипт, спасибо!

[Rsa97]

Rostyk Ice:

var options = {
      trigger: "hover",
      container: "body",
      placement: ok[1],
      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>'
    };
if ($(this).hasClass('error'))
  options.delay = { show: 500, hide: 10};
$(this).popover(options);

[Rostyk Ice]

Rsa97: Все хорошо но нет проверки ширины екрана...)

[Rostyk Ice]

Rsa97: В моих ифах есть проверка по ширине у вас чисто по классам.

[Rsa97]

Rostyk Ice: А смысл проверять ширину? От неё что-нибудь кроме имени класса зависит?
При ширине < 768 может быть класс xlg-bottom?

[Rostyk Ice]

Rsa97: В див с [data-toggle="popover"] будет 5 классов(разных, я навожу пример чисто) xs-top, sm-bottom, md-right, lg-left, xlg-top . И в зависимости от ширины будет действовать другой класс.

[Rostyk Ice]

Rsa97:
Вот пример зависимости ксласса от ширины.

if(width<768){
                        if ($(this).hasClass("xs-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("xs-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("xs-left")){ $(this).popover(left);}
                        else if($(this).hasClass("xs-right")){ $(this).popover(right);}
                    }else if(width>=768 && width<992){
                        if ($(this).hasClass("sm-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("sm-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("sm-left")){ $(this).popover(left);}
                        else if($(this).hasClass("sm-right")){ $(this).popover(right);}
                    }else if(width>=992 && width<1200){
                        if ($(this).hasClass("md-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("md-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("md-left")){ $(this).popover(left);}
                        else if($(this).hasClass("md-right")){ $(this).popover(right);}
                    }else if(width>=1200 && width<1600){
                        if ($(this).hasClass("lg-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("lg-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("lg-left")){ $(this).popover(left);}
                        else if($(this).hasClass("lg-right")){ $(this).popover(right);}
                    }else if(width>=1600){
                        if ($(this).hasClass("xlg-bottom")){ $(this).popover(bottom);}
                        else if ($(this).hasClass("xlg-top")){ $(this).popover(top);}
                        else if ($(this).hasClass("xlg-left")){ $(this).popover(left);}
                        else if($(this).hasClass("xlg-right")){ $(this).popover(right);}
                    }

[Rsa97]

Rostyk Ice: Тогда понятно.

var width = $(window).width();
var prefix = width < 768 ? 'xs' : width < 992 ? 'sm' : width < '1200' ? 'md' : width < '1600' ? 'lg' : 'xlg';
var re = new RegExp('(?:^|\s)'+prefix+'-(bottom|top|left|right)(?:$|\s)');

[Rostyk Ice]

Rsa97: Пробывал ваш скрипт, не работает, в консоле не выводит options, соответственно не применяет к this

var width = $(window).width();
            var prefix = width < 768 ? 'xs' : width < 992 ? 'sm' : width < '1200' ? 'md' : width < '1600' ? 'lg' : 'xlg';
            var re = new RegExp('(?:^|\s)'+prefix+'-(bottom|top|left|right)(?:$|\s)');
            $('[data-toggle="popover"]').each(function() {
              var classList = $(this).attr('class');
              var ok = re.exec(classList);

              if (ok !== null) {
                var options = {
                  trigger: "hover",
                  container: "body",
                  placement: ok[1],
                  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>'
                };
            if ($(this).hasClass('ppm'))
              options.delay = { show: 500, hide: 10};
            $(this).popover(options);
            console.log(options);
              }
            console.log(this);
            });

[Rsa97]

Rostyk Ice: Да, видимо забыл про экранирование.

var re = new RegExp('(?:^|\\s)'+prefix+'-(bottom|top|left|right)(?:$|\\s)');

[Rostyk Ice]

Rsa97: Да все работает :)
Не подскажите что дописать что бы когда скрипт не нашел любой из классов применял к this

var options = {
                  trigger: "hover",
                  container: "body",
                  placement: ok[1],
                  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>'
                };

[Rsa97]

Rostyk Ice: Добавить else. Если совпадения регулярного выражения не найдено, exec() возвращает null.

[Rostyk Ice]

Rsa97: Так?

if (re.exec(classList) == null) {
                    var options = {
                      trigger: "hover",
                      container: "body",
                      placement: "right auto",
                      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>'
                    };
                    $(this).popover(options);
                    console.log(this);
                    console.log(options);

                }

И подскажите что делают тут побитные операторы? (?:^|\\s)
Читал, но не понял для чего они там.

[Rsa97]

Rostyk Ice: Просто ветку else

if (ok !== null) {
...
} else {
...
}

(?:) - группа поиска, не попадающая в результат (non-capturing group)
| - или
^ - в данном случае начало строки
\s - любой пробельный символ (пробел, \r, \n, \t, \f, или \v), \\ используется чтобы экранировать \
(?:^|\\s) - начало строки или пробельный символ, в результате не отображать.