Proxy для вложенных объектов

222
20 марта 2022, 16:00

Всем привет! Я относительно недавно пришёл в JS и время от времени люблю создавать свои велосипеды чтобы понять лучше сам язык и реализацию тех или иных вещей.

Недавно у меня возникла мысль — сделать свой мини-велосипед а-ля поделку на Vue. Я уже немного копался в этом фреймворке и писал на нём пару проектов и мне понравилось как там реализован метод data и его реактивность.

Я знаю что тамошняя реализация реактивности сделана на сеттерах и геттерах, но я слышал, что в 3 версии Vue это будут Proxy, поэтому решил покопаться в них.

У меня сразу возникла проблема со вложенностью объектов. Прокси просто не видел изменение во вложенном объекте. Я решил это примерно так:

let validator = {
  get(target, key) {
    if (typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], validator)
    } else {
      return target[key]
    }
  },
  set (target, key, value) {
    console.log(target)
    console.log(key)
    console.log(value)
    return true
  }
}
let person = {
      firstName: "alfred",
      lastName: "john",
      inner: {
        space: {
          styles: {
            padding: {
              top: 50
            }
          }
        }
      }
}
let proxy = new Proxy(person, validator)
proxy.inner.space.styles.padding.top = 100

И теперь изменение proxy.inner.space.styles.padding.top (не обращайте внимание на ключи, просто вписал первое попавшееся) действительно триггерится Proxy.

Но! Проблема заключается в том, что я не знаю, где именно находится то свойство, которое я меняю. В примере выше, всё что я знаю в Proxy про proxy.inner.space.styles.padding.top, это то, что это объект со свойством top, которое меняется. И Proxy даже не знает, что этот top относится к padding, что уж говорить о зависимостях ещё выше.

Это значит, что если в разных вложенных объектах будут одинаковые свойства, например (admin.name и user.name) тогда я никак не смогу отличить, чье же это имя поменялось, админа или пользователя.

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

Так как же правильно решить эту проблему? Чтобы было производительно и удобно. Я пробовал лазить в исходниках Vue, но, к сожалению, там слишком много кода и я не смог ничего найти.

READ ALSO
Якори и fullPage.js

Якори и fullPage.js

В общем задача такая, у меня есть макет, на котором нужно реализовать плагин fullPage, также там на главной странице имеются несколько якорей,...

69
Как вызвать функцию в функции?

Как вызвать функцию в функции?

Я пытаюсь решить следующую задачу:

84
Распарсить запрос в JSON

Распарсить запрос в JSON

Имеются запросы вида:

76
nodejs: async/await. Объясните новичку пару моментов [дубликат]

nodejs: async/await. Объясните новичку пару моментов [дубликат]

Будут ли эти записи равны? Это ведь то же самое, правильно я понимаю?

71