Портал Belkin-labs»PHP классы»Статья
welcome!

Подключаем JS файлы и отдельные скрипты в заголовок сайта (тег head)

Вот пример одного из удачнейших случаев в моей объектно-ориентированной практике. Файлы JS и отдельные скрипты подключаются в код заголовка страницы аналогично файлам CSS и отдельным стилям. Классическая задача для иллюстрации повторного использования кода. Минимальными переопределениями мы создали сервис с высочайшим уровнем удобства для программиста.

Вывод тегов script в сравнении с выводом тегов link и style

Напомню, что мы поставили себе исключительно высокую планку по управлению стилями. Это мы сделали вот в этой статье. Давайте я проведу аналогию между CSS и JS. Тогда мы сразу поймем, на сколько задачи одинаковые.

  • Чтобы к странице подключались только (по возможности, конечно) стили, которые нужны. Это полностью относится и к JS скриптам.
  • Чтобы при редактировании мы имели красивый текст с обильными комментариями, причем мы бы не заботились о том, что эти комментарии будут создавать дополнительный и ненужный вес при загрузке страницы. Полностью соответствует JS
  • Уметь объединять несколько стилевых файлов в один, сжимая их при этом. Точно соответствует JS
  • Мы хотим некоторые стили в виде одного сжатого файла подключать в заголовке страницы, а другие стили, тоже в таком же виде подключать в самом конце страницы, за тегом . Вот тут есть разница. В плане JS мы бы хотели некоторые линки выводить с атрибутом async.
  • Мы хотим подключать в заголовок страницы стили в виде текста, сжимая при этом текст и помещая их в тег style. Полностью соответствует JS. Только, конечно тег должен быть script.
  • Вставка макросов или хотя бы констант в файлы стилей. Вот в JS нам это ненужно!
  • Ну и дальше два общих довольно пункта, которые тоже ПОЛНОСТЬЮ соответствуют нашим желаниям в JS.

Как видите, задачи на удивление аналогичны. Здесь мы во всей полноте используем достоинства ООП подхода.

Приступаем к реализации

Если помните, а если не помните, то я вот сейчас повторю, с обработкой CSS мы имели базовую ветвь классов из трех штук и аналогичную ветвь на уровне проекта. Эти ветви реализовывали у нас файлы, файловый кэш и линки. И еще одна веточка для реализации вставки живого кода в заголовок страницы (тег head). Исходя из того, что нам надо всего-лишь изменить одну функцию и удалить вторую, мы смело делаем классы для JS на основе соответствующих классов для CSS.

В итоге мы получаем базовый класс JS_UNITE на основе класса CSS_UNITE. Он фактически помещается на один экран (55 строк). Класс CODE_COMPRESS вообще отвечает за сжатие обоих типов кода. Надо только сказать ему, какой язык сжимаем. Все остальные наследования мы вообще делаем на уровне проекта. Изменения тоже минимальны. Весь код вместе с комментариями на оба класса 39 строк.

Это что касается ветки классов для вставки линков на файлы. С классом TAG_STYLE все оказалось еще проще.

А чем мы, собственно, сжимаем JS код?
Сжатие JS кода оказалось куда муторнее сжатия CSS кода. Не долго думая, я сходил в интернет и нашел добрых людей, которые эту проблему на PHP решили. Ну решили и хорошо. Выбрал я класс, который мне подходит, разобрался, как работает, маленько подправил под проект и все! Дело сделано! Спасибо разработчику, который не только сделал, а еще и выложил свой труд на всеобщее использование! Конкретно пакет JShrink, автор Robert Hafner, лицензия BSD полностью мною соблюдена.

Радостный эпилог

Вот даже приятно, когда все происходит так просто и красиво. Красивый код легче отлаживать и сам он от рожденья надежнее получается! К сожалению, такое бывает не часто, а очень даже редко. Но мы не унываем, а продолжаем писать новый код и совершенствовать уже написанный, доводя его до состояния, близкого к идеалу.

Автор php-тулбокса
Дмитрий Белкин

Статья создана 04.01.2015
Похожие материалы - отбираем по ключевым словам