Matreshka.js — MK.Object

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

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

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

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

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

Документация к .jset: finom.github.io/matreshka/docs/Matreshka.Object.html#jset
Документация к .toJSON: finom.github.io/matreshka/docs/Matreshka.Object.html#toJSON
Теперь можем работать с новым свойством как обычно:

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

В том числе, мы можем использовать унаследованные от класса Matreshka методы:

mkObject.bindElement( 'a', '.my-element' ); mkObject.on( 'change:a', handler ); 

Если мы установим свойство, не добавив его ключ в множество ключей, в результате работы метода .toJSON мы не увидим этого свойства:

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

Можно добавить ключи в список ключей, используя метод .addJSONKeys
Дока: finom.github.io/matreshka/docs/Matreshka.Object.html#addJSONKeys

mkObject.addJSONKeys( 'b', 'c' ); 

Здесь следует важное правило: если вы не уверены наверняка, какие свойства должны попадать в результат работы функции .toJSON, всегда используйте .jset вместо обычного присваивания. Если ключи известны, то, лично я, предпочитаю всегда задавать данные по умолчанию:

var MyClass = Class({ 	'extends': MK.Object, 	constructor: function( data ) { 		this 			.initMK() 			.jset({ // данные по умолчанию 				a: 1, 				b: 2, 				c: 3 			}) 			.set( data ) // кастомные данные (data - обычный объект с данными) 		; 	} }); 

Обратите внимание на вызов .initMK. Здесь он инициализирует не только объекты событий и «специальных» свойств, но и объект-множество ключей. Кроме этого, он добавляет необходимые обработчики событий вызывая событие "modify" при изменении данных. Пример:

var mkObject = new MK.Object(); mkObject.jset({ 	a: 1, 	b: 2 }); mkObject.c = 3;  mkObject.on( 'modify', function() { 	alert( 'Data is changed' ); });  mkObject.a = 4; // вызывает обработчик mkObject.b = 5; // вызывает обработчик mkObject.c = 6; // обработчик не вызывается, так как ключ "c" не обозначен, как данные 

Если передать классу аргумент в виде объекта, он интерпретирует его, как данные:

var mkObject = new MK.Object({ a: 1, b: 2 }); // то же самое, что и var mkObject = new MK.Object(); mkObject.jset({ a: 1, b: 2 }); 

Перебрать данные можно с помощью метода .each:

var mkObject = new MK.Object(); mkObject.jset({ 	a: 1, 	b: 2 }); mkObject.c = 3; mkObject.each( function( item, key ) { 	console.log( key ); }); // выведет 'a', 'b' 

Дока: finom.github.io/matreshka/docs/Matreshka.Object.html#each

Проверить, есть ли в объекте какое-нибудь свойство можно с помощью метода .hasOwnProperty

var mkObject = new MK.Object(); mkObject.jset( 'a', 1 ); mkObject.b = 2; alert( mkObject.hasOwnProperty( 'a' ) ); // true alert( mkObject.hasOwnProperty( 'b' ) ); // false ('b' не является данными) 

Это позволяет юзать конструкцию for..in, как для обычного объекта:

for( var i in mk ) if( mk.hasOwnProperty( i ) ) { 	doSomething(i, mk[i]) } 

Есть еще ряд методов, имена которых говорят сами за себя:
.keyOf, который ищет ключ по значению и возвращает ключ (аналог .indexOf для массива).
.keys, возвращающий массив ключей.
.removeJSONKeys, удаляющий ключи из множества ключей, отвечающих за данные.

Взгляните на измененный пример из предыдущей статьи: jsbin.com/ATAPUCo/6/
В конструкторе мы задаём данные по умолчанию:

	... 	constructor: function () { 		this 			.initMK() 			.jset({ // вот здесь 				userName: '', 				password: '', 				rememberMe: true 			}) 			.bindings() 			.events(); 	}, 	... 

А затем, вместо того, чтоб вручную конструировать объект, который должен быть послан на сервер, мы вызываем метод .toJSON:

	... 	login: function () { 		if (this.isValid) { 			alert( JSON.stringify( this.toJSON() ) ); 		} 		return this; 	} 	... 

В завершение

Теперь мы знаем, как отделить данные Матрешки от состояний, которые не интересны бекенду. Замечательно. Но что, если нам нужно множество данных? Что-то типа массива или коллекции из Backbone.js. Решение — класс MK.Array, о котором я расскажу в следующей статье.

Спасибо, что прочли статью до конца. Всем добра и хорошего кодинга.