2. Начало в 17:00
Вебинар «БЭМ и JavaScript», 7.07.2015

3. БЭМинар №3
БЭМ и JavaScript

4. Белицкий Дмитрий
Разработчик интерфейсов
в группе разработки «Яндекс Видео»
dmtry@yandex-team.ru
github.com/dab
twitter.com/dabelitsky
4

5. План работы
5

6. План работы
Сборка JavaScript
5

7. План работы
Сборка JavaScript
Валидация полей формы
5

8. План работы
Сборка JavaScript
Валидация полей формы
Таймер обратного отсчета
5

9. Прошедшие вебинары
6

10. Прошедшие вебинары
Верстаем веб-страницу
ru.bem.info/talks/beminar-css-2015/
6

11. Прошедшие вебинары
Верстаем веб-страницу
ru.bem.info/talks/beminar-css-2015/
Сборка и оптимизация проекта
ru.bem.info/talks/beminar-build-2015/
6

12. Закрепление пройденного
7

13. Закрепление пройденного
Что такое БЭМ?
7

14. Закрепление пройденного
Что такое БЭМ?
Преимущества компонентного подхода.
7

15. Закрепление пройденного
Что такое БЭМ?
Преимущества компонентного подхода.
Блоки на файловой системе.
7

16. Закрепление пройденного
Что такое БЭМ?
Преимущества компонентного подхода.
Блоки на файловой системе.
Сборка.
7

17. Технологии блоков
CSS
?
?
8

18. Технологии блоков
CSS
картинки
?
9

19. Технологии блоков
CSS
картинки
JavaScript
10

20. БЭМ и JavaScript
11

21. БЭМ и JavaScript
Независимый блок
11

22. БЭМ и JavaScript
Независимый блок
Переносимость
11

23. БЭМ и JavaScript
Независимый блок
Переносимость
Поддержка
11

24. БЭМ и JavaScript
Независимый блок
Переносимость
Поддержка
JS, CSS — все связано,
компонент первичен
11

25. необходимые инструменты
git, node.js, gulp

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

28. Валидация полей формы

29. index.potter.html
16

30. index.potter.html
рефакторинг блока «form»
16

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

34. пересоберем проект
> gulp

35. Проблемы
19

36. Проблемы
Сильная связанность
19

37. Проблемы
Сильная связанность
Поддержка
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

40. Таймер обратного отсчета

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 в следующих вебинарах
Вопросы?

44. полезности
github.com/hoho/jquery-bem

45. https://ru.bem.info/forum/163/
БЭМ — это не только про CSS