Как подружить Drupal и jQuery

Что делать, если скрипт на jQuery, найденный вами в интернете не работает при его вставке в Drupal. В чем проблема и как ее решить?

При написании кода лучшая практика — это обернуть свой код в «замыкание» (обертку, хз как назвать). «Замыкание» — это не более чем функция, которая позволяет ограничить область действия переменных, чтобы случайно не перезаписать глобальных переменных.

  1. // Объявляем новую функцию.
  2. (function () {
  3.   // Функции объявленые здесь не будут влиять на заданные глобально.
  4.   var window = "Whoops, at least I only broke my code.";
  5.   console.log(window);
  6. // Дополнительный набор скобках говорит запустить функцию, которую мы только что определили.
  7. }());
  8. // Наш дурацкий код внутри замыкания не влияет на всё остальное.
  9. console.log(window);

У Drupal 7 есть одна особенность, после загрузки misc/drupal.js включается режим jQuery.noConflict. Это мешает нам выполнять скрипты jQuery как раньше, простым копированием кода.

Решить это можно например вот так

  1. // Мы определяем функцию, которая использует один параметр с именем $.
  2. (function ($) {
  3.   // Используем jQuery с скоращением:
  4.   console.log($.browser);
  5. //Здесь мы сразу вызываем функцию с JQuery в качестве параметра.
  6. }(jQuery));

Обратите внимание, что есть два приемлемых синтаксиса для закрытия: скобка, которая закрывает первую скобку может идти как до, так и после (JQuery).

Функция .ready() так же имеет возможность задавать псевдоним объекту jQuery:

  1. jQuery(document).ready(function($) {
  2.   // Code that uses jQuery's $ can follow here.
  3. });

В Drupal 7 jQuery.noConflict () вызывается, чтобы сделать его проще в использовании других библиотек JS, так что вам либо придется вводить JQuery () или у вас будет замыкание переименовывающее его для вас

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

Использовать модуль jQuery Dollar

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

Теги: 
Drupal 7