strokoff 29 Июля 2014 в 7:52

Используем jQuery с умом, приемы использования

Сегодня я хочу поделиться с вами набором «хороших практик» и подходов использования jQuery, а также просто советы по оптимизации работы с библиотекой jQuery

Загрузка jQuery

1. Всегда используйте CDN при подключении jQuery библиотек. Данная опция позволяет с большой вероятностью подгружать jQuery уже из кеш памяти браузера, самые популярные CDN в России для jQuery это у Яндекса и Googl’a

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
   <script>// <![CDATA[
   window.jQuery || document.write('<script src="js/jquery-1.11.1.min.js" type="text/javascript"><\/script>')
   // ]]>

2. Используйте запасной вариант загрузки jQuery с локального хоста при недоступности CDN, пример кода выше
3. Используйте вариативный протокол (http: или https:)
4. По возможности загружайте весь ваш javascript код и jQuery в конце HTML документа, чтобы ускорить подачу страницы пользователю.
5. Какую версию использовать?
   1. Не используйте jQuery 2.x если вам необходимо поддерживать Internte Explorer 6/7/8
   2. Для новых веб-приложений, если вы не ограничены какими-либо плагинами для библиотеки, используйте библиотеку последней версии.
   3. Когда используется подгрузка библиотеки из CDN всегда указывайте необходимую версию скрипта, которую вы хотите получить  (прим.: 1.11.0 загрузит версию 1.11 или просто 1).
   4. Не загружайте несколько версий jQuery сразу
6. Если вы одновременно используете другие библиотеки типа Prototype и Motools, могут возникнуть конфликты в области видимости переменной $ , чтобы предотвратить конфликт переменных и вернуть управление другим библиотекам. Используйте jQuery метод $.noConflict().
7. Для дополнительной поддержки определения браузера используйте библиотеку Modernizr

jQuery переменные

1. Для удобства все переменные используемые вами следует вынести в кеш память используйте префикс $
2. Для дальнейшего удобства, объявляйте jQuery объекты один раз.

   var $mydiv = $("#myDiv");
   $mydiv.click(function(){....});
   

3. Хорошим тоном будет придерживаться правила Camel Case при определении имени переменных. КаждоеНовоеСловоСБольшойБуквы.

Селекторы

1. По возможности используйте ID для выбора элементов, этот селектор обрабатывается быстрее за счет использования document.getElementById(). Кстати в jQuery можно написать и так $(document.getElementById(‘elementId’)) при таком варианте, не тратится время на парсинг названия, но это уже макро оптимизация.
2. При выборке по классу, не указывайте вид элемента в вашем селекторе. Сравнение результатов.

   var $products = $("div.products"); // медленно
   var $products = $(".products"); // быстро
   

3. Используйте для поиска метод .find() по примеру Id->child. Данный метод работает быстрее т.к. минует повторную выборку элемента. Подробнее.

   // Плохо, используется вложенный запрос
   var $productIds = $("#products div.id");
   // Хорошо, #products уже выбрано с помощью document.getElementById() теперь выборка будет происходить в рамках одного объекта
   var $productIds = $("#products").find("div.id");
   

4. Будьте конкретны в правой части селектора и менее конкретны в левой.

   // Не оптимизировано
   $("div.data .gonzalez");
   // Оптимизировано
   $(".data td.gonzalez");
   

5. Избегайте излишней точности. Подробнее. Результаты тестов.

   $(".data table.attendees td.gonzalez");// Так будет лучше и быстрее
   $(".data td.gonzalez");
   

6. Придавайте селекторам контекст

   // Медленно, мы проходим по всему дереву DOM в поиске .class
   $('.class');
   // Быстрее, происходит поиск только в элементе class-container
   $('.class', '#class-container');
   

7. Избегайте универсальных селекторов. Подробнее.

   $('div.container > *'); // Медленно
   $('div.container').children(); // Быстрее
   

8. Избегайте подразумевания универсального селектора, когда вы используете к примеру выборку по :radio, универсальный селектор * все равно присутствует в контектсте

   $('div.someclass :radio'); // плохо
   $('div.someclass input:radio'); // хорошо
   

9. Избегайте выборки по нескольким ID, только для селектора по одному ID используется напрямую document.getElementById();

   $('#outer #inner'); // плохо
   $('div#inner'); // плохо
   $('.outer-container #inner'); // плохо
   $('#inner'); // Хорошо, используется только document.getElementById()
   

Манипуляции с DOM

1. Всегда отсоединяйте элемент с помощью метода .detach перед манипуляции с ним и возвращайте обратно в конце манипуляций

   var $myList = $("#list-container > ul").detach();
   //...что-нибудь делаем с $myList
   $myList.appendTo("#list-container");
   

2. Используйте конкатенацию строк или метод array.join перед .append(). Подробнее. Результаты тестов.

   // Плохо var $myList = $("#list"); for(var i = 0; i < 10000; i++){ $myList.append("<li>"+i+"</li>"); }
   
   // Хорошо var $myList = $("#list"); var list = ""; for(var i = 0; i < 10000; i++){ list += "<li>"+i+"</li>"; } $myList.html(list); 
   // Еще быстрее var array = []; for(var i = 0; i < 10000; i++){ array[i] = "<li>"+i+"</li>"; } $myList.html(array.join(''));

3. Не манипулируйте с отсутствующими объектами.

   // Плохо: вызывается три функции, прежде чем будет НЕ обнаружен элемент.
   $("#nosuchthing").slideUp();// Хорошо c проверкой
   var $mySelection = $("#nosuchthing");
   if ($mySelection.length) {
   $mySelection.slideUp();
   }
   

События

1. Используйте один обработчик события $(document).ready(), это позволит лучше и быстрее производить отладку кода.
2. Не используйте анонимные функции для событий. Это может плохо отразиться при отладке кода на jQuery. Подробнее.

   $("#myLink").on("click", function(){...}); // плохо// хорошо
   function myLinkClickHandler(){...}
   $("#myLink").on("click", myLinkClickHandler);
   

3. Не используйте анонимную функцию для события ready. Это ухудшает отладку и лишает возможности использовать функцию повторно.

   $(function(){ ... }); // Плохо, к этой функции еще раз мы не обратимся// Хорошо
   $(initPage); // или $(document).ready(initPage);
   function initPage(){
   // Делаем что угодно + можем это сделать повторно.
   }
   

4. Скрипт с обработкой события $(document).ready должен подгружаться после остальных скриптов. Стоит помнить, что обработка javascript идет строго последовательно и прерывается при ошибке.

   <script src="my-document-ready.js"></script>
   <script>
   // Следующим делом запустим наш скрипт
   $(document).ready(initPage); // или $(initPage);
   </script>
   

5. Избегайте инлайнового навешивания событий в коде. Используйте объявление событий отдельно.

   <a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- Плохо -->
   

6. Когда возможно, используйте дополнительное пространство имен для событий, для легкого делегирования и снятия событий.

   $("#myLink").on("click.mySpecialClick", myEventHandler); // Хорошо
   //Теперь мы можем легко отвязать событие при необходимости
   $("#myLink").unbind("click.mySpecialClick");
   

Ajax

1. Избегайте использования .getJson() или .get(), используйте $.ajax() для получения данных, их парсинг уже используется внутри метода.
2. Не используйте http запросы у сайтов с https протоколом.
3. Не используйте URL строку для передачи параметров. Указывайте все параметры в передаваемом объекте.

   // Плохо читаемо
   $.ajax({
   url: "something.php?param1=test1&param2=test2",
   ....
   });// Так читается лучше
   $.ajax({
   url: "something.php",
   data: { param1: test1, param2: test2 }
   });
   

4. Указывайте параметр dataType при отправке ajax запроса. Так вы будете знать, какой тип данных получите в ответ.
5. Используйте делегирование обработчиков событий для крепления событий к объектам и содержимому загруженному с помощью Ajax. Делегированные события имеют преимущество, что они выполняются в потомках элемента, загруженных после события document.ready

   $("#parent-container").on("click", "a", delegatedClickHandlerForAjax);
   

6. Используйте общий интерфейс для обработки событий

   $.ajax({ ... }).then(successHandler, failureHandler);// или
   var jqxhr = $.ajax({ ... });
   jqxhr.done(successHandler);
   jqxhr.fail(failureHandler);
   

7. Простой пример Ajax запроса

   var jqxhr = $.ajax({
   url: url,
   type: "GET", // по умолчанию GET, может быть POST
   cache: true, // по умолчанию true, если false для dataType 'script' и 'jsonp', установите как необходимо вам.
   data: {}, // объект с передаваемыми данными.
   dataType: "json", // тип данных получаемых в ответе
   jsonp: "callback", // используется только если ваше API поддерживает JSONP Requests
   statusCode: { // Специфичные обработчики событий на различные ответы сервера
   404: handler404,
   500: handler500
   }
   });
   jqxhr.done(successHandler);
   jqxhr.fail(failureHandler);
   

Эффекты и анимация

1. Не используйте чрезмерное применение эффектов, без необходимости. Это может вызывать визуальные эффекты торможения страницы.
2. Для скрытия и раскрытия используйте функции .slideUp() и .slideDown().
3. Для увеличения скорости анимаций используйте параметры fast и slow, а также значением в миллисекундах. Нормальная скорость анимации 400 мс.

Плагины

1. Постоянно проверяйте совместимость плагинов с текущей версией разработки. Своевременно обновляйте плагины до актуальных версий. Следите за обновлениями от разработчиков.
2. Заранее планируйте и проверяйте совместимость скриптов перед разработкой.
3. Используемый код по множеству раз оформляйте в отдельные jQuery плагины. Посмотреть шаблон пример кода для плагина jquery можно по ссылке.

Последовательность вызовов

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

1. Используйте цепочки вызовов для манипулирования объектами

   $("#myDiv").addClass("error").show();
   

2. Всякий раз, когда цепочка вызовов усложняется, используйте отступы и перенос строк, для более удобного чтения

   $("#myLink")
   .addClass("bold")
   .on("click", myClickHandler)
   .on("mouseover", myMouseOverHandler)
   .show();
   

3. Для длинных цепочек вызовов это приемлемо т.к.  промежуточный результат кешируется.

Еще немного советов…

1. Используйте объект для обращения к множеству параметров атрибутов

   $myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // Плохо, 3 вызова attr()
   // Хорошо, 1 вызов attr()
   $myLink.attr({
   href: "#",
   title: "my link",
   rel: "external"
   });
   

2. Не смешивайте CSS и jQuery

   $("#mydiv").css({'color':red, 'font-weight':'bold'}); // Плохо
   .error { color: red; font-weight: bold; } /* Хорошо */
   $("#mydiv").addClass("error"); // Хорошо
   

3. Не используйте устаревших методов. Постоянно читайте про релизы библиотеки. Здесь можно посмотреть список устаревших методов.
4. По возможности используйте нативный javascript в место jQuery, это даст больший прирост производительности.

   $("#myId"); // медленно - около 350 тыс. раз в сек.
   document.getElementById("myId"); // быстрее - около 12 млн. тыс. раз в сек.
   

По мотивам: lab.abhinayrathore.com

Последняя редакция 25 января, 2023 в 03:01