Как стать автором
Обновить
42.7
Карма
0
Рейтинг
Андрей Губанов @Finom

Веб разработчик

  • Подписчики 38
  • Подписки 8

defi.js — реактивная библиотека, основанная на Object.defineProperty

Блог компании Matreshka.js JavaScript *
Tutorial
defi.js

defi.js — это библиотека, включающая в себя дюжину функций, которые добавляют интересные фичи любым JavaScript объектам с помощью геттеров и сеттеров.


Гифка для привлечения внимания (3.5МБ)
Репозиторий


В качестве Hello World создадим небольшой виджет, состоящий из поля имени, фамилии и приветствия (демо).


<input class="first">
<input class="last">
<output class="greeting"></output>

// данные по умолчанию
const obj = {
  first: 'John',
  last: 'Doe'
};

// слушаем изменения в свойствах first и last
// если произошло изменение, сообщим об этом в консоли
defi.on(obj, 'change:first', () => console.log('First name is changed'));
defi.on(obj, 'change:last', () => console.log('Last name is changed'));

// автоматически генерируем приветствие (свойство greeting) каждый раз,
// когда first или last изменились
defi.calc(obj, 'greeting', ['first', 'last'], (first, last) => `Hello, ${first} ${last}`);

// объявляем двусторонний байндинг между свойствами 
// и соответствующими элементами на странице
defi.bindNode(obj, {
  first: '.first',
  last: '.last',
  greeting: '.greeting'
});

В итоге, если first или last изменились, обработчики события сообщают об этом в консоли, свойство greeting автоматически обновляется, а его элемент получает новое значение (по умолчанию, "Hello, John Doe"). Это случается каждый раз, когда свойства меняются, причем не имеет значения, каким образом. Можно установить значение с помощью кода obj.first = 'Jane', либо изменив значение поля, и все остальные изменения произойдут автоматически.

Читать дальше →
Всего голосов 16: ↑15 и ↓1 +14
Просмотры 5.2K
Комментарии 13

Matreshka.js 2 — tl;dr

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial

image



Краткий обзор простого фреймворка для создания одностраничных приложений Matreshka.js. В посте используется ECMAScript 2017, который можно переписать на ECMAScript 5.


Основные функции


Функция bindNode связывает свойство и элемент.


const object = { name: 'Brendan' };
const node = document.querySelector('.name');
Matreshka.bindNode(object, 'name', node);
object.name = 'Doug';


Если свойство меняется, меняется и элемент, если элемент меняется (например, пользователь вводит текст), меняется и свойство. Из коробки Matreshka.js умеет обрабатывать любые элементы форм. Можно объявить байндинг для произвольных элементов см. документацию.


Функция calc связывает одно свойство с другими.


Matreshka.calc(object, 'fullName', ['firstName', 'lastName'], (firstName, lastName) => {
    return `${firstName} ${lastName}`
});
object.firstName = 'Brendan';
object.lastName = 'Eich';
// ...
console.log(object.fullName); // "Brendan Eich"

Когда меняется свойство-источник (firstName или lastName), меняется и свойство-цель (fullName).


Вместе с функцией bindNode можно объявлять длинные цепочки зависимостей: свойство a зависит от состояния элемента e1, свойство b зависит от свойства a, свойство c зависит от элементов e2 и e3 и от свойства b, изменение которого, как следствие, меняет e1, e2 и e3...


Всего голосов 27: ↑20 и ↓7 +13
Просмотры 6.6K
Комментарии 21

node-direct — один NodeJS сервер на несколько сайтов

Разработка веб-сайтов *JavaScript *Node.JS *
Tutorial

tl;dr


С node-direct можно заливать серверные .js файлы и обращаться к ним так же, как к .php скриптам: example.com/foo.srv.js.


  1. Установка.


    npm install -g node-direct

  2. Конфигурация nginx.


    location ~ \.srv\.js$ {
            root <path_to_website_files>;
            proxy_pass http://localhost:<port>;
            proxy_set_header X-Requested-File-Path $document_root$uri;
    }

  3. Запуск.


    node-direct --port=<port>

  4. Скрипт foo.srv.js, где req и res созданы сервером express.


    module.exports = function(req, res) {
            const someModule = require('some-module');
            res.send('Hello world!');
    }


Введение


Когда NodeJS стал более-менее популярным, мне было нелегко осознать, что с ним всё не так просто, как с PHP. Используя последний, можно было создать .php файл, залить его на сервер, обратиться по адресу example.com/путь/имяфайла.php и радоваться. Такая простота развертывания скриптов служила одной из причин, почему "пых" стал таким популярным.


В свою очередь, NodeJS, независимо от сложности приложения, заставляет очень многие вещи делать руками.


  • Гоняй каждое приложение на собственном порту
  • Определи роуты самостоятельно
  • Настрой деплой
  • Убедись, что приложение работает и после перезагрузки сервера
  • Не забудь сделать так, чтоб при изменении файлов, NodeJS сервер перезагружался
Читать дальше →
Всего голосов 11: ↑7 и ↓4 +3
Просмотры 5.6K
Комментарии 5

Matreshka.js 2 — самый простой фреймворк во Вселенной

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Matreshka.js заполняет образовавшуюся за последние годы пропасть между джуном и сеньором

Вышла beta второй версии фреймворка Matreshka.js. Релиз выйдет через неделю (плюс пара дней) после последнего патча, отчет начинается с выходом этого поста. Версию можно считать стабильной, а статус beta — чистой формальностю, так как проект достаточно долго и без серьезных изменений пребывал в статусе prealpha/alpha и проверялся в реальных проектах.



» Репозиторий
» Сайт


Позиционирование фреймворка


Вместо наивного "JavaScript фреймворк для всех", Matreshka.js теперь позиционируется, как "Простой фреймворк для джунов". Позвольте мне, вместо дублирования текста с сайта, разместить ссылку на текст, объясняющий этот момент более детально.


Общие изменения


  • Фреймворк был переписан с нуля, с использованием ECMAScript 2015 и некоторых элементов синтаксиса, еще не вошедших в финальную спецификацию.
  • Все примеры так же переписаны на новый JavaScript.
  • Устранены все потенциальные утечки памяти.
  • Добавлена возможность импортировать только необходимые функции и классы. В документации к каждому статичному методу и классу указан и адрес модуля.

const bindNode = require('matreshka/bindnode');
bindNode(object, key, node);

  • Все сопроводительные материалы так же обновились: статьи, роутер, и пр.
  • Документация собирается с помощью Webpack и самописного плагина, который очень быстро генерирует HTML файлы из JSDoc и GFM.

Читать дальше →
Всего голосов 31: ↑26 и ↓5 +21
Просмотры 17K
Комментарии 90

Роутер для Matreshka.js 2

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial

Demo
Репозиторий


tl;dr


Плагин включает синхронизацию свойств объекта и куска урла.


Matreshka.initRouter(object, '/a/b/c/');
object.a = 'foo';
object.b = 'bar';
object.c = 'baz'

// location.hash теперь #!/foo/bar/baz/

Для использования History API вместо location.hash, нужно передать строку "history" вторым аргументом.


Matreshka.initRouter(object, '/a/b/c/', 'history');

Импорт CJS модуля:


const initRouter = require('matreshka-router');
initRouter(object, '/a/b/c/', 'history');
Читать дальше →
Всего голосов 20: ↑17 и ↓3 +14
Просмотры 10K
Комментарии 1

bala.js — убийца jQuery в менее чем 400 символах кода *

JavaScript *jQuery *
Tutorial
* Это шутка.

image
(картинка позаимствована где-то в интернете)

[ Репозиторий ]

Всем привет.

Уже давно прошли времена обязательной поддержки 6, 7, 8 Ослов и неизбежного использования jQuery, DOM API постепенно приводится к единому виду, но я всё так же часто встречаю на просторах интернета утверждения о том, что VanillaJS — это длинная колбаса.

Мол, зачем мне писать вот так:
document.querySelector('.selector');

Если я могу написать вот так:
$('.selector');

Я отчасти согласен с этим, потому что, периодически, необходимо выбирать элементы много раз в приложении. Приходится определять функции, делающую выборку, прямо в коде:

// selects one node matched given selector
function $(selector, ctx) {
	return (ctx || document).querySelector(selector);
}

// selects all nodes matched given selector
function $$(selector, ctx) {
	return [].slice.call((ctx || document).querySelectorAll(selector));
}

Это касается крошечных скриптов. Для крупных проектов, конечно, нужно юзать какой-нибудь фреймворк, который берет на себя все манипуляции над DOM.
Читать дальше →
Всего голосов 91: ↑58 и ↓33 +25
Просмотры 43K
Комментарии 193

(Архив) Matreshka.js — Три возможности

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial
На этот раз вместо статьи было решено сделать видеоролик, объясняющий три немаловажные аспекта API Матрешки. Это пилотный ролик, и, если последует позитивная реакция от сообщества, в планах записать несколько видео туториалов, предположительно, в формате «Х за 60 секунд».

В ролике рассказывается о:

1. Методе реализующем одно/двусторонее связывание данных (bindNode).
2. Зависимостях одних данных от других (calc).
3. Возможности прослушивать изменения свойства для запуска произвольного кода.



Матрешку иногда критикуют за способ, который был выбран для связывания данных и представления. Если быть точнее, у разработчиков вызывает вопросы метод bindNode и использование селектора вместо новомодных компонентов или описания логики прямо в HTML коде.

this.bindNode('key', '.selector', binder);

В видео есть ответ на этот вопрос: вьюха — это ни более чем источник данных, событий и способ вывести данные в документ. Преимущество такого подхода в том, что вы не заморачиваетесь с представлением, а работаете с данными, не задумываясь, что произойдет, когда данные изменятся.
Читать дальше →
Всего голосов 17: ↑15 и ↓2 +13
Просмотры 7.4K
Комментарии 20

(Архив) Matreshka.js ECMAScript.next boilerplate

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial
Пост устарел, SystemJS — не панацея, он обладает множеством проблем со сборкой (лично я отрепортил о массе багов), Gulp можно заменить на NPM Scripts. Используйте Webpack.

Дисклеймер: этот пост может показаться неинтересным для продвинутых JavaScript разработчиков. Он ориентирован на новичков, желающих освоить ECMAScript 2015+.

С появлением частичной поддержки ECMAScript 2015 в Chrome 45 и NodeJS 4, мы, веб разработчики, вступили в новую эпоху отрасли, которая нам приносит не только «хлеб с маслом», но и доставляет массу удовольствия. К сожалению, новый JavaScript не поддерживается всеми браузерами. Разработчику на помощь приходит Babel, который компилирует новый JavaScript в старомодный и поддерживаемый всеми браузерами (даже древними). На самом деле компиляторов ECMAScript.next в ECMAScript 5 больше чем один: Traceur, ES6 Transpiler и другие. Но Babel (бывший 6to5) является самым популярным и самым быстроразвивающимся компилятором, на сегодня.

Матрешка, в свою очередь (как же без неё, всё-таки это блог проекта Matreshka.js), — умеренно популярный фреймворк, иногда вызвающий вопрос «с чего начать» у новичков.

Решение — Matreshka.js ECMAScript.next boilerplate. Этот репозиторий убивает двух зайцев одним выстрелом: он содержит настроенный Gulp, SystemJS, а так же пример простых модулей, использующих Матрешку.

<habracut /|>

Репозиторий сделан для всех, не только для пользователей Матрешки. Если вы не желаете использовать этот фрефмворк, просто не импортируйте его и удалите сответствующие файлы из /src/lib/.

Пример максимально упрощен для того, чтоб новичек сосредоточился на реализации, исключительно, JavaScript кода. CSS препроцессор, browserify, jspm и другие вещи не включены, а библиотеки, которые вы желаете подключить, можно копировать напрямую в папку /src/lib/.

Что мы будем использовать?


  • Gulp — «запускатель задач».
  • SystemJS — универсальный загрузчик модулей (AMD, CJS, ES6).
  • Babel — компилятор JavaScript нового поколения в старый.
  • Matreshka — фреймворк, использующийся по умолчанию.

Читать дальше →
Всего голосов 17: ↑16 и ↓1 +15
Просмотры 7.2K
Комментарии 12

Matreshka.js 2: события

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial

image


Документация на русском
Github репозиторий


Всем привет!


Функциональность событий в Matreshka.js стала настолько богатой, что она, без сомнения, заслужила отдельной статьи.


Эта статья на английском

Читать дальше →
Всего голосов 19: ↑15 и ↓4 +11
Просмотры 7.7K
Комментарии 0

(Архив) Matreshka.js 1.1: еще больше крутостей

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial
image

Документация на русском
Github репозиторий

Всем привет. Сегодня, 28 сентября исполняется два года с первого коммита в репозиторий Матрешки. Так совпало, что к этому времени подоспел новый релиз со всякими вкусностями для любого JavaScript разработчика (даже для тех, кто не хочет использовать Матрешку в качестве фреймворка).

Матрешка — это JavaScript фреймворк (или, если хотите, библиотека), основанный на акцессорах, и выжавшая из них невероятные, на первый взгляд, возможности. Помните, время, когда в JavaScript геттеры и сеттеры только-только появились? Сколько шума было вокруг них… Статьи, разговоры… Затем, всё затихло: многие не понимали, как этими возможностями воспользоваться, кроме как в простых примерах. Матрешка — это прекрасный ответ на вопрос, зачем нужны акцессоры в JavaScript.



По традиции, напомню о том, что умеет этот фреймворк с помощью маленького кусочка кода.

Раньше можно было делать только так:

// this - экземпляр Матрешки
// связываем свойство "x" с элементом на стрнице
this.bindNode('x', 'input.my-node');
// если изменилось, выводим alert
this.on('change:x', function() {
    alert(this.x);
});
// меняем свойство, вызывается обработчик
// меняется и привязаннык к "x" элемент
this.x = 'Wow!';

Теперь можно еще и так:

var object = {};
// связываем свойство "x" с элементом на стрнице
MK.bindNode(object, 'x', 'input.my-node');
// если изменилось, выводим alert
MK.on(object, 'change:x', function() {
    alert(object.x);
});
// меняем свойство, вызывается обработчик
// меняется и привязаннык к "x" элемент
object.x = 'Wow!';

Из-за того, что последние версии Chrome и NodeJS стали, наконец, поддерживать большинство элементов синтаксиса ES6, все примеры ниже в этом посте будут написаны на ES6. Таким нехитрым способом я хочу поздравить всех, кто считает эти нововведения невероятно крутыми и привлечь внимание к ES.next тех, кто с ними еще не знаком.
Читать дальше →
Всего голосов 20: ↑15 и ↓5 +10
Просмотры 10K
Комментарии 27

(Архив) 10 причин попробовать Матрешку

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *jQuery *
image

1. Чистый JavaScript и HTML


Многие фреймворки пытаются починить веб, создавая собственный язык программирования. Идея Матрешки проста: с вебом всё в порядке. Вся логика, которую пишет программист, находится, как и должна, в JavaScript файлах, а HTML остаётся языком разметки гипертекста. Шутка об HTML программисте должна остаться шуткой.

2. Минимум сущностей


Матрешка не требует создания избыточных сущностей. Благодаря простому синтаксису привязок, связь между JavaScript и HTML может быть описана там же, где и логика. Программисту не требуется задумываться сразу о нескольких вещах, размышляя о балансе полномочий объектов. Вопрос где прописать обработчик: во “вьюхе” или в контроллере отпадает сам по себе. Хотя, никто не запрещает разделить данные и контроллер, разместив их в разных JS файлах.

3. Работай с данными, забудь о представлении


Попробовав популярный (но уступающий под натиском более современных продуктов) фреймворк Backbone, сталкиваешься с серьезным неудобством: объявляя данные, зависящие от UI и UI, зависящий от данных, вам, как правило, требуется создать два обработчика события. Один ловит изменения данных, второй ловит пользовательские действия. Проблема подкрепляется еще тем, что HTML элементы, как правило, совершенно идентичны в рамках приложения: input, select, кастомные виджеты из jQuery UI могут многократно встречаться на странице. Программисту, который реализует еще одну “единицу” приложения (например, форму), приходится пользоваться “копипастой”.

С Матрешкой всё намного проще. Вам нужно лишь однажды объявить привязку (в одном месте, а не в двух), затем работать с данными (как с обычными JavaScript объектами), забыв, что у нас вообще есть представление.
Читать дальше →
Всего голосов 43: ↑31 и ↓12 +19
Просмотры 27K
Комментарии 37

Matreshka.js 2: От простого к простому

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *jQuery *
Tutorial

image


Документация на русском
Github репозиторий


Всем привет! В этой статье я расскажу, как пользоваться Matreshka.js на трех несложных примерах. Мы рассмотрим базовые возможности фреймворка, познакомимся с тем, как работать с данными и разберем коллекции.


Пост является краткой компиляцией переводов из этого репозитория.


Hello World!
Всего голосов 17: ↑15 и ↓2 +13
Просмотры 22K
Комментарии 34

(Архив) Вышла первая версия фреймворка Matreshka.js

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *jQuery *
image
Репозиторий на Github

Всем привет! Спешу сообщить радостную новость. Наконец, вышла первая (1.0) версия фреймворка Матрешка. В этом посте я расскажу о самых важных изменениях во фреймфорке, о новом сайте и русскоязычной документации.

Напомню, Матрешка — JavaScript фреймворк для создания одностраничных приложений, соблюдающий несколько важных принципов:
  • Никакой логики в HTML
  • Минимум сущностей
  • Произвольная архитектура

Матрешка реализует простой синтаксис двустороннего связывания данных и активно использует акцессоры (геттеры и сеттеры).

this.bindNode( 'x', 'input.my-node' );
this.on( 'change:x', function() {
	alert( this.x );
});
this.x = 'Wow!';

Читать дальше →
Всего голосов 34: ↑29 и ↓5 +24
Просмотры 25K
Комментарии 18

Несколько интересностей и полезностей от веб-разработчика *

Разработка веб-сайтов *JavaScript *HTML *
Tutorial
* Надеюсь, ilusha_sergeevich не обвинит меня в плагиате.
Если что, пост переименую.

[Тут была картинка для привлечения внимания]



Всем привет! За время работы постепенно накапливаются наработки, которыми можно было бы поделиться с сообществом. Но ни одна из этих наработок не тянет на большой полноценный пост. Поэтому я собрал все мелочи, что вспомнил, в одной статье: несколько простых опен-сорц проектов, пара советов и находок. Каждый из предложенных скриптов в этой статье поставляется как есть, под лицензией WTFPL (кроме Балалайки). С радостью приму пулл реквесты с исправлением багов или изменениями в README.


donut.js — микро-библиотека, рисующая бубликовые (donut) и круговые диаграммы


image
Во время работы над очередным проектом, появилась задача нарисовать много информативных бубликов на карте мира, и не просто нарисовать, а еще и поддержать ИЕ8, который, как известно, не умет SVG, а только безобразный VML. Первое, что приходит в голову, это Raphael. Порывшись некоторое время, я нашел это решение. К сожалению, автор проявил изобретательность простым хаком: на круговой диаграмме (pie chart) он нарисовал белый круг. Это решение не подошло, так как дырка бублика должна быть прозрачной. Изучение возможности рисования при помощи Raphael таких диаграмм мне показалось чересчур трудоёмким. Остальные скрипты на просторах интернета мне так же не подошли. Пришлось писать свой костыль, взяв за основу математику рисования арок этого проекта. Арки для VML версии нарисованы используя элемент arc.
var myDonutDiv = donut(options);

Читать дальше →
Всего голосов 86: ↑55 и ↓31 +24
Просмотры 43K
Комментарии 55

(Архив) Matreshka.js — долгожданная реализация TodoMVC

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Введение
Наследование
MK.Object
MK.Array
Matreshka.js v0.1
Matreshka.js v0.2
Реализация TodoMVC

Cайт Матрешки
Github репозиторий.

Всем привет! В этом кратком посте, представляю на суд общественности долгожданную реализацию «Hello, world на стероидах» — TodoMVC на базе фреймворка Матрешка.



Напомню, одной из идей Матрешки является удобное связывание данных и HTML элементов с помощью простых функций, которое имеет следующие преимущества перед решением той же задачи в других фреймворках:

1. Никакой логики в HTML коде. Мне, как человеку, который с трепетом относится к JavaScript и HTML, хотелось бы, чтоб язык программирования так и остался языком программировния, я язык разметки — языком разметки.
2. Не нужно отдельно слушать события данных, для того, чтоб обновить UI, и слушать события UI для того, чтоб обновить данные. Это возволяет избежать ошибок, типа «забыл повесить обработчик», так как не приходится хранить в голове несколько сущностей сразу. Вы задаёте правила, как данные синхронизируются с видом, а дальше работаете исключительно с данными.

this.bindNode( 'x', 'select.my-select' );


TodoMVC — эталонное приложение, включающее в себя наиболее распространенные и «неудобные» задачи, у которого есть спецификация и которое призвано помочь программисту выбрать понравившийся фреймворк. На одноименном сайте размещен список реализаций приложения, используя самые популярные фреймворки. На github проекта — больше (папка labs).
Читать дальше →
Всего голосов 21: ↑17 и ↓4 +13
Просмотры 9.5K
Комментарии 26

(Архив) Matreshka.js v0.2

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial
Статья устарела. См. актуальную историю версий.


Всем привет. Представляю очередное обновление фреймворка Matreshka.js до версии 0.2. Напомню: Матрешка — фреймворк общего назначения с окрытым исходным кодом, в идеологию которого положено доминирование данных над внешним видом: вы задаёте правила, как интерфейс должен синхронизированться с данными, затем работаете исключительно с данными, кроме случаев, когда событие интерфейса не касается данных (например, щелчек по кнопке или сабмит формы, сами по себе, не меняют данные, а запускают функцию, которая, в свою очередь, работает с данными)

Читать дальше →
Всего голосов 17: ↑15 и ↓2 +13
Просмотры 6.1K
Комментарии 10

(Архив) Matreshka.js v0.1

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial
Статья устарела. См. актуальную историю версий.


(Все предыдущие статьи обновлены до актуального состояния)
Репозиторий

Сайт (там же и документация)

Matreshka LogoВсем привет. Прошло 5 месяцев после последней публикации серии статей о Матрешке. С тех пор исправлен небольшой ряд найденных ошибок, появилось несколько удобных фич, в том числе и под влияниев ваших комментариев, проект обрел спонсора в лице Shooju, получил логотип и нормальный, не-бутстраповский сайт.

Читать дальше →
Всего голосов 42: ↑38 и ↓4 +34
Просмотры 9.7K
Комментарии 5

(Архив) Matreshka.js — MK.Array

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Array.



(Напомню, репозиторий находится здесь)

Приветствую всех. Предыдущую статью я закончил на том, что нам может потребоваться массив данных. Массивом в проекте Matreshka.js являются экземпляры класса MK.Array. Чем они отличается от обычных массивов? Почти ничем. Прототип MK.Array содержит все методы, которые есть у «традиционного» массива, конструктор принимает те же аргументы, что и оригинальный Array, а экземпляры имеют несколько интересных особенностей.

MK.Array — это массив на стероидах, который умеет:
  • Всё, что умеет Array
  • Генерировать события при модификации
  • Использовать цепочечный вызов методов там, где это возможно
  • Умеет то, что умеет Матрешка: привязывать элементы к свойствам и генерировать кастомные события


Помните гифку из первой статьи серии?

Читать дальше →
Всего голосов 23: ↑19 и ↓4 +15
Просмотры 4.1K
Комментарии 15

(Архив) Matreshka.js — MK.Object

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Object.


В предыдущих статьях мы познакомились с общими принципами Матрешки: привязка элементов, события, наследование. В конце предыдущей статьи я задал себе вопрос: «Как разграничить состояние приложения (показать ли пользователю пароль) и данные приложения (логин, пароль, «запомнить меня»)».

Класс, который нам в этом поможет, называется MK.Object, который наследуется от класса Matreshka. Идея проста: у нас есть множество ключей, отвечающих за данные в экземпляре класса и мы считаем, что остальные свойства отвечают лишь за состояние приложения и не являются бизнес моделью.

Как устроено множество ключей
За множество ключей отвечает псевдоприватное свойство ._keys, которое является объектом со значениями, которые нам безразличны. Массив бы нам не подошел, потому что, перед добавлением нового ключа надо было бы проверять, есть ли ключ в массиве, а при удалении, пришлось бы узнавать индекс, затем сдвигать следующие элементы. В случае объекта, мы получаем полноценное множество строк, для добавления нового ключа не нужно проверять его наличие, а для удаления требуется лишь вызов оператора delete.


Для того, чтоб установить свойство, которое отвечает за данные, используется метод .jset:
var mkObject = new MK.Object();
mkObject.jset( 'a', 1 );
console.log( mkObject.toJSON() ); // { a: 1 }

Читать дальше →
Всего голосов 25: ↑23 и ↓2 +21
Просмотры 3.8K
Комментарии 7

(Архив) Matreshka.js — Наследование

Блог компании Matreshka.js Разработка веб-сайтов *JavaScript *
Tutorial
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Class.


Приветствую всех читателей и писателей Хабра.
В предыдущей статье мы поговорили об основах работы с Матрешкой. В этой, я хочу рассказать, как наследовать Матрешку и как строить пока что небольшие приложения на её базе.

Матрешка устроенна в виде класса, сконструтированного при помощи кастомной функции Class. Это немного измененная версия функции, о которой я писал на форуме javascript.ru (ссылка на доку).

Так почему классы? Класс — это лишь слово, не противоречащее парадигме прототипного программирования. Если взглянуть на документацию того же Backbone.js, то вы увидите, что и они оперируют словом «класс» без всяких стеснений. Мы можем поспорить о том, что в Javascript нет классов, есть конструкторы, и я с вами соглашусь, но, на деле, имеет ли этот спор смысл? Если конструктор выглядит как класс, плавает как класс, и крякает как класс, то это, наверное, и есть класс?

От лирики к делу. Итак, Матрешка создана в виде класса:
window.MK = window.Matreshka = Class({ ... });

Аргумент класса — прототип конструктора, который можно определить так:
var MyClass = Class({
  constructor: function() { ... }
});
… который затем и возвращается из функции Class. Если конструктор не определен, то им станет пустая функция.
Читать дальше →
Всего голосов 28: ↑22 и ↓6 +16
Просмотры 4.4K
Комментарии 2
1

Информация

В рейтинге
Не участвует
Откуда
Одесса, Одесская обл., Украина
Дата рождения
Зарегистрирован
Активность