Фабрика виджетов для MPA
Фабрика виджетов — способ организации клиентского кода, который отлично вписывается в архитектуру multi-page application (MPA).
В статье будет рассмотрено архитектурное решение, которое позволит оптимизировать загрузку скриптов, разделить код на виджеты и упростит передачу данных на клиент со страницы (при серверном рендеринге).
Вариант реализации на GitHub: https://github.com/Krivega/webpack-factory-widgets
Статья: https://habrahabr.ru/post/339522/
Вариант реализации на GitHub: https://github.com/Krivega/webpack-factory-widgets
Статья: https://habrahabr.ru/post/339522/
Вопрос для собеседования
var a = true;
a |= false;
var b = false;
b &= true; Что будет в переменных a и b?Ответ не самый прозаичный:
В данном примере срабатывает приведение типов, true=>1, false=>0.
console.log(a === 1);
console.log(b === 0); Все потому, что сравнение происходит именно побитово, т.е. в двоичной системе счисления, представление чисел как последовательности 32-х бит из нулей и едениц. Каждый бит каждого числа сравниваются по парам по правилам логического сравнения. Результируещее значение приводится к числу в десятичной системе.В данном примере срабатывает приведение типов, true=>1, false=>0.
x|0 всегда === x
x&0 всегда === 0 В итоге мы получаем:var a = 1;
a = 1|0; => 1
var b = 0;
b = 0&1; => 0Chaplin загрузка контроллеров по имени модуля в RequireJS
В Chaplin чтобы задать роут есть функция match
match('*path', 'home#index'); где home - это имя контроллера, а index - его метод. И тут начинается самое интересное.Где же ищет Chaplin этот контролер? Он использует функцию require, которая ищет этот модуль, и если он еще не загружен, то загружает его.
Chaplin передает в require не просто имя 'home', а
Когда знаешь как это работает, легко можно сделать так, чтобы в функцию match передавать имя модуля.
В общем то дальше будет только очевидное, но все же. ЧТобы передать имя модуля, нужно чтобы эта строчка
Chaplin передает в require не просто имя 'home', а
settings.controllerPath + name + settings.controllerSuffix, т.е. даже не рассчитывает на то, что модуль можно брать уже загруженный, т.е. по имени модуля, а не по имени файла. Когда знаешь как это работает, легко можно сделать так, чтобы в функцию match передавать имя модуля.
В общем то дальше будет только очевидное, но все же. ЧТобы передать имя модуля, нужно чтобы эта строчка
settings.controllerPath + name + settings.controllerSuffix собственно и была именем модуля. Чтобы не путаться, я советую делать хотя бы так:
require.config({
paths: {
//controlers
NameController: 'controllers/name-controller'
}
});
....................
require(['application', 'routes'], function(Application, routes) {
new Application({routes: routes, controllerPath:'', controllerSuffix: 'Controller'});
});
....................
define(function() {
return function(match) {
match('', 'Name#method');
};
});
Календарь для выставления свободных номеров для отельеров
Backbone sync WebSocket
Замена Backbone метода
sync для взаимодействия с сервером по WebSocket.Проект на GitHub: https://github.com/Krivega/backbone-sync-websocket
Требует наличия WebSocket-конструктора: https://github.com/Krivega/websocket
Требует наличия WebSocket-конструктора: https://github.com/Krivega/websocket
JavaScript WebSocket constructor
JS-класс, реализующий соединение по WebSocket'у, и дающий гибкие методы взаимодействия:
1)
2)
3)
4)
Данные форматируются для формата
Проект на GitHub: https://github.com/Krivega/websocket
.open(callback) подписка на открытие соединения;2)
.send(method, params) послать даные;3)
.on(method, params, calback) послать данные и подписаться на ответ;4)
.subscribeNotif(method, calback) подписаться на уведомления;Данные форматируются для формата
JSON-RPCПроект на GitHub: https://github.com/Krivega/websocket
Динамическая таблица с сортировкой, пагинатором и многим другим на JavaScript
Перемещение и сортировка checkbox'ов
Все чекбоксы остортированы, если мы выбираем очередной, то он переносится в другую зону(зону чЕкнутых:) ), там они тоже сортируются. Обратно тоже работает.
Без лишних слов: Demo Прокомментирую код, с перемещением все понятно, испульзуюя JQuery все становится легко и доступно. Я опишу фунцию сортировки: Перебираем все sortInput'ы и создаем пары инпутов и их лейблов, затем добавляем их в массив:
Удаляем инпуты и лейблы, но сохраняем их обьекты-jquery(метод detach):
Собственно сортируем массив:
И вставляем инпуты и лейблы в container:
Финальный код:
$(sortInput).each(function() {
var pair = {
inputTag: $(this),
labelTag: $(this).next("label")
};
elms.push(pair);
});
Удаляем инпуты и лейблы, но сохраняем их обьекты-jquery(метод detach):
$(sortInput).detach();
$(sortlabel).detach();
Собственно сортируем массив:
elms.sort(function(a, b) {
return a.labelTag.text() > b.labelTag.text();
});
И вставляем инпуты и лейблы в container:
$.each(elms , function(){
$(container).append(this.inputTag).append(this.labelTag);
});
Финальный код:
$(document).ready(function() {
function sortContent(container, sortInput, sortlabel) {
var elms = [];
$(sortInput).each(function() {
var pair = {
inputTag: $(this),
labelTag: $(this).next("label")
};
elms.push(pair);
});
$(sortInput).detach();
$(sortlabel).detach();
elms.sort(function(a, b) {
return a.labelTag.text() > b.labelTag.text();
});
$.each(elms, function() {
$(container).append(this.inputTag).append(this.labelTag);
});
}
sortContent('#form1', '#form1 input[type=checkbox]', '#form1 label');
$('#form1').on('change', 'input[type=checkbox]', function() {
var $this = $(this),
thisId = $this.attr('id'),
thisLabel = $('#form1').find('label[for="' + thisId + '"]');
if ($this.is(':checked')) {
$this.appendTo('#form2');
thisLabel.appendTo('#form2');
}
sortContent('#form2', '#form2 input[type=checkbox]', '#form2 label');
});
$('#form2').on('change', 'input', function() {
var $this = $(this),
thisId = $this.attr('id'),
thisLabel = $('#form2').find('label[for="' + thisId + '"]');
if (!$this.is(':checked')) {
$this.appendTo('#form1');
thisLabel.appendTo('#form1');
}
sortContent('#form1', '#form1 input[type=checkbox]', '#form1 label');
});
});
Vanilla JavaScript vs JQuery
JQuery методы и их аналоги на чистом Java Script
| jQuery | JavaScript |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Прижать футер к низу страницы средствами JavaScript
Самый простой способ прижать футер к низу страницы используя JavaScript
На самом деле все очень просто! Сразу скажу, что использую JQuery.
Теперь, когда все данные у нас в переменных, задаем контейнеру #main минимальную высоту, за счет которой я и прижимаю футер к низу. Следом сразу запускаю функцию footerToBottom(); и, очень важно, ставлю обработчик события на окно браузера-изменение размера, и по нему тоже запуская функцию footerToBottom();
Не забываем о Jquery, это все можно было написать и начистом JS конечно, но код был бы гораздо длинней.
Все гениальное-просто!
Demo
function footerToBottom() {
var browserHeight = $(window).height(),
footerOuterHeight = $('#footer').outerHeight(true),
mainHeightMarginPaddingBorder = $('#main').outerHeight(true) - $('#main').height();
$('#main').css({
'min-height': browserHeight - footerOuterHeight - mainHeightMarginPaddingBorder,
});
};
footerToBottom();
$(window).resize(function() {
footerToBottom();
});
А теперь по порядку. Сперва мы создаем функцию, в которой получаем высоту рабочей области браузера, далее вычисляем высоту футера со всеми марджинами, паддинами и бордерами, вычисляем высоту всех марджинов, паддингов и бордеров у контейнера #main.Теперь, когда все данные у нас в переменных, задаем контейнеру #main минимальную высоту, за счет которой я и прижимаю футер к низу. Следом сразу запускаю функцию footerToBottom(); и, очень важно, ставлю обработчик события на окно браузера-изменение размера, и по нему тоже запуская функцию footerToBottom();
Не забываем о Jquery, это все можно было написать и начистом JS конечно, но код был бы гораздо длинней.
Все гениальное-просто!
Demo
Плагин на JQuery «desart.accordion»
И так пришло время представить вам новую версию плагина аккордеона! Добавилась одна функция и еще кое-что...
Самое главное - я добавил класс "active" к заголовкам раскрытых элементов. Это позволяет визуально помечать раскрытые элементы и использовать стилизацию меню типа "плюс-минус" (см. Demo).
А теперь к параметрам, они все те же что и в предыдущей версии:
1)
2)
3)
4)
5)
6)
7)
И последнее изменение-это то что плагину теперь достаточно указать просто заголовок для скрытия, а он скроет автоматически следующий блок сразу за заголовком.
Обязательно посмотрите демонстрацию работы плагина, или скачайте пример:
Source jquery.desart.accordion-2.0
Demo
А теперь к параметрам, они все те же что и в предыдущей версии:
1)
$('.container').accordion_desart -вызов плагина и применение его к блоку с классом ".container"2)
accordionContainer: ".accordion" сам аккордеон3)
accordionTitle: ".acc-title" класс заголовка блока4)
accordionHidden: ".acc-hidden" скрываемый/показываемый блок5)
accordionVisible: ".acc-visible" класс блока, который нужно отображать по умолчанию6)
hideOther: "yes" скрывать открытые блоки при открытии нового7)
hideClicking: "yes" повторное скрытие блока при повторном нажатии И последнее изменение-это то что плагину теперь достаточно указать просто заголовок для скрытия, а он скроет автоматически следующий блок сразу за заголовком.
Обязательно посмотрите демонстрацию работы плагина, или скачайте пример:
Source jquery.desart.accordion-2.0
Demo
Краткий очерк о работе
Front-end это не просто красивое лицо, это дружественный, понятный интерфейс веб-проекта. Моя цель, как front-end разработчика, это создание интересных, легких, быстрых интерфейсов.
80-90% случаев конечного пользователя, время отклика расходуется на внешнем интерфейсе. Если вас волнует доступность и масштабируемость, то нужно сосредоточиться на внутренней начинке веб-ресурса.
Но если вы беспокоитесь о том, как долго пользователи ждут ваш сайт, чтобы загрузить, нужно сосредоточить внимание на интерфейсе, это является лучшим выбором.
Если это веб-проект, то разметка это то, с чего начинается клиентская сторона. В верстке использую все из последнего арсенала HTML5 и CSS3. Так же я приверженец подхода « graceful degradation». Большое внимание я уделяю интерактивности создаваемого мною фронтенда. Интерактивность я создаю с помощью JavaScript. Даешь юзабилити интерфейсов!!!
Но все же больше я себя позиционирую как JavaScript программист. Я использую ООП-подходы, классы, прототипы, замыкания и прочие вещи, я на пути познания секретов «JavaScript-Ninja»!
Но если вы беспокоитесь о том, как долго пользователи ждут ваш сайт, чтобы загрузить, нужно сосредоточить внимание на интерфейсе, это является лучшим выбором.
Если это веб-проект, то разметка это то, с чего начинается клиентская сторона. В верстке использую все из последнего арсенала HTML5 и CSS3. Так же я приверженец подхода « graceful degradation». Большое внимание я уделяю интерактивности создаваемого мною фронтенда. Интерактивность я создаю с помощью JavaScript. Даешь юзабилити интерфейсов!!!
Но все же больше я себя позиционирую как JavaScript программист. Я использую ООП-подходы, классы, прототипы, замыкания и прочие вещи, я на пути познания секретов «JavaScript-Ninja»!
