Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beminar js

12,635 views

Published on

  • Be the first to comment

Beminar js

  1. 1. Начало в 17:00 Вебинар «БЭМ и JavaScript», 7.07.2015
  2. 2. БЭМинар №3 БЭМ и JavaScript
  3. 3. Белицкий Дмитрий Разработчик интерфейсов 
 в группе разработки «Яндекс Видео» dmtry@yandex-team.ru github.com/dab twitter.com/dabelitsky 4
  4. 4. План работы 5
  5. 5. План работы Сборка JavaScript 5
  6. 6. План работы Сборка JavaScript Валидация полей формы 5
  7. 7. План работы Сборка JavaScript Валидация полей формы Таймер обратного отсчета 5
  8. 8. Прошедшие вебинары 6
  9. 9. Прошедшие вебинары Верстаем веб-страницу ru.bem.info/talks/beminar-css-2015/ 6
  10. 10. Прошедшие вебинары Верстаем веб-страницу ru.bem.info/talks/beminar-css-2015/ Сборка и оптимизация проекта ru.bem.info/talks/beminar-build-2015/ 6
  11. 11. Закрепление пройденного 7
  12. 12. Закрепление пройденного Что такое БЭМ? 7
  13. 13. Закрепление пройденного Что такое БЭМ? Преимущества компонентного подхода. 7
  14. 14. Закрепление пройденного Что такое БЭМ? Преимущества компонентного подхода. Блоки на файловой системе. 7
  15. 15. Закрепление пройденного Что такое БЭМ? Преимущества компонентного подхода. Блоки на файловой системе. Сборка. 7
  16. 16. Технологии блоков CSS ? ? 8
  17. 17. Технологии блоков CSS картинки ? 9
  18. 18. Технологии блоков CSS картинки JavaScript 10
  19. 19. БЭМ и JavaScript 11
  20. 20. БЭМ и JavaScript Независимый блок 11
  21. 21. БЭМ и JavaScript Независимый блок Переносимость 11
  22. 22. БЭМ и JavaScript Независимый блок Переносимость Поддержка 11
  23. 23. БЭМ и JavaScript Независимый блок Переносимость Поддержка JS, CSS — все связано, 
 компонент первичен 11
  24. 24. необходимые инструменты git, node.js, gulp
  25. 25. // клонируем репозиторий > git clone https://github.com/bem-events/beminar-1.git beminar-js // установим зависимости > cd beminar-js && git checkout beminar-2 && npm i
  26. 26. сборка JavaScript в gulpfile.js // добавить таску «js» и добавить watcher для js-файлов gulp.task('js', function() { getFileNames.then(function(src) { return src.dirs.map(function(dirName) { var jsGlob = path.resolve(dirName) + '/*.js'; return jsGlob; }); }) .then(function(jsGlobs) { gulp.src(jsGlobs) .pipe(concat('app.js')) .pipe(gulp.dest(params.out)); }) .done(); }); 14
  27. 27. Валидация полей формы
  28. 28. index.potter.html 16
  29. 29. index.potter.html рефакторинг блока «form» 16
  30. 30. index.potter.html рефакторинг блока «form» jQuery Yandex CDN 16
  31. 31. index.potter.html рефакторинг блока «form» jQuery Yandex CDN <script src="app.js"></script> 16
  32. 32. common.blocks/button/button.js $('.button').on('click', function(e) { if (!/S+@S+.S+/.test($('.form__input_type_email').val())) { $('.form__popup').addClass('form__popup_visible'); return false; } }); 17
  33. 33. пересоберем проект > gulp
  34. 34. Проблемы 19
  35. 35. Проблемы Сильная связанность 19
  36. 36. Проблемы Сильная связанность Поддержка 19
  37. 37. Улучшаем $('.button').on('click', function(e) { e.preventDefault(); if (!/S+@S+.S+/.test($('.form__input_type_email').val())) { $('.form__popup').addClass('form__popup_visible'); } else { $('.form__popup').removeClass('form__popup_visible'); } }); 20
  38. 38. Улучшаем $('.form').on('submit', function(e) { e.preventDefault(); $('.form__popup', this)[ !/S+@S+.S+/.test($('.form__input_type_email', this).val()) ? 
 'addClass' : 'removeClass']('form__popup_visible'); }); 21
  39. 39. Таймер обратного отсчета
  40. 40. Блок «countdown» Таймер обратного отсчета Параметры через data-атрибут БЭМ (JS, CSS) 23 (function($) { $.fn.bemCountdown = function() { this.each(function() { var countdown = $(this); countdown._days = $('.countdown__days', this); countdown._hrs = $('.countdown__hrs', this); countdown._mins = $('.countdown__mins', this); countdown._secs = $('.countdown__secs', this); countdown.endDate = new Date(countdown.data('countdown')); setInterval(function() { updateCountdown(countdown); }, 1000); }); function updateCountdown(countdown) { var curDays, curHrs, curMins, curSecs, startDate = new Date(), dateDelta = countdown.endDate - startDate, timeInSec = parseInt(dateDelta/1000); curSecs = parseInt(timeInSec % 60); timeInSec /= 60; curMins = parseInt(timeInSec % 60); timeInSec /= 60; curHrs = parseInt(timeInSec % 24); timeInSec /= 24; curDays = parseInt(timeInSec); countdown._days.text(curDays); countdown._hrs.text(curHrs); countdown._mins.text(curMins); countdown._secs.text(curSecs); } }; $('.countdown').bemCountdown(); })(jQuery);
  41. 41. Блок «countdown» // CSS .countdown { display: flex; color: white; padding: 10px; margin-bottom: 20px; border: 1px solid pink; font-size: 23px; font-family: Helvetica, sans-serif; } .countdown__days:after { content: ' д.' } .countdown__hrs, .countdown__secs { margin: 0 10px; } .countdown__hrs:after { content: ' ч.' } .countdown__mins:after { content: ' м.' } .countdown__secs:after { content: ' c.' } 24 //HTML <div class="countdown" data-countdown="14 july 2015 23:59"> <div class="countdown__days">XX</div> <div class="countdown__hrs">XX</div> <div class="countdown__mins">XX</div> <div class="countdown__secs">XX</div> </div>
  42. 42. про i-bem.js в следующих вебинарах Вопросы?
  43. 43. полезности github.com/hoho/jquery-bem
  44. 44. https://ru.bem.info/forum/163/ БЭМ — это не только про CSS

×