Как правильно писать клиентский JS для многостраничный сайтов?

Question

[Евгений Москаленко]

Для разных страниц на сайте могут быть разные скрипты. Если писать всё в одном файле без всяких проверок - бывает такое, что какой-то элемент на странице не найден, либо не отработала какая-то функция, либо лишние запросы отправляются. И становится вопрос производительности. На данный момент для обхода таких ошибок, я использую проверки "if ()". Т.е. к примеру задаю определенные классы или айди body или main. И затем проверяю какая страница и исполняю определёный код. Вопрос состоит в том, какой правильный подходом в таких случаях использовать. Поделитесь своим опытом.

Answer 1

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

Подобные проблемы неплохо решает Webpack

https://www.youtube.com/watch?v=Om6yGdU_YlQ&index=...
(рекомендую просмотреть весь плейлист)

Comments

[Евгений Москаленко]

Ну, про вебпак я знаю, юзаю сам. Но, а если без него? Без иморта скриптов?

Answer 2

[Dark Hole]

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

• main.js - вы тут соединяете, главным образом, блоки
  
• lib.js... - несколько независимых файлов
  

Comments

[xmoonlight]

добавлю про визуальные модули:
modules/module1/init.js
.......................
modules/moduleN/init.js

[Dark Hole]

xmoonlight: я бы такой структуры избегал. Легко запутаться в одинаковых файлах

[xmoonlight]

Dark Hole: Имена папок модулей - разные.
Имена - в соответствии с назначениями модулей (1-N - просто для примера, чтобы показать, что они - разные).
Подключаем по именам папок. (структура - заранее унифицирована)

Answer 3

[Оптимус Пьян]

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

Answer 4

[xmoonlight]

Я это делаю на уровне PHP-фреймворка:
1. Изначально - всегда добавляются только те, которые присутствуют в шаблоне на каждой странице.
2. Когда я задействую нужный мне на странице блоковый визуальный модуль (PHP+JS), перед добавлением JS-скрипта в секцию head происходит проверка его существования в ней: возможно другие подобные модули уже запросили этот файл стилей, функцию или библиотеку.
3. На выходе: ТОЛЬКО НУЖНЫЕ ДЛЯ ЭТОЙ СТРАНИЦЫ js-скрипты, css и прочее, в соответствии с добавленными визуальными модулями, необходимость использования которых зависит от того, что должно отображаться на странице и за этим следит фреймворк.

Конкретно, если это делать на клиенте через JS - нужен механизм на JSON-файле с "деревом" зависимостей объектов, обрабатываемых на страницах (URL-ах):
[URL1] => [дерево объектов, с которыми работает js]
...........
[URLN] => [дерево объектов, с которыми работает js]

Answer 5

[Алексей]

Попробуй Polymer . Сама структура кода и методика его написания позволяет избежать подобных ошибок

Answer 6

[John Doe]

Если не хотите использовать jQuery, который сам определит имеется ли элемент на странице, то достаточно простой проверки на существование елемента

if ( document.exist( '.selector' )  ) // Вернет TRUE или FALSE
    document.one( '.selector' ).addEventListener ....

Маленький полифил с плохой документацией )