Вы здесь

Web-разработка Пишем качественный код на jQuery

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

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

Когда вы будете готовы использовать jQuery, я настоятельно советую вам придерживаться нижеследующих принципов:

Кэшируйте выборку в переменных

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

  1. // плохо
  2. h = $('#element').height();
  3. $('#element').css('height',h-20);
  4.  
  5. // хорошо
  6. $element = $('#element');
  7. h = $element.height();
  8. $element.css('height',h-20);

Не используйте глобальные переменные

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

  1. // плохо
  2. $element = $('#element');
  3. h = $element.height();
  4. $element.css('height',h-20);
  5.  
  6. // хорошо
  7. var $element = $('#element');
  8. var h = $element.height();
  9. $element.css('height',h-20);

Используйте венгерскую нотацию

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

  1. // плохо
  2. var first = $('#first');
  3. var second = $('#second');
  4. var value = $first.val();
  5.  
  6. // хорошо - перед объектами, которые управляются jQuery, мы ставим символ $
  7. var $first = $('#first');
  8. var $second = $('#second'),
  9. var value = $first.val();

Используйте цепочки переменных (паттерн одного ‘var’)

Вместо того чтобы писать директиву var для каждой объявляемой переменной, можно объединить несколько переменных в одну var-цепочку. Я советую ставить все переменные, не имеющие на текущий момент конкретного значения, в конец цепочки.

  1. var
  2. $first = $('#first'),
  3. $second = $('#second'),
  4. value = $first.val(),
  5. k = 3,
  6. cookiestring = 'SOMECOOKIESPLEASE',
  7. i,
  8. j,
  9. myArray = {};

Используйте ‘On’

Последние версии библиотеки jQuery привнесли изменения в функции типа click() — теперь это сокращение от on('click'). В более ранних версиях click() являлся сокращением от bind(). Начиная с версии jQuery 1.7 предпочтительный метод для привязки обработчиков событий — on(). Для единообразия гораздо проще использовать on() везде в подобных случаях.

  1. // плохо
  2. $first.click(function(){
  3. $first.css('border','1px solid red');
  4. $first.css('color','blue');
  5. });
  6.  
  7. $first.hover(function(){
  8. $first.css('border','1px solid red');
  9. })
  10.  
  11. // лучше
  12. $first.on('click',function(){
  13. $first.css('border','1px solid red');
  14. $first.css('color','blue');
  15. })
  16.  
  17. $first.on('hover',function(){
  18. $first.css('border','1px solid red');
  19. })

Концентрированный JavaScript

В общем, там, где есть для этого возможность, лучше совмещать несколько функций в одну.

  1. // плохо
  2. $first.click(function(){
  3. $first.css('border','1px solid red');
  4. $first.css('color','blue');
  5. });
  6.  
  7. // лучше
  8. $first.on('click',function(){
  9. $first.css({
  10. 'border':'1px solid red',
  11. 'color':'blue'
  12. });
  13. });

Используйте цепочки

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

  1. // плохо
  2. $second.html(value);
  3. $second.on('click',function(){
  4. alert('hello everybody');
  5. });
  6. $second.fadeIn('slow');
  7. $second.animate({height:'120px'},500);
  8.  
  9. // лучше
  10. $second.html(value);
  11. $second.on('click',function(){
  12. alert('hello everybody');
  13. }).fadeIn('slow').animate({height:'120px'},500);

Оставляйте код читаемым

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

  1. // плохо
  2. $second.html(value);
  3. $second.on('click',function(){
  4. alert('всем привет');
  5. }).fadeIn('slow').animate({height:'120px'},500);
  6.  
  7. // лучше
  8. $second.html(value);
  9. $second
  10. .on('click',function(){ alert('всем привет');})
  11. .fadeIn('slow')
  12. .animate({height:'120px'},500);

Используйте сокращенные вычисления для логических выражений

Сокращенное вычисление означает, что выражения оцениваются слева направо с использованием операторов && (логическое и) и || (логическое или).

  1. // плохо
  2. function initVar($myVar) {
  3. if(!$myVar) {
  4. $myVar = $('#selector');
  5. }
  6. }
  7.  
  8. // лучше
  9. function initVar($myVar) {
  10. $myVar = $myVar || $('#selector');
  11. }

Сокращайте!

Один из способов сделать код более компактным — воспользоваться сокращениями.

  1. // плохо
  2. if(collection.length > 0){..}
  3.  
  4. // лучше
  5. if(collection.length){..}

Отделяйте элементы, когда нужно провести с ними ресурсоёмкие операции

Если вы собираетесь провести ряд ресурсоёмких операций над элементом DOM, рекомендуется отделить его от документа, а потом добавить снова.

  1. // плохо
  2. var
  3. $container = $("#container"),
  4. $containerLi = $("#container li"),
  5. $element = null;
  6.  
  7. $element = $containerLi.first();
  8. //... много сложных манипуляций
  9.  
  10. // лучше
  11. var
  12. $container = $("#container"),
  13. $containerLi = $container.find("li"),
  14. $element = null;
  15.  
  16. $element = $containerLi.first().detach();
  17. //... много сложных манипуляций
  18.  
  19. $container.append($element);

Знайте особенности

Если вы используете jQuery-методы, с которыми у вас не так много опыта работы, не поленитесь предварительно прочесть документацию: вполне возможно, для вашей задачи есть заранее продуманный или более оптимальный вариант решения.

  1. // плохо
  2. $('#id').data(key,value);
  3.  
  4. // лучше (быстрее)
  5. $.data('#id',key,value);

Кэшируйте родительские элементы для подзапросов

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

  1. // плохо
  2. var
  3. $container = $('#container'),
  4. $containerLi = $('#container li'),
  5. $containerLiSpan = $('#container li span');
  6.  
  7. // лучше (и быстрее)
  8. var
  9. $container = $('#container '),
  10. $containerLi = $container.find('li'),
  11. $containerLiSpan= $containerLi.find('span');

Не используйте универсальный селектор

Универсальный селектор в совокупности с другими селекторами — это очень медленная выборка.

  1. // плохо
  2. $('.container > *');
  3.  
  4. // лучше
  5. $('.container').children();

Вместо подразумеваемого универсального селектора, пишите конкретные селекторы

Если вы не указываете никакого селектора, по умолчанию подставляется универсальный селектор (*).

  1. // плохо
  2. $('.someclass :radio');
  3.  
  4. // лучше
  5. $('.someclass input:radio');

Оптимизируйте селекторы

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

  1. // плохо
  2. $('div#myid');
  3. $('div#footer a.myLink');
  4.  
  5. // лучше
  6. $('#myid');
  7. $('#footer .myLink');

Не используйте в запросе путь из нескольких id

Еще раз повторюсь, если вы используете id правильно, то одного id вполне достаточно, и дополнительная специфичность в запросе из нескольких вложенных id селекторов не требуется.

  1. // плохо
  2. $('#outer #inner');
  3.  
  4. // лучше
  5. $('#inner');

Старайтесь использовать последнюю версию библиотеки

Чаще всего новая версия является лучшей по сравнению с предыдущей. Обычно она легче или, например, быстрее. Однако не стоит забывать об обратной совместимости и поддержки кода. Например, версия библиотеки jQuery 2.0 не поддерживает версии браузера Internet Explorer 6, 7 и 8.

Не используйте устаревшие методы

Всегда смотрите на список устаревших методов в каждой новой версии и старайтесь их не использовать в вашем коде.

  1. // плохо - метод live является устаревшим
  2. $('#stuff').live('click', function() {
  3. console.log('ура!');
  4. });
  5.  
  6. // лучше
  7. $('#stuff').on('click', function() {
  8. console.log('ура!');
  9. });

Загружайте jQuery с CDN

Наиболее быстрый способ передать пользователю скрипт с ближайшего к нему сервера — использовать технологию CDN от Google. Чтобы использовать CDN Google, используйте в коде следующий адрес: <a href="http://code.jquery.com/jquery-latest.min.js">http://code.jquery.com/jquery-latest.min.js[/geshifilter-code]

Старайтесь совмещать jQuery и нативный JavaScript

Как я говорил выше, jQuery — это не что иное, как JavaScript, а, значит, на jQuery мы всего лишь делаем те же самые вещи, которые могли бы делать и на встроенном в браузер JavaScript. Конечно же, когда вы пишете на нативном («ванильном») JavaScript, это зачастую приводит к длинным файлам снечитаемым кодом, который сложно поддерживать. Однако, это также означает и то, что ваш код будет исполняться быстрее. Помните, что нет такого js-фреймворка, который был бы легче в исполнении для браузера, чем операции на нативном JavaScript.

jq

(Кликните на картинку и проверьте)

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

Похожие материалы

Комментарии

Добавить комментарий

CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
CAPTCHA на основе изображений
Введите код с картинки