• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

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

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

Зачем?

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

• Вступление
• Как сделать простейший редактор самому, причем не будет никакой теории, только практика. Предупреждаю, для многих эта часть покажется простой и очевидной, так как текст ориентирован, можно сказать, на себя, в прошлом (нет, я не путешествую во времени :));
• Описание работы очень легкого редактора «Suit Up» (оригинальный объем кода: 5.97KB (1.87KB gzipped), минимизированный: 3.35KB (1.37KB gzipped) на момент написания статьи, не считая спрайта и стилей).

Вступление

Простейший редактор

<div contenteditable></div>

• Объект, который мы модифицируем, добавляя новое свойство
• Свойство (строка), которое, собственно, хотим добавить
• Дескриптор: объект, содержащий «настройки» нового свойства, например аццессоры (геттер, сеттер)

• value (любое значение: строка, функция...) — значение, которое получит определяемое свойство объекта (геттер и сеттер в данном случае определить нельзя)
• writable (true/false) — можно ли перезаписать значение свойства (аццессоры тоже не доступны)
• get (функция) — геттер (value и writable определить нельзя)
• set (функция) — сеттер (value и writable определить нельзя)
• configurable (true/false) — можно ли переопределить дескриптор (использовать Object.defineProperty над тем же свойством)
• enumerable (true/false) — будет ли свойство перечисляться через for..in и доступно в Object.keys (плохая формулировка)

// Код сперт с MDN
var o = {};
Object.defineProperty(o, "a", {value : 37,
                               writable : true,
                               enumerable : true,
                               configurable : true});

 
var bValue;
Object.defineProperty(o, "b", {get : function(){ return bValue; },
                               set : function(newValue){ bValue = newValue; },
                               enumerable : true,
                               configurable : true});

// Код сперт с MDN
Object.defineProperties(obj, {
  "property1": {
    value: true,
    writable: true
  },
  "property2": {
    value: "Hello",
    writable: false
  }
  // etc. etc.
});

localObject = JSON.parse( localStorage.getItem( '_myStorage' ) ); // "{'a':1, 'b':2}" → {a:1, b:2}

localStorage.setItem( '_myStorage', JSON.stringify( localObject ) );

var ObjectStorage = function ObjectStorage( name, duration ) {
	var self,
		name = name || '_objectStorage',
		defaultDuration = 5000;
		
	// дабы не плодить кучу экземпляров, использующих один и тот же ключ хранилища, 
	// просто возвращаем единственный с заданным именем,
	// меняя только duration (если имеется)
	if ( ObjectStorage.instances[ name ] ) {
		self = ObjectStorage.instances[ name ];
		self.duration = duration || self.duration;
	} else {
		self = this;
		self._name = name;
		self.duration = duration || defaultDuration;
		self._init();
		ObjectStorage.instances[ name ] = self;
	}
	
	return self;
};
ObjectStorage.instances = {};
ObjectStorage.prototype = {
	// type == local || session
	_save: function ( type ) {
		var stringified = JSON.stringify( this[ type ] ),
			storage = window[ type + 'Storage' ];
		if ( storage.getItem( this._name ) !== stringified ) {
			storage.setItem( this._name, stringified );
		}
	},

	_get: function ( type ) {
		this[ type ] = JSON.parse( window[ type + 'Storage' ].getItem( this._name ) ) || {};
	},

	_init: function () {
		var self = this;
		self._get( 'local' );
		self._get( 'session' );

		( function callee() {
			self.timeoutId = setTimeout( function () {
				self._save( 'local' );
				callee();
			}, self._duration );
		})();

		window.addEventListener( 'beforeunload', function () {
			self._save( 'local' );
			self._save( 'session' );
		});
	},
	// на случай, если нужно удалить таймаут (clearTimeout( storage.timeoutId ))
	timeoutId: null,
	local: {},
	session: {}
};

var storage = new ObjectStorage;
storage.local = {a:4, b: {c:5}};
storage.session = {a:7, b: {c:8}};
b = storage.local.b;
b.c = {d:6};

localStorage = { a: { b: 1 }, c: { d: 2 } }
localStorage.a.b = 3;

Кроссдоменные запросы с помощью YQL

var query = 'select * from html where url="http://javascript.ru/" and xpath="*"'
var url = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURI(query)+'&format=xml&callback=callback';
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
function callback(data) {
    console.log(data); //сам текст ответа находится в data.result[0]
}

1. Результата выполнения
2. Переданных аргументов
3. Контекста вызова (что есть this при вызове)
4. Количества вызовов функции после создания обработчика

var html = '';
request.on('response', function (response) {

    response.on('data', function (chunk) {
        html = html + chunk;
    });

    response.on('end', function() {
        //какой-то парсер
        parse(html, function(data){  
                //какая-нибудь функция, добавляющая данные в базу
		addToDatabase(data, function() {  
			doSomething();
		})
	});

    });
});

Google Fusion Tables

$.cssHooks.chuckNorris = {
	get: function(elem) {
		//проводим манипуляции с узлом elem, получаем value
		return value;
	},
	set: function(elem, value) {
		//проводим манипуляции с узлом elem, устанавливаем value
	}
}

$(el).css(‘chuck-norris’, Infinity);
//или $(el).css({‘chuck-norris’: Infinity});
alert($(el).css(‘chuck-norris’)); //Infinity