Как разделить скрипты из функции по разным видам?

Вопросы по вёрстке и JavaScript
Ответить
Аватара пользователя
girmate
Сообщения: 1534
Зарегистрирован: 2015.10.27, 12:52

Как разделить скрипты из функции по разным видам?

Сообщение girmate »

У меня на главной странице получилась такая портянка:

Код: Выделить всё

<!-- JS Plugins Init. -->
    <script>
        $(document).on('ready', function () {
            // Header
            $.HSCore.components.HSHeader.init($('#js-header'));
            $.HSCore.helpers.HSHamburgers.init('.hamburger');

            // Initialization of HSMegaMenu plugin
            $('.js-mega-menu').HSMegaMenu({
                event: 'hover',
                pageContainer: $('.container'),
                breakpoint: 991
            });

            // Init popups with media
            $.HSCore.components.HSPopup.init('.js-fancybox');
            $.HSCore.components.HSPopup.init('.js-fancybox-media', {
                helpers: {
                    media: {},
                    overlay: {
                        css: {
                            'background': 'rgba(255, 255, 255, .8)'
                        }
                    }
                }
            });

            // Slick Carousel
            $.HSCore.components.HSCarousel.init('.js-carousel');

            // initialization of text animation (typing)
            $(".u-text-animation.u-text-animation--typing").typed({
                strings: ["an awesome template", "perfect template", "just like a boss"],
                typeSpeed: 60,
                loop: true,
                backDelay: 1500,
            });

            // Parallax
            dzsas_init('#as0', {
                settings_mode: 'onlyoneitem',
                design_arrowsize: '0',
                settings_swipe: 'on',
                settings_swipeOnDesktopsToo: 'on',
                settings_slideshow: 'on',
                settings_slideshowTime: '300',
                settings_autoHeight: 'off',
                settings_transition: 'fade',
                settings_centeritems: false
            });
        });
    </script>

Но конкретные блоки из этого нужны только если в виде он используется. Например на некоторой странице это блок:

Код: Выделить всё

 // initialization of text animation (typing)
            $(".u-text-animation.u-text-animation--typing").typed({
                strings: ["an awesome template", "perfect template", "just like a boss"],
                typeSpeed: 60,
                loop: true,
                backDelay: 1500,
            });
может присутствовать, а может и не присутствовать. Какое решение? Сделать этот блок в конкретном view и присоединять в конец, используя registerJs()?

Код: Выделить всё

<!-- JS Plugins Init. -->
    <script>
        $(document).on('ready', function () {
           
            // initialization of text animation (typing)
            $(".u-text-animation.u-text-animation--typing").typed({
                strings: ["an awesome template", "perfect template", "just like a boss"],
                typeSpeed: 60,
                loop: true,
                backDelay: 1500,
            });

          
        });
    </script>
Но тогда получится целая куча таких блоков. Как поступить?
Осторожно! Вы общаетесь с новичком ;)
chesar
Сообщения: 514
Зарегистрирован: 2013.04.10, 17:49

Re: Как разделить скрипты из функции по разным видам?

Сообщение chesar »

Пусть всё будет в одном js файле. Размером страницы в полтора мегабайта уже никого не удивишь. Если конечно ресурс не ориентирован на регионы с дорогим мегабайтным интернетом
Аватара пользователя
girmate
Сообщения: 1534
Зарегистрирован: 2015.10.27, 12:52

Re: Как разделить скрипты из функции по разным видам?

Сообщение girmate »

chesar писал(а): 2017.07.09, 05:22 Пусть всё будет в одном js файле. Размером страницы в полтора мегабайта уже никого не удивишь. Если конечно ресурс не ориентирован на регионы с дорогим мегабайтным интернетом
Спасибо за ответ, я думал все в отпуск ушли или форум переехал.

Но тут вот в чем вопрос. Если я использую карусель, допустим. На некоторых страницах она используется, на некоторых - нет. В этом коде (выше) происходит инициализация компонента. Значит я его должен выдрать оттуда и поместить в отдельный js-файл и подключать только там его, где используется этот модуль? Если его оставить в общем файле, то будет попытка инициализации компонента, которого не существует на странице. И вот я не знаю. Если это не приведет к ошибке - то неважно. А если приведет к ошибке, то нужно разделять и подключать отдельно, если я правильно понял.

Вот взять к примеру популярный fancybox. Если его инициализировать и компонент написан правильно, то, по идее, ошибки не должно быть? Тогда ваш вариант подходит.
Осторожно! Вы общаетесь с новичком ;)
Dima1987
Сообщения: 20
Зарегистрирован: 2017.06.26, 13:49

Re: Как разделить скрипты из функции по разным видам?

Сообщение Dima1987 »

а если делить на разные файлы js и подключать не через асеты а registerjsfile ?
Аватара пользователя
girmate
Сообщения: 1534
Зарегистрирован: 2015.10.27, 12:52

Re: Как разделить скрипты из функции по разным видам?

Сообщение girmate »

Dima1987 писал(а): 2017.07.11, 17:30 а если делить на разные файлы js и подключать не через асеты а registerjsfile ?
Я это и имел в виду. Просто мне не нравится, что в конце страницы будет много блоков типа:

Код: Выделить всё

 $(document).on('ready', function () {
           
            // initialization plugin #1
          
          ...
          
        });
        
 $(document).on('ready', function () {
           
  // initialization plugin #2
          
       ...
          
 });
 $(document).on('ready', function () {
           
 // initialization plugin #3
          
  ...
          
 });
но видимо от этого никуда не деться.
Последний раз редактировалось girmate 2017.07.12, 14:28, всего редактировалось 1 раз.
Осторожно! Вы общаетесь с новичком ;)
Dima1987
Сообщения: 20
Зарегистрирован: 2017.06.26, 13:49

Re: Как разделить скрипты из функции по разным видам?

Сообщение Dima1987 »

я видел в каком то видео как для ІЕ создавали свой Assets там делали все зависимости и подключали 2 на странице. Но там было типа проблема подключение по условию в зависимости от браузера.
Ответить