Kuzatiluvchilar

Proksi-serverni qaytarish orqali “ob’ektni kuzatilishi mumkin bo’lgan” “makeObservable(target)” funksiyasini yarating.

Bu qanday ishlashi kerak:

function makeObservable(target) {
  /* sizning kodingiz */
}

let user = {};
user = makeObservable(user);

user.observe((key, value) => {
  alert(`SET ${key}=${value}`);
});

user.name = "John"; // alerts: SET name=John

Boshqacha qilib aytadigan bo’lsak, makeObservable tomonidan qaytarilgan ob’ekt xuddi asl ob’ektga o’xshaydi, lekin har qanday xususiyat o’zgarishida “ishlovchi” funksiyasini o’rnatuvchi observe(handler) usuliga ega.

Xususiyat o’zgarganda, handler(kalit, qiymat) xususiyat nomi va qiymati bilan chaqiriladi.

P.S. Ushbu vazifada, iltimos, faqat xotiraga yozish haqida ehtiyot bo’ling. Boshqa operatsiyalar ham xuddi shunday tarzda amalga oshirilishi mumkin.

Yechim ikki qismdan iborat:

Qachonki .observe(handler) chaqirilsa, keyinroq qo’ng’iroq qilishimiz uchun ishlov beruvchini biror joyda eslab qolishimiz kerak. Biz ishlovchilarni to’g’ridan-to’g’ri ob’ektda saqlashimiz mumkin, bunda o’z belgimizdan mulk kaliti sifatida foydalanamiz.
Har qanday o’zgarish bo’lsa, ishlov beruvchilarga qo’ng’iroq qilish uchun bizga set trapli proksi-server kerak.

let handlers = Symbol("handlers");

function makeObservable(target) {
  // 1. Qiymatlarni yaratish
  target[handlers] = [];

  // Kelgusi qo'ng'iroqlar uchun ishlov beruvchi funksiyasini massivda saqlang
  target.observe = function (handler) {
    this[handlers].push(handler);
  };

  // 2. O'zgarishlarni boshqarish uchun proksi-server yarating
  return new Proxy(target, {
    set(target, property, value, receiver) {
      let success = Reflect.set(...arguments); // operatsiyani ob'ektga yo'naltirish
      if (success) {
        // mulkni o'rnatishda xatolik bo'lmasa
        // barcha ishlovchilarni chaqiring
        target[handlers].forEach((handler) => handler(property, value));
      }
      return success;
    },
  });
}

let user = {};

user = makeObservable(user);

user.observe((key, value) => {
  alert(`SET ${key}=${value}`);
});

user.name = "John";