Двусторонний binding данных с ECMAScript-2015 без Proxy

[lega]

Необходим функционал перехвата доступа к свойствам объекта, но без создания лишних структур в виде proxy объектов. Для этого отлично подойдет функционал геттеров и сеттеров (Object.defineProperty)

Обложить все и вся пропертями (Object.defineProperty) вы называете «без создания лишних структур», лишнего как раз будет поболее, причем с порчей (трансформацией) исходного объекта.
Такой подход уже давно применяется в vue.js, aurelia, Matreshka.js и других фреймворках, так что открытия америки тут нет.

трансформация DOM элемента

Непонятно зачем, во первых это будет тормозить*, во вторых, чтобы отслеживать изменения DOM есть готовое апи MutationObserver (и старые аналоги), в третих, в SPA это не используют, всегда идет изменение DOM из js, поэтому в js это и отслеживается.

[IPri]

Обложить все и вся пропертями...

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

… открытия америки тут нет.

— А никто и не претендует.

Непонятно зачем, во первых это будет тормозить*

— Тоже были такие подозрения, но вроде как речь идет о модификации исходных прототипов. Или сама цепочка тоже влияет. Буду рад если дадите ссылки где почитать.

… есть готовое апи MutationObserver

был не в курсе, спасибо почитаю.

[IPri]

Самое забавное, что MutationObserver не отслеживает изменение данных на input`ах и textarea`ах. И это справедливо в обе стороны JS->DOM, DOM->JS.

Кстати вопрос по '… всегда идет изменение DOM из js'. А как же вводимые пользователем данные?

[lega]

А как же вводимые пользователем данные?

Как и везде — addEventListener.

[IPri]

Ну так «EventListener» это как раз наоборот — реакция на изменение данных DOM.
Т.е. данные DOM изменяются непосредственно пользователем путем ввода символов и JS тут ни при чем.
Или я вас неправильно понял?

[sinires]

Спасибо за статью, было интересно увидеть ваше виденье данной задачи.
Сравнивать данные реализации не корректно, так как в комментариях я отвечал: > "Я не открывал Америку. Мне было интересно сделать то, что сделано через Proxy. Дань памяти почившему O.o". Мы реализуем разные подходы, используя разные технологии с разными целями.

[IPri]

Вам, спасибо за комментарий.
Почему ж, некорректно? Мне кажется вполне себе. Да подходы различаются, но цель то одна — связывание данных.
Я тоже надо сказать открытия не делал.

[IPri]

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

[IPri]

Что значит

нельзя навесить геттер-сеттер на DOM елемент.

А у меня разве ни это самое и делается? Если внимательно посмотрите, то в DOM всё в геттерах и сеттерах

[IPri]

Да, я тоже поначалу думал, что при вводе символов на «инпутах» вызывается setter. Но оказалось все «хитрее», и единственный способ это отследить навесить обработчик на событие. Хотя вызов setter`а для обновления DOM был бы вполне логичен.