Фабрика виджетов — способ организации клиентского кода, который отлично вписывается в архитектуру 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;
Ответ не самый прозаичный:
В данном примере срабатывает приведение типов, true=>1, false=>0.
console.log(a === 1);
console.log(b === 0);В данном примере срабатывает приведение типов, true=>1, false=>0.
x|0 всегда === x
x&0 всегда === 0var a = 1;
a = 1|0; => 1
var b = 0;
b = 0&1; => 0
В 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: {
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.
Проект на GitHub:
https://github.com/Krivega/backbone-sync-websocket
Требует наличия WebSocket-конструктора: https://github.com/Krivega/websocket
Требует наличия WebSocket-конструктора: https://github.com/Krivega/websocket
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
Все чекбоксы остортированы, если мы выбираем очередной, то он переносится в другую зону(зону чЕкнутых:) ), там они тоже сортируются. Обратно тоже работает.
Без лишних слов:
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');
});
});
JQuery методы и их аналоги на чистом JavaScript
| jQuery | 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 минимальную высоту, за счет которой я и прижимаю футер к низу. Следом сразу запускаю функцию footerToBottom(); и, очень важно, ставлю обработчик события на окно браузера-изменение размера, и по нему тоже запуская функцию footerToBottom();
Не забываем о Jquery, это все можно было написать и на чистом JS конечно, но код был бы гораздо длинней.
Все гениальное-просто!
Demo
И так пришло время представить вам новую версию плагина аккордеона! Добавилась одна функция и еще кое-что...
Самое главное - я добавил класс "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 программист. Я использую ООП-подходы, классы, прототипы, замыкания и прочие вещи, я на пути познания секретов !
Но если вы беспокоитесь о том, как долго пользователи ждут ваш сайт, чтобы загрузить, нужно сосредоточить внимание на интерфейсе, это является лучшим выбором.
Если это веб-проект, то разметка это то, с чего начинается клиентская сторона. В верстке использую все из последнего арсенала HTML5 и CSS3. Так же я приверженец подхода «graceful degradation». Большое внимание я уделяю интерактивности создаваемого мною фронтенда. Интерактивность я создаю с помощью JavaScript. Даешь юзабилити интерфейсов!!!
Но все же больше я себя позиционирую как JavaScript программист. Я использую ООП-подходы, классы, прототипы, замыкания и прочие вещи, я на пути познания секретов !
