Embed Size (px)
Citation preview
Начало в 17:00
Вебинар «БЭМ и JavaScript», 7.07.2015
БЭМинар №3
БЭМ и JavaScript
Белицкий Дмитрий
Разработчик интерфейсов в группе разработки «Яндекс Видео»
github.com/dab
twitter.com/dabelitsky
4
План работы
5
План работы
Сборка JavaScript
5
План работы
Сборка JavaScript
Валидация полей формы
5
План работы
Сборка JavaScript
Валидация полей формы
Таймер обратного отсчета
5
Прошедшие вебинары
6
Прошедшие вебинары
Верстаем веб-страницуru.bem.info/talks/beminar-css-2015/
6
Прошедшие вебинары
Верстаем веб-страницуru.bem.info/talks/beminar-css-2015/
Сборка и оптимизация проектаru.bem.info/talks/beminar-build-2015/
6
Закрепление пройденного
7
Закрепление пройденного
Что такое БЭМ?
7
Закрепление пройденного
Что такое БЭМ?
Преимущества компонентного подхода.
7
Закрепление пройденного
Что такое БЭМ?
Преимущества компонентного подхода.
Блоки на файловой системе.
7
Закрепление пройденного
Что такое БЭМ?
Преимущества компонентного подхода.
Блоки на файловой системе.
Сборка.
7
Технологии блоков
CSS
?
?
8
Технологии блоков
CSS
картинки
?
9
Технологии блоков
CSS
картинки
JavaScript
10
БЭМ и JavaScript
11
БЭМ и JavaScript
Независимый блок
11
БЭМ и JavaScript
Независимый блок
Переносимость
11
БЭМ и JavaScript
Независимый блок
Переносимость
Поддержка
11
БЭМ и JavaScript
Независимый блок
Переносимость
Поддержка
JS, CSS — все связано, компонент первичен
11
необходимые инструменты
git, node.js, gulp
// клонируем репозиторий
> git clone https://github.com/bem-events/beminar-1.git beminar-js
// установим зависимости
> cd beminar-js && git checkout beminar-2 && npm i
сборка 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
Валидация полей формы
index.potter.html
16
index.potter.html
рефакторинг блока «form»
16
index.potter.html
рефакторинг блока «form»
jQuery Yandex CDN
16
index.potter.html
рефакторинг блока «form»
jQuery Yandex CDN
<script src="app.js"></script>
16
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
пересоберем проект
> gulp
Проблемы
19
Проблемы
Сильная связанность
19
Проблемы
Сильная связанность
Поддержка
19
Улучшаем
$('.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
Улучшаем
$('.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
Таймер обратного отсчета
Блок «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);
Блок «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>
про i-bem.js в следующих вебинарах
Вопросы?
