JavaScriptjQuery

Interlabs

18 декабря 2012

1 36

Стиль кодирования

bull JavaScript mdash язык с ужасным синтаксисомbull стиль кодирования важенbull иногда критически ошибки интеграция с внешнимиинструментами

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

Google JavaScript Style Guidehttpgoogle-styleguidegooglecodecomsvntrunkjavascriptguidexml

2 36

Стиль кодирования проблемы

bull различные стили именования функций и переменных

fnCheckCardsForm() mapDivisTouchDevice() is_okDoOrderAdd()

bull пробелы невпопад и if в одну строку

if( num gt 10 ) doAction( num )

bull повторные var

var field = $(rsquoform[name=order] input[name=name]rsquo)var field = $(rsquoform[name=order] input[name=email]rsquo)

bull var внутри блока

Стиль кодирования проблемы

bull фигурная скобка на следующей строке чреватопроблемами с автоподстановкой

for (prop in locs) function setMarkers(locs)

bull пустые анонимные функции

on(rsquoclickrsquo function() myHandler() )

bull избыточные переменные

var check = (item gt 0)$(rsquoformrsquo)attr( disabled check )

bull выполняемый код в виде строки

setTimeout($(rsquotitle-linkfirstrsquo)click() 100)

Стиль кодирования модулиdefine([ весь код в виде AMD-модулейdep1 зависимости модуляdep2 если мало mdash можно в одну строку

] function (dep1 аргументы аналогично зависимостямdep2

) use strict строгий режим

var num = 0 var всегда в начале функции$form неинициализированные переменныеi в конце списка

function send(mode) внутренняя функция

)

5 36

Стиль кодирования функцииИмена функций и переменных mdash camelCase со строчной буквыникакой венгерской нотации исключение только для $

(function () анонимные функции mdash пробел перед ()

именованные функции - нет пробела перед () и внутриfunction countFields(name where)

var count имена переменных mdash camelCase$form jquery-переменые mdash с $

return count пустая строка перед return

)() замыкание через анонимные функции в скобках

6 36

Стиль кодирования mdash управление

if (length gt 0) пробел перед скобкой но не послеupdate() если в if единственное действие

все равно заключаем в скобки

switch (value) case val1 используем отступы

break

смысловые группы разделяем пробеламиcase val2

break

7 36

Самая Главная Проблема

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

jQuery

bull самая популярная JavaScript-библиотекаbull постоянно развивается

10 26082006rarr rarr 16 03052011rarr 17 03112011rarr 18 09082012

bull каждая новая версия в большинстве случаевпроизводительнее и удобнее предыдущей

bull переход обычно не создает проблем

Лучше пользоваться свежей версией

9 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Стиль кодирования

bull JavaScript mdash язык с ужасным синтаксисомbull стиль кодирования важенbull иногда критически ошибки интеграция с внешнимиинструментами

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

Google JavaScript Style Guidehttpgoogle-styleguidegooglecodecomsvntrunkjavascriptguidexml

2 36

Стиль кодирования проблемы

bull различные стили именования функций и переменных

fnCheckCardsForm() mapDivisTouchDevice() is_okDoOrderAdd()

bull пробелы невпопад и if в одну строку

if( num gt 10 ) doAction( num )

bull повторные var

var field = $(rsquoform[name=order] input[name=name]rsquo)var field = $(rsquoform[name=order] input[name=email]rsquo)

bull var внутри блока

Стиль кодирования проблемы

bull фигурная скобка на следующей строке чреватопроблемами с автоподстановкой

for (prop in locs) function setMarkers(locs)

bull пустые анонимные функции

on(rsquoclickrsquo function() myHandler() )

bull избыточные переменные

var check = (item gt 0)$(rsquoformrsquo)attr( disabled check )

bull выполняемый код в виде строки

setTimeout($(rsquotitle-linkfirstrsquo)click() 100)

Стиль кодирования модулиdefine([ весь код в виде AMD-модулейdep1 зависимости модуляdep2 если мало mdash можно в одну строку

] function (dep1 аргументы аналогично зависимостямdep2

) use strict строгий режим

var num = 0 var всегда в начале функции$form неинициализированные переменныеi в конце списка

function send(mode) внутренняя функция

)

5 36

Стиль кодирования функцииИмена функций и переменных mdash camelCase со строчной буквыникакой венгерской нотации исключение только для $

(function () анонимные функции mdash пробел перед ()

именованные функции - нет пробела перед () и внутриfunction countFields(name where)

var count имена переменных mdash camelCase$form jquery-переменые mdash с $

return count пустая строка перед return

)() замыкание через анонимные функции в скобках

6 36

Стиль кодирования mdash управление

if (length gt 0) пробел перед скобкой но не послеupdate() если в if единственное действие

все равно заключаем в скобки

switch (value) case val1 используем отступы

break

смысловые группы разделяем пробеламиcase val2

break

7 36

Самая Главная Проблема

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

jQuery

bull самая популярная JavaScript-библиотекаbull постоянно развивается

10 26082006rarr rarr 16 03052011rarr 17 03112011rarr 18 09082012

bull каждая новая версия в большинстве случаевпроизводительнее и удобнее предыдущей

bull переход обычно не создает проблем

Лучше пользоваться свежей версией

9 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Стиль кодирования проблемы

bull различные стили именования функций и переменных

fnCheckCardsForm() mapDivisTouchDevice() is_okDoOrderAdd()

bull пробелы невпопад и if в одну строку

if( num gt 10 ) doAction( num )

bull повторные var

var field = $(rsquoform[name=order] input[name=name]rsquo)var field = $(rsquoform[name=order] input[name=email]rsquo)

bull var внутри блока

Стиль кодирования проблемы

bull фигурная скобка на следующей строке чреватопроблемами с автоподстановкой

for (prop in locs) function setMarkers(locs)

bull пустые анонимные функции

on(rsquoclickrsquo function() myHandler() )

bull избыточные переменные

var check = (item gt 0)$(rsquoformrsquo)attr( disabled check )

bull выполняемый код в виде строки

setTimeout($(rsquotitle-linkfirstrsquo)click() 100)

Стиль кодирования модулиdefine([ весь код в виде AMD-модулейdep1 зависимости модуляdep2 если мало mdash можно в одну строку

] function (dep1 аргументы аналогично зависимостямdep2

) use strict строгий режим

var num = 0 var всегда в начале функции$form неинициализированные переменныеi в конце списка

function send(mode) внутренняя функция

)

5 36

Стиль кодирования функцииИмена функций и переменных mdash camelCase со строчной буквыникакой венгерской нотации исключение только для $

(function () анонимные функции mdash пробел перед ()

именованные функции - нет пробела перед () и внутриfunction countFields(name where)

var count имена переменных mdash camelCase$form jquery-переменые mdash с $

return count пустая строка перед return

)() замыкание через анонимные функции в скобках

6 36

Стиль кодирования mdash управление

if (length gt 0) пробел перед скобкой но не послеupdate() если в if единственное действие

все равно заключаем в скобки

switch (value) case val1 используем отступы

break

смысловые группы разделяем пробеламиcase val2

break

7 36

Самая Главная Проблема

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

jQuery

bull самая популярная JavaScript-библиотекаbull постоянно развивается

10 26082006rarr rarr 16 03052011rarr 17 03112011rarr 18 09082012

bull каждая новая версия в большинстве случаевпроизводительнее и удобнее предыдущей

bull переход обычно не создает проблем

Лучше пользоваться свежей версией

9 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Стиль кодирования проблемы

bull фигурная скобка на следующей строке чреватопроблемами с автоподстановкой

for (prop in locs) function setMarkers(locs)

bull пустые анонимные функции

on(rsquoclickrsquo function() myHandler() )

bull избыточные переменные

var check = (item gt 0)$(rsquoformrsquo)attr( disabled check )

bull выполняемый код в виде строки

setTimeout($(rsquotitle-linkfirstrsquo)click() 100)

Стиль кодирования модулиdefine([ весь код в виде AMD-модулейdep1 зависимости модуляdep2 если мало mdash можно в одну строку

] function (dep1 аргументы аналогично зависимостямdep2

) use strict строгий режим

var num = 0 var всегда в начале функции$form неинициализированные переменныеi в конце списка

function send(mode) внутренняя функция

)

5 36

Стиль кодирования функцииИмена функций и переменных mdash camelCase со строчной буквыникакой венгерской нотации исключение только для $

(function () анонимные функции mdash пробел перед ()

именованные функции - нет пробела перед () и внутриfunction countFields(name where)

var count имена переменных mdash camelCase$form jquery-переменые mdash с $

return count пустая строка перед return

)() замыкание через анонимные функции в скобках

6 36

Стиль кодирования mdash управление

if (length gt 0) пробел перед скобкой но не послеupdate() если в if единственное действие

все равно заключаем в скобки

switch (value) case val1 используем отступы

break

смысловые группы разделяем пробеламиcase val2

break

7 36

Самая Главная Проблема

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

jQuery

bull самая популярная JavaScript-библиотекаbull постоянно развивается

10 26082006rarr rarr 16 03052011rarr 17 03112011rarr 18 09082012

bull каждая новая версия в большинстве случаевпроизводительнее и удобнее предыдущей

bull переход обычно не создает проблем

Лучше пользоваться свежей версией

9 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Стиль кодирования модулиdefine([ весь код в виде AMD-модулейdep1 зависимости модуляdep2 если мало mdash можно в одну строку

] function (dep1 аргументы аналогично зависимостямdep2

) use strict строгий режим

var num = 0 var всегда в начале функции$form неинициализированные переменныеi в конце списка

function send(mode) внутренняя функция

)

5 36

Стиль кодирования функцииИмена функций и переменных mdash camelCase со строчной буквыникакой венгерской нотации исключение только для $

(function () анонимные функции mdash пробел перед ()

именованные функции - нет пробела перед () и внутриfunction countFields(name where)

var count имена переменных mdash camelCase$form jquery-переменые mdash с $

return count пустая строка перед return

)() замыкание через анонимные функции в скобках

6 36

Стиль кодирования mdash управление

if (length gt 0) пробел перед скобкой но не послеupdate() если в if единственное действие

все равно заключаем в скобки

switch (value) case val1 используем отступы

break

смысловые группы разделяем пробеламиcase val2

break

7 36

Самая Главная Проблема

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

jQuery

bull самая популярная JavaScript-библиотекаbull постоянно развивается

10 26082006rarr rarr 16 03052011rarr 17 03112011rarr 18 09082012

bull каждая новая версия в большинстве случаевпроизводительнее и удобнее предыдущей

bull переход обычно не создает проблем

Лучше пользоваться свежей версией

9 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Стиль кодирования функцииИмена функций и переменных mdash camelCase со строчной буквыникакой венгерской нотации исключение только для $

(function () анонимные функции mdash пробел перед ()

именованные функции - нет пробела перед () и внутриfunction countFields(name where)

var count имена переменных mdash camelCase$form jquery-переменые mdash с $

return count пустая строка перед return

)() замыкание через анонимные функции в скобках

6 36

Стиль кодирования mdash управление

if (length gt 0) пробел перед скобкой но не послеupdate() если в if единственное действие

все равно заключаем в скобки

switch (value) case val1 используем отступы

break

смысловые группы разделяем пробеламиcase val2

break

7 36

Самая Главная Проблема

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

jQuery

bull самая популярная JavaScript-библиотекаbull постоянно развивается

10 26082006rarr rarr 16 03052011rarr 17 03112011rarr 18 09082012

bull каждая новая версия в большинстве случаевпроизводительнее и удобнее предыдущей

bull переход обычно не создает проблем

Лучше пользоваться свежей версией

9 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Стиль кодирования mdash управление

if (length gt 0) пробел перед скобкой но не послеupdate() если в if единственное действие

все равно заключаем в скобки

switch (value) case val1 используем отступы

break

смысловые группы разделяем пробеламиcase val2

break

7 36

Самая Главная Проблема

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

jQuery

bull самая популярная JavaScript-библиотекаbull постоянно развивается

10 26082006rarr rarr 16 03052011rarr 17 03112011rarr 18 09082012

bull каждая новая версия в большинстве случаевпроизводительнее и удобнее предыдущей

bull переход обычно не создает проблем

Лучше пользоваться свежей версией

9 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Самая Главная Проблема

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

jQuery

bull самая популярная JavaScript-библиотекаbull постоянно развивается

10 26082006rarr rarr 16 03052011rarr 17 03112011rarr 18 09082012

bull каждая новая версия в большинстве случаевпроизводительнее и удобнее предыдущей

bull переход обычно не создает проблем

Лучше пользоваться свежей версией

9 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

jQuery

bull самая популярная JavaScript-библиотекаbull постоянно развивается

10 26082006rarr rarr 16 03052011rarr 17 03112011rarr 18 09082012

bull каждая новая версия в большинстве случаевпроизводительнее и удобнее предыдущей

bull переход обычно не создает проблем

Лучше пользоваться свежей версией

9 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Селекторы

$(lsquojqueryrsquo)

bull один из основных инструментов jQuerybull разные селекторы mdash один и тот же результатbull разница в скорости может быть очень существеннойbull крайне желательно выбирать оптимальныйbull самый быстрый поиск mdash это отсутствие поиска

Эффективное использование селекторов важно

10 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Некешируемые селекторы плохо

if ($(rsquoapp-foot-descriptionrsquo)length) $(rsquoapp-foot-descriptionrsquo)click(function()

$(rsquoapp-foot-descriptionrsquo)addClass(rsquoapp-foot-description-activersquo)

)

Селектор используется больше одного раза mdashнадо кешировать

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Селекторы

Cамые быстрые mdash getElementById()

$(rsquoElement form inputrsquo)

Достаточно быстрые если есть getElementsByClassName()

$(rsquoclassnamersquo)

Медленные полный просмотр

$([attribute=value]) $(hidden)

Селекторы обрабатываются справа налево Для начинающихсяс id mdash встроенная оптимизация

12 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Селекторы контекстКонтекст DOM Element или Document или jQuery не строка

Эквивалентная запись поиска в контексте$(rsquohiddenrsquo $(rsquolistrsquo))$(rsquolistrsquo)find(rsquohiddenrsquo) самый быстрый вариант

Поиск только внутри элемента с обработчиком$(rsquodivfoorsquo)on(rsquoclickrsquo function()

$(rsquospanrsquo this)addClass(rsquobarrsquo))

find() рекурсивный может быть выгоднее children() и тд

httpjsperfcomjquery-selectors-context213 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Селекторы chainingbull большинство методов jQuery возвращают объект jQuerybull не нужны отдельные вызовы даже для кешированногоjQuery

bull работает быстрее чем кешированная версия и легчечитается

$(rsquoulfirstrsquo)find(rsquofoorsquo)css(rsquobackground-colorrsquo rsquoredrsquo)

end()find(rsquobarrsquo)css(rsquobackground-colorrsquo rsquogreenrsquo)

end()

httpjsperfcomjquery-chaining

14 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

События проблемы

bull bind() click() live() bull return falsebull лишние врапперы

lsquoon(rsquoclickrsquo function() myHandler() )lsquo

bull перепривязка событий и избыточное количecтвообработчиков

lsquo$(rsquojs-classrsquo)unbind(rsquoclickrsquo)bind(rsquoclickrsquo function() )

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

jQuery on()off()Единый рекомендуемый API для работы с событиями в позднихверсиях

единичный обработчик$(rsquobuttonrsquo)on(rsquoclickrsquo function(e)

)

делегирование обработки$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo function(e)

)

$(rsquotoolbarrsquo)on(rsquoclickrsquo rsquoarsquo key value function(e) consoledebug(edatakey)

)16 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Делегирование событийПовторная привязка событий после изменения DOM

bull усложняет логику требует запуск дополнительного кодапосле изменения

bull создает избыточное количество обработчиков

Правильно mdash делегирование

bull использует event bubblingbull позволяет установить один обработчик событий а не стоbull работает с элементами DOM которые появились позжеустановки обработчика

$(rsquocontainerrsquo)on(rsquoclickrsquo rsquoelementrsquo) function(e)

17 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

jQuery return false

bull epreventDefault() mdash останавливает обработка поумолчанию

bull estopPropagation() mdash останавливает передачуродительским элементам

bull estopImmediatePropagation() mdash прекращаетвыполнение всех обработчиков для этого элемента

return false = epreventDefault() + estopPropagation()

Рекомендуется не использовать return false а использоватьсоответствующие методы

18 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

jQueryDeferred

bull представление (асинхронного) действия как объектаbull состояния из pending в resolved или rejectedbull для каждого финального состояния можно указать наборобработчиков

bull в финальное состояние завершения можно перейти толькоодин раз

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

bull AJAX-вызовы возвращают deferred

promise = read-only deferred

19 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

jQueryDeferred пример

function countDown(time)

var timer = $Deferred()setTimeout(function() timerresolve() time)return timerpromise()

var test = countdown(5000)

testdone(function() consoledebug(rsquoTime is uprsquo) )

testdone(function() consoledebug(rsquoBangrsquo) )

20 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

jQueryDeferred APIОбработка завершения

done() успешноеfail() неуспешноеthen() любое

Создание$Deferred конструкторpromise() read-only объект

Завершениеresolve() завешениеreject() неуспешное

Прогрессnotify() уведомление

progress() обработка

Комбинирование

$when() комбинирование с синхронизацией

21 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

jQuerywhen()function getData()

return $get(rsquodatarsquo)success(function() consolelog(rsquoajax donersquo)

function showDiv() return $Deferred(function(d)

$(rsquoblockrsquo)fadeIn(1000 dresolve))promise()

$when(getData() showDiv())then(function(ajaxResult)

consolelog(rsquoall donersquo))

22 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

jQueryDeferred итого

Можно получить более читаемый и легко сопровождаемый код

В нашем случае наиболее наиболее возможное применение

bull синхронизация параллельной анимацииbull синхронизация AJAX-вызовов между собой и другимиоперациями

23 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

AJAX избыточно и неудобно

$ajax(url scripthtmdata Object2Parameters( action rsquoformrsquo )dataType rsquojsonrsquosuccess function (res)

)

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

AJAX рекомендации

bull используем имя метода для указания типа запросаbull не используем dataType mdash правильный Content-Typeдолжен формироваться на стороне сервера

bull не используем собственных функций формированиястроки данных

bull используем deferreds соответственно done() fail()then()

bull определение запроса и добавление обработчиков можноразделить

bull легко синхронизировать запросы и анимацию

25 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

AJAX пример

var update = $post(rsquoupdatersquo id 1 name name )

updatedone(function (response)

)

updatethen(function (response)

donefunction (response)

fail)

26 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

DOM главная проблема

Очень сложная разметкастили в JavaScript

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

DOM главная проблема

bull не используем CSS-стили в JavaScriptbull не отрабатываем responsive через JavaScriptbull не кодируем данные в классах (есть data() )bull всегда используем классыbull чем проще разметка тем проще по нейнавигация

Очень важно минимизируем CSSминимизируем верстку иначе проблемынеизбежны

28 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

DOM проблемы

bull разметка смешана с кодом сложно поддерживатьbull ресурсоемкое создание элементов

$(rsquobodyrsquo)prepend($(rsquoltdivgtrsquo)addClass(rsquoapp-loading-wrapperrsquo)prepend(

$(rsquoltdivgtrsquo)addClass(rsquoapp-loading-picturersquo))

$(rsquoltdivgtrsquo)addClass(rsquoapp-button-red app-club-button-addrsquo)prepend($(rsquoltinput type=buttongtrsquo)

attr(value rsquoПроверитьrsquo ))

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Работа с DOMДобавление новых узлов в документ mdash дорого

bull используем строки добавляем единственным append()bull стараемся не плодить лишние $()bull сводим количество append() к минимумуbull в сложных случаях можно использовать detach()

var $form = $(rsquoformrsquo)$parent = $formparent()

$formdetach()inputseach(function() $formappend(this) )

$parentappend($form)

30 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Циклы проблема

Циклы где достаточно селекторов громоздко частомедленнее

$(rsquoapp-s-showcasersquo)each(function() if ($(this)is(rsquovisiblersquo))

$(this)addClass(rsquoapp-s-showcase--activersquo)

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Циклы

bull стараемся избегатьbull желательно обходиться селекторамиbull иногда циклы действительно нужны

$(rsquoapp-s-showcasenot(visible)rsquo)addClass(rsquoapp-s-showcase--activersquo)

32 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Валидация форм проблемаbull много кода с большим количеством повторенийbull много избыточных вызовов jQuerybull обработка ошибок в виде alert()

function checkForm(f) var fieldfield = $(rsquoform input[name=fio]rsquo)if (fieldval()match(+))

field = $(rsquoform input[name=address]rsquo)if (fieldval()match(+))

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Валидация формПрограммам минимум

bull применяем jQuery к форме потом find()bull однотипный код реализуем в виде цикла по объектуконфигурации

Предпочтительнее mdash использовать jQuery plugin

bull Validation1 самый распространенныйbull TinyValidation2 можно конфигурировать с помощьюdata-атрибутов

1httpdocsjquerycomPluginsValidation]2httpsgithubcomnicholasbsjquery-tiny-validation

34 36

Прочее

bull если нужны данные mdash храним в data() а не парсимкаждый раз разметку

bull иногда можно отказаться от избыточного $()

$(this)attr(rsquoidrsquo) thisid

bull $data(rsquoelemrsquo key value) быстрее чем$(rsquoelemrsquo)data(key value) для одного узла

bull вообще у многих методов вида $fnmethod() естьаналоги $method() для единственного узла

35 36

Ссылки

bull jQuery proven performance tips tricks3

bull Your jQuery Now With 67 Less Suck4

bull Popular performance test cases5

bull jQuery Anti-Patterns for Performance amp Compression6

3httpwwwslidesharenetAddyOsmanijquery-proven-performance-tips-tricks

4http24waysorg2011your-jquery-now-with-less-suck5httpjsperfcompopular6httpwwwslidesharenetpaulirishperfcompression

36 36

Ссылки

bull jQuery proven performance tips tricks3

bull Your jQuery Now With 67 Less Suck4

bull Popular performance test cases5

bull jQuery Anti-Patterns for Performance amp Compression6

3httpwwwslidesharenetAddyOsmanijquery-proven-performance-tips-tricks

4http24waysorg2011your-jquery-now-with-less-suck5httpjsperfcompopular6httpwwwslidesharenetpaulirishperfcompression

36 36