- Matreshka.js: От простого к простому
- 10 причин попробовать Матрешку
- Matreshka.js 1.1: еще больше крутостей
- Matreshka.js: события
Документация на русском
Github репозиторий
Всем привет!
Функциональность, событий в Матрешке стала настолько богатой, что она, без сомнения, заслужила отдельной статьи. Коротко об изменениях в новой версии я рассказывал в предыдущем посте. Теперь давайте разберемся подробно, почему Матрешка называется event-driven фрейморком.
Небольшой код для привлечения внимания:
var object = {a: {b: {c: {d: 1}}}};
MK.on(object, 'a.b.c@change:d', function(evt) {
alert('"d" изменилось на ' + evt.value);
});
object.a.b.c.d = 2; // "d" изменилось на 2
object.a.b = {c: { d: 42 }}; // "d" изменилось на 42
Напомню, возможности, описанные в этом посте, доступны, в том числе, в виде небольшой библиотеки MatreshkaMagic, на случай, если вам не нужны «фреймворковые» фичи.
Читать дальше →
- Matreshka.js: От простого к простому
- 10 причин попробовать Матрешку
- Matreshka.js 1.1: еще больше крутостей
- Matreshka.js: события
Документация на русском
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 тех, кто с ними еще не знаком.
Читать дальше →
Автор последнего сообщения: ...
Автор последнего сообщения: ...
Описание темы: Старт 21.07.15 102% в день за 3 дня( ...
