Beminar js
•
1 like•16,203 views
Report
Share
Beminar js
- 2. Начало в 17:00 Вебинар «БЭМ и JavaScript», 7.07.2015
- 3. БЭМинар №3 БЭМ и JavaScript
- 4. Белицкий Дмитрий Разработчик интерфейсов в группе разработки «Яндекс Видео» dmtry@yandex-team.ru github.com/dab twitter.com/dabelitsky 4
- 7. План работы Сборка JavaScript Валидация полей формы 5
- 8. План работы Сборка JavaScript Валидация полей формы Таймер обратного отсчета 5
- 11. Прошедшие вебинары Верстаем веб-страницу ru.bem.info/talks/beminar-css-2015/ Сборка и оптимизация проекта ru.bem.info/talks/beminar-build-2015/ 6
- 13. Закрепление пройденного Что такое БЭМ? 7
- 14. Закрепление пройденного Что такое БЭМ? Преимущества компонентного подхода. 7
- 15. Закрепление пройденного Что такое БЭМ? Преимущества компонентного подхода. Блоки на файловой системе. 7
- 16. Закрепление пройденного Что такое БЭМ? Преимущества компонентного подхода. Блоки на файловой системе. Сборка. 7
- 21. БЭМ и JavaScript Независимый блок 11
- 22. БЭМ и JavaScript Независимый блок Переносимость 11
- 23. БЭМ и JavaScript Независимый блок Переносимость Поддержка 11
- 24. БЭМ и JavaScript Независимый блок Переносимость Поддержка JS, CSS — все связано, компонент первичен 11
- 26. // клонируем репозиторий > git clone https://github.com/bem-events/beminar-1.git beminar-js // установим зависимости > cd beminar-js && git checkout beminar-2 && npm i
- 27. сборка 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
- 31. index.potter.html рефакторинг блока «form» jQuery Yandex CDN 16
- 32. index.potter.html рефакторинг блока «form» jQuery Yandex CDN <script src="app.js"></script> 16
- 33. 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
- 35. Проблемы 19
- 38. Улучшаем $('.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
- 39. Улучшаем $('.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
- 41. Блок «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);
- 42. Блок «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>
- 43. про i-bem.js в следующих вебинарах Вопросы?
- 45. https://ru.bem.info/forum/163/ БЭМ — это не только про CSS