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

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

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

<div>
 
</div>

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

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

Что-то вроде

JSP

<div>
 
</div>

JS файл

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

Разъяснения:

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

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

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

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

1 ответ

так что вы говорите, что части вашего сайта входят в "модули", у которых есть свой собственный HTML и JS, и что, когда вы суммируете все это, они просто находятся в середине вещей?

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

как говорят:

<div data-source="path_to_script"><code>your module HTML</code>


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

licensed under cc by-sa 3.0 with attribution.