Лучшая практика для хранения JS внизу страницы с помощью компонентных модулей - PullRequest
Новая
       47

Лучшая практика для хранения JS внизу страницы с помощью компонентных модулей

0 голосов
/ 21 марта 2012

Я ищу лучшие практики / шаблоны проектирования для хранения JavaScript во внешних файлах JS / внизу страницы.Я столкнулся с проблемой, когда мои страницы построены из нескольких компонентов, и каждый компонент отвечает на компонент jquery, которому нужно передать несколько параметров.

Так, например, в JSP 

<div class="component-a">
   <div id="js-slideshow-<%= slide-id %>" class="js-slideshow"></div>
</div>
<script>$('#js-slideshow-<%= slide-id %>').initslideshow({'path':<%= path %>});</script>

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

Сначала я хотел бы загрузить любые параметры, необходимые плагинам jquery, в качестве атрибутов data- *.

Что-то вроде

JSP 

<div class="component-a">
   <div data-path="<%= path %>" class="js-slideshow"></div>
</div>

JS-файл 

<script>
$(".js-slideshow").each(function() { 
   $(this).initslideshow('path': $(this).attr('data-path'));
});
</script>

Существуют ли другие полезные шаблоны для разделения JavaScript в файлах JS, даже когдавызовы требуют данных / контекста, которые должен предоставить сервер, и могут быть доступны только из контекста компонента?

Пояснения:

Это просто практикаразбить общие элементы презентации на отдельные файлы.Частицы Ruby on Rails являются одним из примеров этого.Одним компонентом может быть «Слайд-шоу», но в зависимости от того, на какой странице он расположен, я могу захотеть настроить его поведение, используя разные значения, такие как различные наборы изображений для отображения, изображения разного размера или другой заголовок и т. Д. Это «разнообразие»в параметрах, «известных» серверу, и сервер должен был бы понять контекст, чтобы извлечь значения параметров из хранилища данных на стороне сервера и записать их в вызовы JS.

В идеале я хотел быминимизируйте количество раз, когда один и тот же «базовый» JS записывается, и выполняйте его внизу один раз по следующим причинам: 1. Уменьшите вес страницы 2. Увеличьте читаемость сгенерированного HTML 3. Перемещенный код JavaScript (даже если это просто вызовы) из файла HTML в файл (ы) JS - который представляет собой четкое разделение кода и данных. 4. Позволяет кэшировать больше данных (файл JS можно кэшировать, а дополнительный вес страницы не нужно загружать в другие).запросы страницы) 5. Избегайте сценария более сложных компонентов, имеющих несколько событийсвязаны с тем же элементом.Например:

$(".slideshow").init('<%= param %>') добавляет событие привязки к элементу .slideshow, если я вызову $(".slideshow").init('<%= param %>') несколько раз, с этим элементом DOM будет связано несколько событий.(Я думаю, что связывание работает так, если не живой или делегат делает).Я могу обойти это, вызвав init для элемента с уникальным именем, но для этого необходимо добавить уникальные идентификаторы для каждого элемента DOM слайд-шоу, что кажется ненужным.

С точки зрения разработки у меня, скорее всего, будет отдельный JSфайл для каждого компонента, но соберет их в один файл в процессе сборки.

1 Ответ

2 голосов
/ 21 марта 2012

так что вы говорите, что части вашего сайта входят в «модули», которые имеют свои собственные HTML и JS, и что, когда вы подытоживаете все это, они просто находятся в центре событий?

Я предлагаю вам указать пути к сценариям в качестве переменных или data-*, а загрузчик внизу выполнить отложенную загрузку позже.

, как, скажем, 

<div class="component" data-source="path_to_script">
    your module HTML

, затем внизуваша страница, перед вашей `, у вас есть некоторый скрипт, который делает: 

<script>
    $(function(){

        //loader script
        (function loader(){

            //loop through all components
            $('.component').each(function(){

                //get the path and load script
                var scriptUrl = $(this).data('source');
                $.getScript(scriptUrl);

                //or if params
                var params = $(this).data('params'); //may be in JSON string perhaps?
                //parse JSON here
                $(this).initSlideshow(params);                    

            });
        }());
    });
</script>

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

...