0
JavaScript/jQueryInterlabs18 декабря 20121 / 36
Стиль кодирования• JavaScript — язык с ужасным синтаксисом• стиль кодирования важен• иногда критически: ошибки, интеграция...
Стиль кодирования: проблемы• различные стили именования функций и переменных:fnCheckCardsForm() mapDivisTouchDevice(); is_...
Стиль кодирования: проблемы• фигурная скобка на следующей строке, чреватопроблемами с автоподстановкой ;for (prop in locs)...
Стиль кодирования: модулиdefine([ // весь код в виде AMD-модулей"dep1", // зависимости модуля"dep2" // если мало — можно в...
Стиль кодирования: функцииИмена функций и переменных — camelCase со строчной буквы,никакой венгерской нотации, исключение ...
Стиль кодирования — управлениеif (length > 0) { // пробел перед скобкой, но не послеupdate(); // если в if единственное де...
Самая Главная ПроблемаCopy Paste Copy Paste CopyPaste Copy Paste Copy PasteCopy Paste Copy Paste CopyPaste Copy Paste Copy...
jQuery• самая популярная JavaScript-библиотека• постоянно развивается:1.0 26.08.2006 → ... → 1.6 03.05.2011 → 1.7 03.11.20...
Селекторы$(‘#jquery’);• один из основных инструментов jQuery• разные селекторы — один и тот же результат• разница в скорос...
Некешируемые селекторы: плохоif ($(’.app-foot-description’).length) {$(’.app-foot-description’).click(function() {$(’.app-...
СелекторыCамые быстрые — getElementById():$(’#Element, form, input’)Достаточно быстрые, если есть getElementsByClassName()...
Селекторы: контекстКонтекст: DOM Element или Document или jQuery, не строка!// Эквивалентная запись поиска в контексте$(’:...
Селекторы: chaining• большинство методов jQuery возвращают объект jQuery• не нужны отдельные вызовы даже для кешированного...
События: проблемы• bind(), click(), live() ...• return false• лишние врапперы‘on(’click’, function() { myHandler(); })‘• п...
jQuery on()/off()Единый рекомендуемый API для работы с событиями в позднихверсиях:// единичный обработчик$(’#button’).on(’...
Делегирование событийПовторная привязка событий после изменения DOM:• усложняет логику, требует запуск дополнительного код...
jQuery: return false• e.preventDefault() — останавливает обработка поумолчанию• e.stopPropagation() — останавливает переда...
jQuery.Deferred• представление (асинхронного) действия как объекта• состояния: из pending в resolved или rejected• для каж...
jQuery.Deferred: примерfunction countDown(time){var timer = $.Deferred();setTimeout(function() { timer.resolve(); }, time)...
jQuery.Deferred: APIОбработка завершения:done() успешноеfail() неуспешноеthen() любоеСоздание:$.Deferred конструкторpromis...
jQuery.when()function getData() {return $.get(’/data/’).success(function() { console.log(’ajax done’); }}function showDiv(...
jQuery.Deferred: итогоМожно получить более читаемый и легко сопровождаемый код.В нашем случае наиболее наиболее возможное ...
AJAX: избыточно и неудобно$.ajax({url: "script.htm",data: Object2Parameters({ action: ’form’ }),dataType: ’json’,success: ...
AJAX: рекомендации• используем имя метода для указания типа запроса• не используем dataType — правильный Content-Typeдолже...
AJAX: примерvar update = $.post(’/update/’, { id: 1, name: "name" });update.done(function (response) {...});update.then(fu...
DOM: главная проблемаОчень сложная разметка,стили в JavaScript
DOM: главная проблема• не используем CSS-стили в JavaScript• не отрабатываем responsive через JavaScript• не кодируем данн...
DOM: проблемы• разметка смешана с кодом, сложно поддерживать• ресурсоемкое создание элементов:$(’body’).prepend($(’<div>’)...
Работа с DOMДобавление новых узлов в документ — дорого!• используем строки, добавляем единственным append()• стараемся не ...
Циклы: проблемаЦиклы, где достаточно селекторов: громоздко, частомедленнее:$(’.app-s-showcase’).each(function() {if (!$(th...
Циклы• стараемся избегать• желательно обходиться селекторами• иногда циклы действительно нужны$(’.app-s-showcase:not(:visi...
Валидация форм: проблема• много кода с большим количеством повторений• много избыточных вызовов jQuery• обработка ошибок в...
Валидация формПрограммам минимум:• применяем jQuery к форме, потом find()• однотипный код реализуем в виде цикла по объект...
Прочее• если нужны данные — храним в data(), а не парсимкаждый раз разметку• иногда можно отказаться от избыточного $():$(...
Ссылки• jQuery proven performance tips tricks3• Your jQuery: Now With 67% Less Suck4• Popular performance test cases5• jQu...
Upcoming SlideShare
Loading in...5
×

Эффективный jQuery

1,111

Published on

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

Рассмотренные вопросы: рекомендации по стилю кодирования, эффективное использование селекторов, современный API для работы с событиями, делегирование событий, концепция deferreds, рекомендации по работе с AJAX и DOM.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,111
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Эффективный jQuery"

  1. 1. JavaScript/jQueryInterlabs18 декабря 20121 / 36
  2. 2. Стиль кодирования• JavaScript — язык с ужасным синтаксисом• стиль кодирования важен• иногда критически: ошибки, интеграция с внешнимиинструментами• единый стиль не выработался, много разных стандартов• важно писать единообразно хотя бы в рамках проекта• наиболее практичный стандарт:Google JavaScript Style Guidehttp://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml2 / 36
  3. 3. Стиль кодирования: проблемы• различные стили именования функций и переменных:fnCheckCardsForm() mapDivisTouchDevice(); is_okDoOrderAdd();• пробелы невпопад и if в одну строку:if( num > 10 ) doAction( num );• повторные var:var field = $(’form[name=order] input[name=name]’);...var field = $(’form[name=order] input[name=email]’);• var внутри блока.
  4. 4. Стиль кодирования: проблемы• фигурная скобка на следующей строке, чреватопроблемами с автоподстановкой ;for (prop in locs) function setMarkers(locs){ {• пустые анонимные функции:on(’click’, function() { myHandler(); })• избыточные переменные:var check = (item > 0);$(’#form’).attr({ disabled: check; });• выполняемый код в виде строкиsetTimeout("$(’.title-link:first’).click();", 100);
  5. 5. Стиль кодирования: модулиdefine([ // весь код в виде AMD-модулей"dep1", // зависимости модуля"dep2" // если мало — можно в одну строку], function (dep1, // аргументы аналогично зависимостямdep2) {"use strict"; // строгий режимvar num = 0 // var всегда в начале функции$form, // неинициализированные переменныеi; // в конце спискаfunction send(mode) { // внутренняя функция...}});5 / 36
  6. 6. Стиль кодирования: функцииИмена функций и переменных — camelCase со строчной буквы,никакой венгерской нотации, исключение только для $(function () { // анонимные функции — пробел перед ()// именованные функции - нет пробела перед () и внутри,function countFields(name, where) {var count, // имена переменных — camelCase$form; // jquery-переменые — с $return count; // пустая строка перед return}})(); // замыкание через анонимные функции// в скобках6 / 36
  7. 7. Стиль кодирования — управлениеif (length > 0) { // пробел перед скобкой, но не послеupdate(); // если в if единственное действие} // все равно заключаем в скобкиswitch (value) {case "val1": // используем отступы...break;// смысловые группы разделяем пробеламиcase "val2":...break;}7 / 36
  8. 8. Самая Главная ПроблемаCopy Paste Copy Paste CopyPaste Copy Paste Copy PasteCopy Paste Copy Paste CopyPaste Copy Paste Copy PasteCopy Paste Copy Paste CopyPaste Copy Paste Copy PasteCopy Paste Copy Paste CopyPaste Copy Paste Copy Paste
  9. 9. jQuery• самая популярная JavaScript-библиотека• постоянно развивается:1.0 26.08.2006 → ... → 1.6 03.05.2011 → 1.7 03.11.2011 → 1.8 09.08.2012• каждая новая версия, в большинстве случаев,производительнее и удобнее предыдущей• переход обычно не создает проблемЛучше пользоваться свежей версией.9 / 36
  10. 10. Селекторы$(‘#jquery’);• один из основных инструментов jQuery• разные селекторы — один и тот же результат• разница в скорости может быть очень существенной• крайне желательно выбирать оптимальный• самый быстрый поиск — это отсутствие поискаЭффективное использование селекторов важно!10 / 36
  11. 11. Некешируемые селекторы: плохоif ($(’.app-foot-description’).length) {$(’.app-foot-description’).click(function() {$(’.app-foot-description’).addClass(’.app-foot-description-active’);});}Селектор используется больше одного раза —надо кешировать.
  12. 12. СелекторыCамые быстрые — getElementById():$(’#Element, form, input’)Достаточно быстрые, если есть getElementsByClassName():$(’.classname’)Медленные, полный просмотр:$("[attribute=value]"); $(":hidden");Селекторы обрабатываются справа налево. Для начинающихсяс #id — встроенная оптимизация.12 / 36
  13. 13. Селекторы: контекстКонтекст: DOM Element или Document или jQuery, не строка!// Эквивалентная запись поиска в контексте$(’:hidden’, $(’#list’))$(’#list’).find(’:hidden’); // самый быстрый вариант// Поиск только внутри элемента с обработчиком$(’div.foo’).on(’click’, function() {$(’span’, this).addClass(’bar’);});find() рекурсивный, может быть выгоднее children() и т.д.http://jsperf.com/jquery-selectors-context/213 / 36
  14. 14. Селекторы: chaining• большинство методов jQuery возвращают объект jQuery• не нужны отдельные вызовы даже для кешированногоjQuery• работает быстрее чем кешированная версия и легчечитается$(’ul.first’).find(’.foo’).css(’background-color’, ’red’).end().find(’.bar’).css(’background-color’, ’green’).end();http://jsperf.com/jquery-chaining/14 / 36
  15. 15. События: проблемы• bind(), click(), live() ...• return false• лишние врапперы‘on(’click’, function() { myHandler(); })‘• перепривязка событий и избыточное количecтвообработчиков‘$(’.js-class’).unbind(’click’).bind(’click’, function() { ... });
  16. 16. jQuery on()/off()Единый рекомендуемый API для работы с событиями в позднихверсиях:// единичный обработчик$(’#button’).on(’click’, function(e) {...});// делегирование обработки$(’#toolbar’).on(’click’, ’a’, function(e) {...});$(’#toolbar’).on(’click’, ’a’, { key: "value" }, function(e) {console.debug(e.data.key);});16 / 36
  17. 17. Делегирование событийПовторная привязка событий после изменения DOM:• усложняет логику, требует запуск дополнительного кодапосле изменения• создает избыточное количество обработчиковПравильно — делегирование:• использует event bubbling;• позволяет установить один обработчик событий, а не сто• работает с элементами DOM, которые появились позжеустановки обработчика$(’#container’).on(’click’, ’.element’), function(e) {...}17 / 36
  18. 18. jQuery: return false• e.preventDefault() — останавливает обработка поумолчанию• e.stopPropagation() — останавливает передачуродительским элементам• e.stopImmediatePropagation() — прекращаетвыполнение всех обработчиков для этого элементаreturn false = e.preventDefault() + e.stopPropagation()Рекомендуется не использовать return false, а использоватьсоответствующие методы.18 / 36
  19. 19. jQuery.Deferred• представление (асинхронного) действия как объекта• состояния: из pending в resolved или rejected• для каждого финального состояния можно указать наборобработчиков• в финальное состояние завершения можно перейти толькоодин раз• если объект уже перешел в финальное состояние,добавляемые обработчики выполняются сразу же• AJAX-вызовы возвращают deferredpromise = read-only deferred19 / 36
  20. 20. jQuery.Deferred: примерfunction countDown(time){var timer = $.Deferred();setTimeout(function() { timer.resolve(); }, time);return timer.promise();}var test = countdown(5000);test.done(function() { console.debug(’Time is up!’); });test.done(function() { console.debug(’Bang!’); });20 / 36
  21. 21. jQuery.Deferred: APIОбработка завершения:done() успешноеfail() неуспешноеthen() любоеСоздание:$.Deferred конструкторpromise() read-only объектЗавершение:resolve() завешениеreject() неуспешноеПрогресс:notify() уведомлениеprogress() обработкаКомбинирование:$.when() комбинирование с синхронизацией21 / 36
  22. 22. jQuery.when()function getData() {return $.get(’/data/’).success(function() { console.log(’ajax done’); }}function showDiv() {return $.Deferred(function(d) {$(’#block’).fadeIn(1000, d.resolve);}).promise();}$.when(getData(), showDiv()).then(function(ajaxResult) {console.log(’all done’);});22 / 36
  23. 23. jQuery.Deferred: итогоМожно получить более читаемый и легко сопровождаемый код.В нашем случае наиболее наиболее возможное применение:• синхронизация параллельной анимации• синхронизация AJAX-вызовов между собой и другимиоперациями23 / 36
  24. 24. AJAX: избыточно и неудобно$.ajax({url: "script.htm",data: Object2Parameters({ action: ’form’ }),dataType: ’json’,success: function (res) {...}});
  25. 25. AJAX: рекомендации• используем имя метода для указания типа запроса• не используем dataType — правильный Content-Typeдолжен формироваться на стороне сервера• не используем собственных функций формированиястроки данных• используем deferreds, соответственно, .done(), .fail(),.then()• определение запроса и добавление обработчиков можноразделить• легко синхронизировать запросы и анимацию25 / 36
  26. 26. AJAX: примерvar update = $.post(’/update/’, { id: 1, name: "name" });update.done(function (response) {...});update.then(function (response) {// done},function (response) {// fail});26 / 36
  27. 27. DOM: главная проблемаОчень сложная разметка,стили в JavaScript
  28. 28. DOM: главная проблема• не используем CSS-стили в JavaScript• не отрабатываем responsive через JavaScript• не кодируем данные в классах (есть data() !)• всегда используем классы• чем проще разметка, тем проще по нейнавигацияОчень важно: минимизируем CSS,минимизируем верстку, иначе проблемынеизбежны.28 / 36
  29. 29. DOM: проблемы• разметка смешана с кодом, сложно поддерживать• ресурсоемкое создание элементов:$(’body’).prepend($(’<div>’).addClass(’app-loading-wrapper’).prepend($(’<div>’).addClass(’app-loading-picture’));$(’<div>’).addClass(’app-button-red app-club-button-add’).prepend($(’<input type="button">’).attr({value: ’Проверить’ }));
  30. 30. Работа с DOMДобавление новых узлов в документ — дорого!• используем строки, добавляем единственным append()• стараемся не плодить лишние $()• сводим количество append(), ... к минимуму• в сложных случаях можно использовать detach()var $form = $(’#form’),$parent = $form.parent();$form.detach();inputs.each(function() { $form.append(this); });$parent.append($form);30 / 36
  31. 31. Циклы: проблемаЦиклы, где достаточно селекторов: громоздко, частомедленнее:$(’.app-s-showcase’).each(function() {if (!$(this).is(’:visible’)) {$(this).addClass(’app-s-showcase--active’);}}
  32. 32. Циклы• стараемся избегать• желательно обходиться селекторами• иногда циклы действительно нужны$(’.app-s-showcase:not(:visible)’).addClass(’app-s-showcase--active’);32 / 36
  33. 33. Валидация форм: проблема• много кода с большим количеством повторений• много избыточных вызовов jQuery• обработка ошибок в виде alert()function checkForm(f) {var field;field = $(’#form input[name=fio]’);if (!field.val().match(/.+/)) {...}field = $(’#form input[name=address]’);if (!field.val().match(/.+/)) {...}}
  34. 34. Валидация формПрограммам минимум:• применяем jQuery к форме, потом find()• однотипный код реализуем в виде цикла по объектуконфигурацииПредпочтительнее — использовать jQuery plugin:• Validation1: самый распространенный• TinyValidation2: можно конфигурировать с помощьюdata-атрибутов.1http://docs.jquery.com/Plugins/Validation]2https://github.com/nicholasbs/jquery-tiny-validation34 / 36
  35. 35. Прочее• если нужны данные — храним в data(), а не парсимкаждый раз разметку• иногда можно отказаться от избыточного $():$(this).attr(’id’) this.id• $.data(’#elem’, key, value) быстрее чем$(’#elem’).data(key, value) для одного узла• вообще у многих методов вида $.fn.method() естьаналоги $.method() для единственного узла35 / 36
  36. 36. Ссылки• jQuery proven performance tips tricks3• Your jQuery: Now With 67% Less Suck4• Popular performance test cases5• jQuery Anti-Patterns for Performance & Compression63http://www.slideshare.net/AddyOsmani/jquery-proven-performance-tips-tricks4http://24ways.org/2011/your-jquery-now-with-less-suck/5http://jsperf.com/popular6http://www.slideshare.net/paul.irish/perfcompression36 / 36
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×