Метка «Matreshka.js»

• Введение
• Наследование
• MK.Object
• MK.Array

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

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

MK.Array — это массив на стероидах, который умеет:

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

Код для привлечения внимания:

mkArray
	.on( 'push', function() {
		alert( 'push' );
	})
	.push( 1, 2, 3, 4 )
	.unshift( 0 )
	.shift()
	.pop()
	.push( 5 )
	.forEach( function() { ... } )
	.sort()
	.reverse()
;

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

Читать полностью »

• Введение
• Наследование
• MK.Object
• MK.Array

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

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

Для того, чтоб установить свойство, которое отвечает за данные, используется метод .jset:

var mkObject = new MK.Object();
mkObject.jset( 'a', 1 );
console.log( mkObject.toJSON() ); // { a: 1 }

Читать полностью »

• Введение
• Наследование
• MK.Object
• MK.Array

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

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

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

От лирики к делу. Итак, Матрешка создана в виде класса:

window.MK = window.Matreshka = Class({ ... });

Аргумент класса — прототип конструктора, который можно определить так:

var MyClass = Class({
  constructor: function() { ... }
});

… который затем и возвращается из функции Class. Если конструктор не определен, то им станет пустая функция.

Один класс может быть унаследован от другого класса (в данном случае MyClass наследуется от Матрешки):

var MyClass = Class({
  'extends': MK
});

(Для 'extends' кавычки нужны не только для того, чтоб избежать ошибки синтаксиса (extends — зарезервированное слово), но и для подсветки синтаксиса. Остальные свойства могут быть без кавычек.)

При наследовании Матрешки есть важное правило: конструктор должен быть всегда и в нем должен вызываться метод .initMK, который, в данном случае, инициализирует псевдоприватные свойства: __id (идентификатор экземпляра для внутреннего использования), объект .__events (объект событий) и объект .__special (хранящий значения «специальных» свойств, их акцессоры и привязанные элементы). Это же правило верно и для классов, которые будут объяснены в следующих статьях: MK.Array и MK.Object.
Читать полностью »

Приветствую всех читателей и писателей хабра.

Хочу познакомить вас с компактным фреймворком (4.44KB gzipped, 14.04KB uncompressed), который позволяет несколько изменить взгляд на структурирование приложений. В «Матрешку» вложено чуточку магии, раскрыть которую позволит серия статей, озаглавленных следующим образом:

• Введение
• Наследование
• MK.Object
• MK.Array

Код для привлечения внимания:

mk.on( 'change:x', function() {
	alert( 'x is changed to ' + this.x );
});
mk.x = 2; // alerts "x is changed to 2"

И это работает в… IE8.

Что такое Матрешка?

Матрешка, как фреймворк
Компактный размер и легкая в изучении архитектура даёт возможность строить крупные расширяемые приложения. Этим сегодня никого не удивишь, но я постараюсь.
Матрешка, как библиотека
Если фичи, предоставляемые Матрешкой вам понравятся, то не обязательно менять свой код. Матрешкой можно пользоваться, как набором классов с интересными методами.
Матрешка, как платформа для создания собственного фреймворка
Матрешка — расширяемый фреймворк общего назначения, который не позиционируется, как MVC, MVVM или %your_design_pattern% фреймворк, поэтому программист имеет возможность реализовать собственную архитектуру, которая будет уметь желаемый набор шаблонов проектирования.

Зачем?

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

Гифка для привлечения внимания

Читать полностью »