Разработка

Drupal 7: Подключайте JS правильно

Невероятно часто народ подключает JavaScript файлы кто как может. А ведь в Drupal'e для этого есть спец функция, которая достаточно гибкая и полезная. Поэтому рассмотрим как можно добавить JS на сайт.

Вариант 1: Через кастом-модуль

Для таких изяществ есть спец функция drupal_add_js(). Она, как несложно догадаться, добавлят JS файл на сайт. Все просто и банально, вот вам парочка примеров:

// Добавляет JS
drupal_add_js('js/script.js');
// Добавляет JS по урл
drupal_add_js('https://www.google.com/jsapi');
// Добавляет конкретный JS скрипт.
drupal_add_js('jQuery(document).ready(function () { alert(«Hello!»); });');
// И даже! Можно передать в JS нужные данные.
// Этот код добавит значение в DOM drupal.settings.wtf текст tratata. Разумеется он будет доступен из Javascript.
drupal_add_js(array('wtf' => 'tratata'), 'setting');

Также полезной окажется следующая функция:

drupal_get_path('module', 'wtf');

Данная функция вернет путь до места нахождения модуля. Например, если вы храните свой скрипт в модуле wtf, а там в папке js, то добавить скрипт можно двумя способами:

// Самый первый что придет в голову
// Но если переместить модуль, все слетит.
drupal_add_js('sites/all/modules/wtf/js/script.js');
// А вот более «железное» решение
drupal_add_js(drupal_get_path('module', 'wtf') . '/js/script.js');

Вариант 2: Через тему сайта

Также можно подключать JS при помощи своей темы оформления. Напишу на примере zen-subtheme.

Создаем в папке темы новую папку и назовем js, а в неё кладем наш script.js. Затем нам достаточно открыть .info файл темы и добавить в соответствующий раздел, если нету то добавьте где сами считаете нужным, следующий код:

scripts[] = js/script.js

Вариант 3: В файле темизации

Допустим вы хотите чтобы файл подключился на определенной ноде и вы создали для неё шаблон node—NID.tpl.php. В этом случае проще всего подцепить JS непосредственно в этом файле, просто вверху напишите то что мы рассмотрели в варианте 1.

Тут будет полезна еще одна функция для опредления путей: path_to_theme() — она возвращает путь до текущей темы, как в случае с модулем.
Допустим хотим добавить файл из варианта 2 но через php:

drupal_add_js(path_to_theme() . 'js/script.js');

Просто, не так ли? А главное правильно и надежно. При этом можно просто передавать параметры в из PHP в JS, что увеличивает гибкость.

P.s.

Вы можете посмотреть как, например, я сделал в своем небольшом модуле, который сделан весь на JS, но обернут в модуль Drupal'a.

 
 
30.05.2013 — 21:09

Комментарии (6)

Аватар пользователя xandeadx
30.05.2013 — 21:55
3
 
 

как же #attached и drupal_add_library?

Аватар пользователя Niklan
30.05.2013 — 22:03
0
 
 

хм, не работал с ними :) Было бы хорошо если кто дополнил.

Аватар пользователя ihappy
10.12.2013 — 17:00
0
 
 

Запили дополнение к статье.

Аватар пользователя petu
07.06.2013 — 05:18
0
 
 

Спасибо за статью, пару моментов:

  1. Хорошо было бы расписать разницу между этими методами. В каком случае нужно включать через модуль, а в каком — через тему.
    • - Через модуль стоит включать, если этот js используется лишь этим модулем. Если модуль выключен, js сайта не разростается на неиспользуемый код.
    • - Если нужно, чтобы js присутствовал на определенных страницах, например, на странице с js-контролом, то в модуле можно поставить условия и цеплять js только для этих страниц.
    • - Через тему стоит включать, если js используется всюду. Например, для слайдера, размещенного на всех страницах сайта.
  2. Почему именно такие методы правильные? В друпале есть автоматическая объединялка js-файлов. Если объединение файлов включено в настройках производительности, то многочисленные js-файлы (а их действительно очень много) она объединяет в 4 файла, которые браузером выкачиваются в 4 потока при загрузке страницы. Есть еще сжималки/минимизаторы js-кода. Про них ничего не скажу, ибо не использовал еще.

Резюмирую: страницы проекта с правильно подключенным js будут гораздо быстрее грузиться. Они будут компактнее за счет исключения js-кода на тех страницах, где он не используется.

Конечно, можно сказать, что весь однажды загруженный js-код кэшируется браузером и потом не выкачивается заново.
Можно сказать, что в наш космический век, скорости загрузки контента большие и на это можно забить. Но всё это отмазки. Ибо есть мобильные пользователи — их уже много. При усложнении проекта, js-код разрастается катастрофически, если не делать оптимизацию сразу, на нее придется тратиться гораздо больше времени позже.

Аватар пользователя FORTIS
27.03.2014 — 21:05
0
 
 

- Через тему стоит включать, если js используется всюду. Например, для слайдера, размещенного на всех страницах сайта.

не совсем верно, слайдер это функционал сайта, подключая дополнительный js в теме мы таким образом тащим в зависимость к функционалу дизайн. если js используется всюду, то этому модуль c имплементацией hook_library и js в libraries

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

Аватар пользователя FORTIS
27.03.2014 — 21:09
0
 
 

в целом лучше подключать через #attached — так мы крепим код к элементам для которых он предназначается, вне зависимости от страницы на которых находятся эти элементы. в результате избавляемся от казусов когда элемент на странице есть а js к нему не подгружен. да и в формах лучше #attached чтобы при ошибках валидации и повторном показе формы код снова выполнялся