jQuery + WordPress

Ранее я уже поднимал тему корректного подключения библиотеки jQuery – jquery.com в проектах под WordPress — Корректное подключение jQuery в теме WordPress. В записи я указывал на корректный способ подключения библиотеки, однако, способ ее подключения не единственная возможная причина затруднений в работе сайта.

К моему удовольствию данный вопрос был поднят на WordCamp прошедшем в Ванкувере в этом году. Andy Peatling выступил с презентацией Tips for writing better Javascript using jQuer.

Я предлагаю вам ознакомиться с переводом и моими комментариями к части слайдов продемонстрированных в презентации, к той части, которая касается основ использования jQuery в WordPress проектах.

Используйте ту версию jQuery, которая входит в состав ядра WordPress

Для корректного подключения библиотеки используйте нативную функцию WordPress:

function mytheme_add_js() {
  wp_enqueue_script('jquery');
}
add_action (
  'wp_enqueue_scripts', 
  'mytheme_add_js'
);

Не сомневайтесь, вы можете использовать $() без конфликтов

Для начала простой пример скрипта.

$('#myplugin').slideDown('fast', 
  function() {
    $(this).ahowKittens();
  }
);

Обернем код функцией .ready выполняющейся всякий раз, когда объектная модель документа (DOM) готова к использованию.

jQuery(document).ready( function($) {
  $('#myplugin').slideDown('fast', 
    function() {
      $(this).ahowKittens();
    }
  );
});

А теперь сократим запись.

(function($) {
  $('#myplugin').slideDown('fast', 
    function() {
      $(this).ahowKittens();
    }
  );
}(jQuery));

Приведенный пример кода будет корректно работать в плагинах и темах WordPress.

Использование селекторов

Кэшируйте селекторы для ускорения их обработки! Для примера напишем:

$('#mywidget').appendTo('#sidebar');
$('#mywidget').addClass('widget');
$('#mywidget').hide();
$('#mywidget').fadeIn('fast');

Тот же код гораздо лучше выглядит так:

var myWidget = $('#mywidget');
myWidget.appendTo('#sidebar');
myWidget.addClass('widget');
myWidget.hide();
myWidget.fadeIn('fast');

Не просто лучше выглядит, а на 60-70% быстрее работает!

Используем “цепочки” и перепишем пример так:

var myWidget = $('#mywidget');
myWidget
  .appendTo('#sidebar')
  .addClass('widget')
  .hide()
  .fadeIn('fast');

Конкретизируйте селекторы

Для примера кусочек кода:

$('.widget')
  .on('click', showMenu);

В нем все верно, однако, селектор класса не будет работать быстро. Гораздо лучше, а именно на 15-20% быстрее код будет работать если конкретизировать селектор так:

$('.widget', '#sidebar')
  .on('click', showMenu);

А еще быстрее так если написать так:

$('#sidebar').find('.widget') 
  .on('click', showMenu);

Это лишь малая часть из презентации, полную версию можно посмотреть тут – slideshare.net/apeatling/tips-for-writing-better-javascript-using-jquery

Опубликовано

Обратите внимание на предыдущие записи: