Finom 29 окт 2013 в 14:09

(Архив) Matreshka.js — Введение

10 мин

24K

Блог компании Matreshka.jsВеб-разработка*JavaScript*

Туториал

+54

Комментарии 52

AlexNomad 29 окт 2013 в 14:29

Было бы интересно посмотреть матрешку со связыванием данных Angular.

Finom 29 окт 2013 в 15:36

Знаком с Angular (хотя и не использовал в крупных проектах), но не совсем понимаю, что вы имеете в виду.

Tulov_Alex 29 окт 2013 в 16:55

В angular уже есть инфраструктура для привязки данных. Применять там матрешку, это то же самое, что одновременно ехать верхом на двух лошадях. :)

amorphius 29 окт 2013 в 19:21

За лошадьми это к Derby.js

vmakhaev 30 окт 2013 в 16:56

В Derby матрешка тоже не нужна.

j_wayne 29 окт 2013 в 15:09

Спасибо, очень интересно, поглядываю какое-то время на FRP/ClojureScript/Javelin, но руки как-то не доходят, а Матрешка вроде попроще)

НЛО прилетело и опубликовало эту надпись здесь

Finom 29 окт 2013 в 15:34

Да, к сожалению. Но это пока.

bubuq 29 окт 2013 в 18:16

Angular до сих пор не избавился

Tulov_Alex 29 окт 2013 в 18:41

Откуда в angular вдруг зависимость от jquery?
Там есть встроенное средство JLite, если не ошибаюсь. JQuery подключается при необходимости, но зависимости от него нет.

НЛО прилетело и опубликовало эту надпись здесь

Tulov_Alex 29 окт 2013 в 20:08

Следуя вашей логике Java намекает на JavaScript? Ведь это не одно и тоже.

wwwsevolod 29 окт 2013 в 21:10

вы сами можете собрать jquery без ненужных модулей, и получить навыходе jqlite.

lega 30 окт 2013 в 00:03

Возможно bubuq говорил про проекты на Angular.js, в которые зачастую необходимо подключать jQuery, например из-за того же Angular.UI.

mamiamradio 31 окт 2013 в 14:36

Если angular найдет jquery, будет использоваться как раз она, а не jqlite. В противном случае angular возьмет jqlite.

Tulov_Alex 31 окт 2013 в 15:50

Ну так это и понятно. Ни кто вам не запрещает использовать jquery, но подход angular очень сильно отличается от подхода jquery, и ее использование не особо приветствуется.
Даже такие проекты как Angular.UI постепенно уходят от нее, а UI.Bootstrap вообще без нее обходится.

Jabher 29 окт 2013 в 15:48

Про Object.defineProperty в IE8 расскажите, пожалуйста. Очень интересно звучит

termi 29 окт 2013 в 16:42

Для «обычных» объектов в IE8 это реально только через статический VBScript-класс. Ограничение VBScript это то, что статический класс невозможно расширить новыми свойствами. Единственный способ без VBScript — это проверка по таймеру каждые ~10+ мс не изменилось ли значение.
А в данной библиотеки используется экземпляр host-класса XDomainRequest. Над хост-объектами Object.defineProperty в IE8 работает.
В общем, реальных геттеров/сеттеров для любых объектов в IE8 нету и не будет.

Zibx 29 окт 2013 в 19:02

Ничто не мешает в ие создавать новый статический класс и подменять им тот что был. Так же скорее всего можно нанэстить прототипов и расширять через них.

termi 29 окт 2013 в 19:59

> Ничто не мешает в ие создавать новый статический класс и подменять им тот что был.
Мешает ограниченность VBScript'а. Всё-таки VBScript-объекты и JS-объекты совсем разные. Я знаю о чем говорю, потому что много эксперементировал с этим.
> Можно нанэстить прототипов и расширять через них.
Я не понял эту фразу, если честно.
В IE8- host-объекты, VBScript-объекты и объекты JS нельзя смешивать — т.е. нельзя назначить прототипом JS-объекта VBScript-объект и наоборот.
Там конечно есть нюансы, но я очень долго изучал этот вопрос — все пути решения в результате приводят к мелким и неудобным ограничениям, из-за которых просто невозможно универсально использовать какое-либо решение. Например, если создавать экземпляр host-класса, то у него нельзя сменить некоторые встроенные свойства — самое распространённое из которых это «toString», а могут быть недоступны на запись (и на Object.defineProperty) и такие свойства как «length» и т.д.

НЛО прилетело и опубликовало эту надпись здесь

termi 1 ноя 2013 в 14:22

В принципе, это работает, но есть нюанс:
1. DOM-объект нельзя назначить в качестве prototype JS-объекту
2. У DOM-объекта нельзя сменить prototype
3. У DOM-объекта нельзя установить некоторые свойства, например toString

Это же касается VB-объектов.

Короче, не юзабельно. Я очень долго экспериментировал.
Вот тут подробное обсуждение: github.com/kriskowal/es5-shim/issues/152

Finom 1 ноя 2013 в 15:20

3. У DOM-объекта нельзя установить некоторые свойства, например toString

У XDomainRequst можно.

Zibx 29 окт 2013 в 19:00

Есть решение под ие6. Делается через vbScript. Используется как минимум в dojotoolkit. То есть делается функция на вбскрипте, которой передаётся объект, свойство, которое хотим ловить и пара функций на гет\сет. Так как вбскрипт\жс имеют общий скоуп, то в ие можно звать одно из другого.

kidar2 29 окт 2013 в 18:24

Видит новый разработчик в команде строчку
mk.x = 44;
и гадает, будет что-то обновляться визуально в этой строчке или нет. А если да, то как найти обработчик?

Ещё проблемный момент:


mk.x = 44;
mk.x = 44;
....
mk.x = 44;
;

Обновлений в html будет много, а надо только одно, как этим управлять?

Finom 29 окт 2013 в 18:35

и гадает, будет что-то обновляться визуально в этой строчке или нет

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

А если да, то как найти обработчик?

Искать по bindElement

Ещё проблемный момент:

mk.x = 44; mk.x = 44;… mk.x = 44;;

Обновлений в html будет много, а надо только одно, как этим управлять?

Почему вы так решили? ДОМ изменяется только тогда, когда меняется значение свойства: github.com/finom/matreshka/blob/master/src/matreshka.js#L885

kidar2 29 окт 2013 в 18:54

Предложите, пожалуйста, какой-нибудь вариант решения.

Тут к сожалению нет решения, для js точно, в каком-нибудь TypeScript можно, а тут нет.

Искать по bindElement

Как-то нетривиально, а если ещё смешивать с какими-нибудь другими либами, вообще не представляю как люди будут ориентироваться в таком коде.

ДОМ изменяется только тогда, когда меняется значение свойства

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

-1

Zibx 29 окт 2013 в 19:04

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

Finom 29 окт 2013 в 19:07

Тут к сожалению нет решения, для js точно, в каком-нибудь TypeScript можно, а тут нет.

Приведите на TypeScript (он всё равно в JS компилируется)

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

Она и будет обновляться один раз. По разу на каждую привязку.

Как-то нетривиально, а если ещё смешивать с какими-нибудь другими либами, вообще не представляю как люди будут ориентироваться в таком коде.

Приводите, пожалуйста, примеры. Хотя бы скажите, где, в каком фреймворке и какие библиотеки используются.

PopeyetheSailor 29 окт 2013 в 21:38

Спасибо, заинтресовали. На выходных буду изучать кодовую базу. Не нашел на github roadmap, по возможности хотелось бы поучавствовать в разработке. А насколько сильная зависимость от jquery? Где он используется кроме поиска по DOM?

Finom 29 окт 2013 в 22:04

Роадмап пока только у меня в голове, давайте попробую:
— Допилить метод .addDependence (метод, который прописывает зависимость одного свойства от других). Лично мне этого часто не хватает. События иногда избыточны, а геттер мне не нравится из-за того, что вычисление значения может быть ресурсоёмким.

var mk = new MK;
mk.addDependence( 'perimeter', 'a b', function() { return ( this.a + this.b ) * 2} );
mk.addDependence( 'a', 'perimeter b', function() { return this.perimeter/2 - this.b } );
mk.addDependence( 'b', 'perimeter a', function() { return this.perimeter/2 - this.a } );

Здесь пример решения математической задачи, которая может зациклиться и убить окно, если формула не верна. Надо подумать, как избежать таких проблем.
— Реализовать возможность добавлять DOM события к привязанным элементам таким образом:

mk.on( 'click::myKey', f ); // dom_event::property

— Убрать зависимость от jQuery
— Сделать плагин MVVM
— Поправить опечатки в документации, допилить верстку (это только я могу сделать)

Зависимость от jQuery в основном в привязках, но она там серьезная.

student_ivan 29 окт 2013 в 22:52

Универсальный watch, который работает в том числе в IE8.
Но лично я использую Object Watch и доволен. IE8 просто динамлю…

MuLLtiQ 29 окт 2013 в 23:36

Так, стоп. Там же Object.defineProperty используется. Как это работает в IE8?

shai_xylyd 30 окт 2013 в 12:28

А где ссылка на TodoMVC?

Finom 30 окт 2013 в 12:39

finom.github.io/matreshka/todo/#/ вот здесь черновик todo.

Finom 30 окт 2013 в 12:43

Черновик потому что есть баги и код не до конца готов.

Slavenin999 30 окт 2013 в 15:50

а тесты производительности библиотеки при работе с большими и сложными формами или объемными UI проводились?

Finom 30 окт 2013 в 16:07

Если кратко, то нет. Но из опыта и ревизии кода могу утверждать, что код близок к оптимальному, кроме метода .unbindElement. Субъективная оценка скорости приложений со многими элементами — отлично. Я не заметил разницы между кодом с Матрешкой и без неё.

Slavenin999 30 окт 2013 в 16:25

благодарю. Хотелось бы побольше примеров с Matreshka.Object, а то один пример это очень мало…

Finom 30 окт 2013 в 16:35

Скоро будет статья об MK.Object. Примеры на сайте со временем доработаю.

Finom 30 окт 2013 в 16:45

А вот и она: habrahabr.ru/post/196886/

dmrt 30 окт 2013 в 17:07

А можно как-то подключить файлы исходники из src и запустить?

Finom 30 окт 2013 в 17:14

Да, просто подключайте их в порядке:
xclass.js (1)
matreshka.js (2)
object.mk.js (3 или 4)
array.mk.js (3 или 4)

dmrt 30 окт 2013 в 17:35

спасибо

dmrt 30 окт 2013 в 17:57

У меня еще один вопрос, может я жутко туплю конечно, я разбирался с исходным кодом, но так и не пойму

var mk = new MK();
mk.on( 'change:x', function() {
    alert( 'x is changed to ' + this.x );
});
mk.x = 2;

При выполнении последней строчки, что вызывается?
bindElement не вызывается

Finom 30 окт 2013 в 18:00

Алерт x is changed to 2

dmrt 30 окт 2013 в 18:07

нет, я имею ввиду, в matreshka.js что вызывается?
что вызывает эту функцию мою?
или это не в matreshka.js

Finom 30 окт 2013 в 18:13

Матрешка вызовет. Первое — создаете экземпляр Матрешки (MK и Matreshka — одно и то же), второе — навешиваете обработчик события изменения свойства x, третье — меняете x.
… Если я правильно понял ваш вопрос.

dmrt 30 окт 2013 в 21:03

Мне интересно именно что происходит после присвоения mk.x = 2;
какая функция матрешки срабатывает именно в этот момент
как срабатывает такой обработчи, мы просто изменили свойство объекта присвоип просто значение, не методом, а напрямую
как метрешка узнает, что это событие произошло?

Finom 30 окт 2013 в 21:09

Сработает сеттер (см. Object.defineProperty)

dmrt 30 окт 2013 в 21:20

аа, спасибо большое

lega 31 окт 2013 в 15:25

mk.x = 2;

1. В «ангуларе» у меня есть объекты с данными (прилетают с сервера), атрибуты которых привязаны, и я просто присваиваю объект — все привязки работают, пример:

mk.movie = { title:'die hard', year:1995 };
mk.movie = movie2;
mk.movie = movie3;

Как быть с матрешкой?

2. Как я понял, «привязки» срабатывают сразу после изменения значения — это не всегда хорошо, т.к. иногда придется учитывать порядок обновления переменных, плюс эти переменные не желательно использовать «повсеместно» т.к. они «тяжелые».
Мне больше нравится подход ангулара — обновление происходит когда все переменные посчитаны, данные обновлены.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий