Как выполнять js лишь на определнных страницах?

Question

[raiboon]

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

Answer 1

[Денис Инешин]

И в этом вопросе вам поможет например:
requirejs.org
browserify.org

Comments

[raiboon]

А чем он помогает в таких ситуациях? Просто более умная сборка. А код-то для всех страниц общий.

[Денис Инешин]

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

[raiboon]

Денис Инешин: Так тоже можно, но не нужно же.

[Денис Инешин]

raiboon: конечно не нужно) сливаем в один файл, каждый модуль будет обернут в свой define например, и будет выполнен только по запросу

[Александр Таратин]

raiboon: Нужно.

[Денис Инешин]

Александр Таратин: в смысле не нужно по отдельным файлам держать, а использовать вообще нужно)

[raiboon]

Денис Инешин: Немного не понял. Как это? Я никогда не использовал define - это же намек на RequireJS? А Browserify использовал, при сборке, получается тот же конкатенированный файл. И остается таже проблема смешивания js для разных страниц.

[Денис Инешин]

raiboon: ну вот смотрите, у нас есть например функция, эту функцию браузер не выполнит до тех пор, пока не наткнется на прямой её вызов, вроде foo(); тот же самый принцип и у этих библиотек, каждый модуль обернут в функцию и не будет выполнен до тех пор, пока не будет вызван. Так что совершенно не важно, что страница загрузила весь код, который есть.

Answer 2

[Viktor Vsk]

Что значит, инициализируется?
$('[data-toggle="modal"]').modal();
Не инициализирует ничего, если селектора:
[data-toggle="modal"] нет
То есть, происходит только поиск селектора.

Или вы о каких-то других инициализацях?

Comments

[raiboon]

И о них тоже. Мало ли какая инициализация может пройти на странице.

[Viktor Vsk]

raiboon: Ну так 2 варианта: селектора нет - происходит поиск по дерево и завершение. Селектор есть - происходит поиск и "инициализация". В чем проблема? Боитесь, что на одних страницах одни и те же селекторы нужно обрабатывать, а на других - нет ? Это проблема дизайна уже, а не файловой структуры.

[raiboon]

Виктор Ablebeam: Но ведь время на бесполезные поиски элементов тоже тратится.
ПЛюс, к примеру на определенной странице делается ajax запрос на какие-то данныеЮ что бы инициализировать виджет карт. Как от него избавиться&

[Viktor Vsk]

raiboon: Очевидно же, избавиться проверкой на наличие этого виджета на странице. По-хорошему, JS должен взаимодействовать только с data-атрибутами. Есть дата-атрибут - нужно работать. Нет дата-атрибута - не нужно работать.

Если запрос делается до такой проверки - это плохой дизайн. И разделение по файлам спасет лишь незначительно.

Время на поиск... Ну, тут вы правы, эти спички редко считают.

Answer 3

[Валентин Дубровский]

Странный конечно вопрос, но попробую дать ответ.
Пример c backend на php. В шаблоне делаете тег script, в неё прокидываете из контроллера, или что у вас там название страницы.

<script>
var currentPage = <?=$this->pageName?>; // Например $this->pageName == "first"
</script>

В js делаете к примеру так:

var pages = {};
pages.first = function() {
    // тут код который должен вызываться на первой странице.
}
pages.second = function() {
    // тут код который должен вызываться на второй странице.
}
// потом вызываете код нужной страницы.
pages[currentPage]();

Answer 4

[Денис Л.]

Вот неплохая статья на эту тему, с примерами:
https://blog.lisogorsky.ru/js-css-individual-inclusion