15 важных советов и рекомендаций в использовании jQuery для разработчиков

В данной статье мы рассмотрим 15 jQuery-методик, которые будут полезными для эффективного использования данной библиотеки.

Начнем с нескольких советов по улучшению эффективности библиотеки и продолжим короткими описаниями некоторых наиболее неизвестных приемов.

Вперед.

1) Используйте последнюю версию jQuery

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

Вы можете использовать jQuery непосредственно с серверов Google, которые предоставляют бесплатный CDN хостинг для JavaScript-библиотек.

Последний пример будет автоматически включать в себя последнюю версию 1.6.x, как только она будет доступна, но, как было отмечено в css-tricks.com (eng.), она кэшируется только в течение часа, поэтому желательно не использовать ее в реализации проекта.

2) Создавайте упрощенные селекторы

До недавнего времени получение доступа к DOM элементам с помощью jQuery представляло из себя сочетание строк селекторов, JavaScript соединял и включал в себя такие методы как: getElementById(), getElementsByTagName() и getElementsByClassName(). В настоящее время все основные браузеры поддерживают querySelectorAll(), который понимает селекторы запросов CSS, что дает значительный прирост производительности (eng.).

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

$('li[data-selected="true"] a') //медленно

$('li.selected a') // лучше

$('#elem') // супер

Выборка по id — наиболее быстрый вариант. Если вы хотите произвести выборку по имени класса, напишите его с тегом – $('li.selected'). Данные оптимизации касаются, в основном, старых браузеров и мобильных устройств.

Доступ к DOM-дереву всегда будет самой медленной частью каждого JavaScript-приложения, поэтому минимизация данного процесса выгодна. Один из способов — кэширование результатов, которое предоставляет jQuery. Переменная, которую вы зададите, будет содержать jQuery объект, к которому вы сможете получить доступ позже в вашем коде.

var buttons = $('#navigation a.button');

var $buttons = $('#navigation a.button');

Стоит отметить тот факт, что jQuery предоставляет большое количество дополнительных селекторов (eng.) для удобства, такие как: :visible, :hidden, :animated и так далее, которые не являются действующими селекторами в CSS3. В результате, если вы используете их, библиотека не может использовать querySelectorAll(). Чтобы исправить ситуацию, можно сначала выбрать элементы, с которыми вы хотите работать, а затем фильтровать их, например:

1 2	$('a.button:animated'); // Не использует querySelectorAll() $('a.button').filter(':animated'); // Использует

Результаты, представленные выше, идентичны, с той разницей, что второй пример быстрее.

3) jQuery объекты как массивы

Результатом выполнения селектора будет jQuery объект. Тем не менее, библиотека будет предоставлять вам результат, как будто вы работаете с массивом.

// Выборка всех навигационных кнопок:

var buttons = $('#navigation a.button');

// пробежимся по массиву:

for(var i=0;i<buttons.length;i++){

console.log(buttons[i]); // DOM-элемент, не jQuery-объект

}

// Мы даже можем выбрать кусок массива:

var firstFour = buttons.slice(0,4);

Если производительность это то, к чему вы стремитесь, используя for (или while) вместо $.each(), сделает ваш код в несколько раз быстрее.

Проверка длины является единственным способом определить, содержит ли ваш массив элементы.

if(buttons){ // всегда true

// любой код

}

if(buttons.length){ // True, если buttons содержит элементы

// любой код

}

4) Свойство селектора

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

1 2	$('#container li:first-child').selector // #container li:first-child $('#container li').filter(':first-child').selector // #container li.filter(:first-child)

Хотя, приведенные выше примеры нацелены на один и тот же элемент, селекторы весьма различны. Второй на самом деле недействительный — вы не можете использовать его в качестве основы для нового объекта jQuery. Это только показывает, что метод фильтрации был использован для того, чтобы сузить набор элементов.

5) Создайте пустой объект jQuery

Создание нового объекта на jQuery может принести значительные затруднения в дальнейшем. Иногда вам будет необходимо создать пустой объект, и добавить его позже с помощью метода add ().

1 2	var container = $([]); container.add(another_element);

Это также является основой для quickEach () метода , который можно использовать в качестве более быстрой альтернативы, по умолчанию, вместо each().

6) Создайте случайный элемент

Как было упомянуто выше, jQuery добавляет свои собственные фильтры выбора. Вы также можете создавать свои собственные фильтры. Для этого просто добавьте новую функцию в объект $.expr[':']. Этот удивительный способ применения был представлен Уолдеком Мастикарзем в его блоге: создание селектора для получения случайного элемента. Вы можете увидеть слегка измененный вариант его кода ниже:

(function($){

var random = 0;

$.expr[':'].random = function(a, i, m, r) {

if (i == 0) {

random = Math.floor(Math.random() * r.length);

}

return i == random;

};

})(jQuery);

// Как это используется:

$('li:random').addClass('glow');

7) Используйте CSS-хуки

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

$.cssHooks['borderRadius'] = {

get: function(elem, computed, extra){

// В зависимости от браузера читает значение из

// -moz-border-radius, -webkit-border-radius или border-radius

set: function(elem, value){

// Устанавливает значение

}

};

// Пример использования:

$('#rect').css('borderRadius',5);

Что может быть лучше того, что люди уже реализовали богатую библиотеку с поддержкой CSS-хуков, которые вы можно использовать бесплатно в ваших проектах.

8) Используйте пользовательские функции easing

Вы, наверное, слышали о Easing jQuery-плагине — он позволяет добавить эффекты анимации. Единственным недостатком является то, что это еще один JavaScript файл, который посетители должны загрузить. К счастью, вы можете просто скопировать эффект из файла плагина и добавить его в jQuery.easing объект:

$.easing.easeInOutQuad = function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t + b;

return -c/2 * ((--t)*(t-2) - 1) + b;

};

// Пример использования:

$('#elem').animate({width:200},'slow','easeInOutQuad');

9) $.proxy ()

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

<button>Close</button>

</div>

Попробуем выполнить этот код:

$('#panel').fadeIn(function(){

// указывает на #panel

$('#panel button').click(function(){

// указывает на button

$(this).fadeOut();

});

Мы столкнемся с проблемой того, что исчезнет кнопка, а не панель. С $.proxy, вы можете написать следующим образом:

$('#panel').fadeIn(function(){

// используем $.proxy для привязки:

$('#panel button').click($.proxy(function(){

// указывает на #panel

$(this).fadeOut();

},this));

});

В результате вы получите то, что ожидаете. $.proxy принимает два аргумента — исходной функции и контекста. Она возвращает новую функцию, в которой значение всегда прикреплено к контексту. Подробнее о $.proxy в документации (eng.).

10) Определите размер вашей страницы

Простой факт: чем больше содержание вашей страницы, тем больше времени требуется браузеру для ее формирования. Вы можете получить количество элементов DOM на странице, выполнив в консоли:

1	console.log( $('*').length );

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

11) Превратите свой код в плагин jQuery

Если вы потратили некоторое время на написание jQuery-кода, то потратив еще чуть-чуть, вы сможете превратить его в плагин. Это способствует повторному использованию кода и помогает организовать базу для следующего проекта. Большинство руководств на Tutorialzine (eng) организованы в виде плагинов, что нравится посетителям.

Создание jQuery-плагина:

(function($){

$.fn.yourPluginName = function(){

// Ваш код здесь

return this;

};

})(jQuery);

12) Установите по умолчанию Глобальный AJAX

Запустив AJAX-запросы в вашем приложении, вам часто необходимо отображать какие-то признаки того, что запрос находится в действии. Это можно сделать путем отображения анимации загрузки. Управление этим индикатором в каждом отдельном вызове $.get или $.post может быстро стать утомительным.

Лучшим решением является создание глобального AJAX, используя один из методов jQuery.

$.ajaxSetup({

url : '/ajax/',

dataType : 'json'

});

$.ajaxStart(function(){

showIndicator();

disableButtons();

});

$.ajaxComplete(function(){

hideIndicator();

enableButtons();

});

// Дополнительные методы:

$.ajaxStop();

$.ajaxError();

$.ajaxSuccess();

$.ajaxSend();

Подробнее о функционировании AJAX в jQuery.

13) Используйте delay () для анимации

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

// Это не верно:

$('#elem').animate({width:200},function(){

setTimeout(function(){

$('#elem').animate({marginTop:100});

},2000);

});

// Так лучше:

$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

Чтобы оценить, сколько времени программирования сохранит animation(), представьте, если бы вам пришлось управлять всем этим самим: вам нужно будет установить тайм-ауты, анализировать значения, отслеживать выполнение анимации, отменять, в случае необходимости, и обновлять многочисленные переменные на каждом шагу.

Подробнее об анимации в jQuery.

14) Используйте данные атрибутов HTML5

Данные атрибутов HTML5 — простые средства для встраивания данных в веб-страницы. Это полезно для обмена данными между сервером и клиентской частью, и заменяет собой <script>-блоки или скрытую разметку.

В последнем обновлении для jQuery-метода data() HTML5 данные атрибутов берутся автоматически и доступны в виде записей, как вы можете видеть в примере ниже:

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"

data-options='{"name":"John"}'>

</div>

Для доступа к данным атрибутов этого div элемента, вы должны использовать код, который показан ниже:

$("#d1").data("role"); // "page"

$("#d1").data("lastValue"); // 43

$("#d1").data("hidden"); // true;

$("#d1").data("options").name; // "John";

Подробнее о data () в документации jQuery.

15) Local Storage и jQuery

Локальное хранение данных является устаревшим API для хранения информации на стороне клиента. Просто добавьте данные, как свойство глобального объекта localStorage:

1	localStorage.someData = "This is going to be saved across page refreshes and browser restarts";

Плохо то, что он не поддерживается в старых браузерах. Здесь вы можете использовать один из плагинов jQuery, которые обеспечивают различные варианты хранения данных для разных браузеров.

Пример использования jQuery плагина $.jStorage:

var value = $.jStorage.get("key");

if(!value){

value = load_data_from_server();

$.jStorage.set("key",value);

}

Выводы

Методы, представленные здесь, дадут вам преимущество в эффективном использовании библиотеки jQuery. Если вы хотите что-то добавить в этот список, или, если у Вас есть предложения, оставьте комментарии ниже.