Location via proxy:
[ UP ]
[Report a bug]
[Manage cookies]
No cookies
No scripts
No ads
No referrer
Show this form
Submit Search
Submit Search
Upload
Beminar js
•
1 like
•
16,217 views
1 of 45
Download now
Download to read offline
More Related Content
Beminar js
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
Download now