JavaScript Proxy шаблони: Овладяване на модификацията на поведението на обекти

Обектът Proxy в JavaScript предоставя мощен механизъм за прихващане и персонализиране на основни операции върху обекти. Тази способност отваря врати към широк спектър от шаблони за дизайн и напреднали техники за контролиране на поведението на обекти. Това изчерпателно ръководство изследва различните Proxy шаблони, илюстрирайки тяхната употреба с практически примери на код.

Какво е JavaScript Proxy?

Proxy обектът обвива друг обект (целта) и прихваща неговите операции. Тези операции, известни като капани (traps), включват достъп до свойства, присвояване, изброяване и извикване на функции. Proxy ви позволява да дефинирате персонализирана логика, която да се изпълнява преди, след или вместо тези операции. Основната концепция на Proxy включва "метапрограмиране", което ви позволява да манипулирате поведението на самия език JavaScript.

Основният синтаксис за създаване на Proxy е:

const proxy = new Proxy(target, handler);

• target: Оригиналният обект, който искате да проксирате.
• handler: Обект, съдържащ методи (капани), които дефинират как Proxy прихваща операциите върху целта.

Често срещани Proxy капани (Traps)

Обектът handler може да дефинира няколко капана. Ето някои от най-често използваните:

• get(target, property, receiver): Прихваща достъп до свойство (напр. obj.property).
• set(target, property, value, receiver): Прихваща присвояване на свойство (напр. obj.property = value).
• has(target, property): Прихваща оператора in (напр. 'property' in obj).
• deleteProperty(target, property): Прихваща оператора delete (напр. delete obj.property).
• apply(target, thisArg, argumentsList): Прихваща извиквания на функции (когато целта е функция).
• construct(target, argumentsList, newTarget): Прихваща оператора new (когато целта е конструкторна функция).
• getPrototypeOf(target): Прихваща извиквания на Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Прихваща извиквания на Object.setPrototypeOf().
• isExtensible(target): Прихваща извиквания на Object.isExtensible().
• preventExtensions(target): Прихваща извиквания на Object.preventExtensions().
• getOwnPropertyDescriptor(target, property): Прихваща извиквания на Object.getOwnPropertyDescriptor().
• defineProperty(target, property, descriptor): Прихваща извиквания на Object.defineProperty().
• ownKeys(target): Прихваща извиквания на Object.getOwnPropertyNames() и Object.getOwnPropertySymbols().

Proxy шаблони и случаи на употреба

Нека разгледаме някои често срещани Proxy шаблони и как те могат да бъдат приложени в реални сценарии:

1. Валидация

Шаблонът за валидация използва Proxy за налагане на ограничения при присвояване на свойства. Това е полезно за гарантиране на целостта на данните.

const validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('Възрастта не е цяло число');
      }
      if (value < 0) {
        throw new RangeError('Възрастта трябва да бъде неотрицателно цяло число');
      }
    }

    // Поведението по подразбиране за съхраняване на стойността
    obj[prop] = value;

    // Индикира успех
    return true;
  }
};

let person = {};
let proxy = new Proxy(person, validator);

proxy.age = 25; // Валидно
console.log(proxy.age); // Изход: 25

try {
  proxy.age = 'young'; // Хвърля TypeError
} catch (e) {
  console.log(e); // Изход: TypeError: Възрастта не е цяло число
}

try {
  proxy.age = -10; // Хвърля RangeError
} catch (e) {
  console.log(e); // Изход: RangeError: Възрастта трябва да бъде неотрицателно цяло число
}

Пример: Представете си платформа за електронна търговия, където данните на потребителите се нуждаят от валидация. Proxy може да наложи правила за възраст, формат на имейл, сила на паролата и други полета, предотвратявайки съхраняването на невалидни данни.

2. Виртуализация (Мързеливо зареждане)

Виртуализацията, известна още като мързеливо зареждане, забавя зареждането на скъпи ресурси, докато те не станат действително необходими. Proxy може да действа като заместител на реалния обект, зареждайки го само когато се достъпи негово свойство.

const expensiveData = {
  load: function() {
    console.log('Зареждане на скъпи данни...');
    // Симулира времеемка операция (напр. извличане от база данни)
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          data: 'Това са скъпите данни'
        });
      }, 2000);
    });
  }
};

const lazyLoadHandler = {
  get: function(target, prop) {
    if (prop === 'data') {
      console.log('Достъп до данни, зареждане ако е необходимо...');
      return target.load().then(result => {
        target.data = result.data; // Съхранява заредените данни
        return result.data;
      });
    } else {
      return target[prop];
    }
  }
};

const lazyData = new Proxy(expensiveData, lazyLoadHandler);

console.log('Първоначален достъп...');
lazyData.data.then(data => {
  console.log('Данни:', data); // Изход: Данни: Това са скъпите данни
});

console.log('Последващ достъп...');
lazyData.data.then(data => {
  console.log('Данни:', data); // Изход: Данни: Това са скъпите данни (заредено от кеша)
});

Пример: Представете си голяма социална медийна платформа с потребителски профили, съдържащи многобройни детайли и свързани медии. Незабавното зареждане на всички данни на профила може да бъде неефективно. Виртуализацията с Proxy позволява първо да се зареди основна информация за профила, а след това да се заредят допълнителни детайли или медийно съдържание само когато потребителят навигира до тези секции.

3. Логване и проследяване

Proxy-тата могат да се използват за проследяване на достъпа до свойства и модификации. Това е ценно за отстраняване на грешки, одит и наблюдение на производителността.

const logHandler = {
  get: function(target, prop, receiver) {
    console.log(`GET ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set: function(target, prop, value) {
    console.log(`SET ${prop} на ${value}`);
    target[prop] = value;
    return true;
  }
};

let obj = { name: 'Alice' };
let proxy = new Proxy(obj, logHandler);

console.log(proxy.name); // Изход: GET name, Alice
proxy.age = 30; // Изход: SET age на 30

Пример: В приложение за съвместно редактиране на документи, Proxy може да проследява всяка промяна, направена в съдържанието на документа. Това позволява създаването на одитна пътека, активиране на функционалност за отмяна/връщане (undo/redo) и предоставяне на информация за приноса на потребителите.

4. Изгледи само за четене

Proxy-тата могат да създават изгледи само за четене на обекти, предотвратявайки случайни модификации. Това е полезно за защита на чувствителни данни.

const readOnlyHandler = {
  set: function(target, prop, value) {
    console.error(`Не може да се зададе свойство ${prop}: обектът е само за четене`);
    return false; // Индикира, че операцията по задаване е неуспешна
  },
  deleteProperty: function(target, prop) {
    console.error(`Не може да се изтрие свойство ${prop}: обектът е само за четене`);
    return false; // Индикира, че операцията по изтриване е неуспешна
  }
};

let data = { name: 'Bob', age: 40 };
let readOnlyData = new Proxy(data, readOnlyHandler);

try {
  readOnlyData.age = 41; // Хвърля грешка
} catch (e) {
  console.log(e); // Не се хвърля грешка, защото 'set' капанът връща false.
}

try {
    delete readOnlyData.name; // Хвърля грешка
} catch (e) {
    console.log(e); // Не се хвърля грешка, защото 'deleteProperty' капанът връща false.
}

console.log(data.age); // Изход: 40 (непроменено)

Пример: Представете си финансова система, в която някои потребители имат достъп само за четене до информация за сметки. Proxy може да се използва, за да попречи на тези потребители да променят салда по сметки или други критични данни.

5. Стойности по подразбиране

Proxy може да предоставя стойности по подразбиране за липсващи свойства. Това опростява кода и избягва проверки за null/undefined.

const defaultValuesHandler = {
  get: function(target, prop, receiver) {
    if (!(prop in target)) {
      console.log(`Свойство ${prop} не е намерено, връща се стойност по подразбиране.`);
      return 'Стойност по подразбиране'; // Или друга подходяща стойност по подразбиране
    }
    return Reflect.get(target, prop, receiver);
  }
};

let config = { apiUrl: 'https://api.example.com' };
let configWithDefaults = new Proxy(config, defaultValuesHandler);

console.log(configWithDefaults.apiUrl); // Изход: https://api.example.com
console.log(configWithDefaults.timeout); // Изход: Свойство timeout не е намерено, връща се стойност по подразбиране. Стойност по подразбиране

Пример: В система за управление на конфигурации, Proxy може да предостави стойности по подразбиране за липсващи настройки. Например, ако конфигурационен файл не указва време за изчакване на връзката с базата данни, Proxy може да върне предварително определена стойност по подразбиране.

6. Метаданни и анотации

Proxy-тата могат да прикачват метаданни или анотации към обекти, предоставяйки допълнителна информация, без да променят оригиналния обект.

const metadataHandler = {
  get: function(target, prop, receiver) {
    if (prop === '__metadata__') {
      return { description: 'Това са метаданни за обекта' };
    }
    return Reflect.get(target, prop, receiver);
  }
};

let article = { title: 'Въведение в Proxy-тата', content: '...' };
let articleWithMetadata = new Proxy(article, metadataHandler);

console.log(articleWithMetadata.title); // Изход: Въведение в Proxy-тата
console.log(articleWithMetadata.__metadata__.description); // Изход: Това са метаданни за обекта

Пример: В система за управление на съдържанието, Proxy може да прикачва метаданни към статии, като информация за автора, дата на публикуване и ключови думи. Тези метаданни могат да се използват за търсене, филтриране и категоризиране на съдържание.

7. Прихващане на функции

Proxy-тата могат да прихващат извиквания на функции, което ви позволява да добавяте логване, валидация или друга логика за предварителна или последваща обработка.

const functionInterceptor = {
  apply: function(target, thisArg, argumentsList) {
    console.log('Извикване на функция с аргументи:', argumentsList);
    const result = target.apply(thisArg, argumentsList);
    console.log('Функцията върна:', result);
    return result;
  }
};

function add(a, b) {
  return a + b;
}

let proxiedAdd = new Proxy(add, functionInterceptor);

let sum = proxiedAdd(5, 3); // Изход: Извикване на функция с аргументи: [5, 3], Функцията върна: 8
console.log(sum); // Изход: 8

Пример: В банково приложение, Proxy може да прихваща извиквания на транзакционни функции, като регистрира всяка транзакция и извършва проверки за измами, преди да изпълни транзакцията.

8. Прихващане на конструктори

Proxy-тата могат да прихващат извиквания на конструктори, което ви позволява да персонализирате създаването на обекти.

const constructorInterceptor = {
  construct: function(target, argumentsList, newTarget) {
    console.log('Създаване на нов екземпляр на', target.name, 'с аргументи:', argumentsList);
    const obj = new target(...argumentsList);
    console.log('Създаден е нов екземпляр:', obj);
    return obj;
  }
};

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let ProxiedPerson = new Proxy(Person, constructorInterceptor);

let person = new ProxiedPerson('Alice', 28); // Изход: Създаване на нов екземпляр на Person с аргументи: ['Alice', 28], Създаден е нов екземпляр: Person { name: 'Alice', age: 28 }
console.log(person);

Пример: В рамка за разработка на игри, Proxy може да прихваща създаването на игрови обекти, като автоматично присвоява уникални ID-та, добавя компоненти по подразбиране и ги регистрира в игровия енджин.

Разширени съображения

• Производителност: Въпреки че Proxy-тата предлагат гъвкавост, те могат да внесат допълнително натоварване върху производителността. Важно е да тествате и профилирате кода си, за да сте сигурни, че ползите от използването на Proxy надвишават цената на производителността, особено в критични за производителността приложения.
• Съвместимост: Proxy-тата са сравнително ново допълнение към JavaScript, така че по-старите браузъри може да не ги поддържат. Използвайте откриване на функции или полифилове, за да осигурите съвместимост с по-стари среди.
• Отменяеми Proxy-та: Методът Proxy.revocable() създава Proxy, което може да бъде отменено. Отмяната на Proxy предотвратява прихващането на всякакви по-нататъшни операции. Това може да бъде полезно за целите на сигурността или управлението на ресурси.
• Reflect API: Reflect API предоставя методи за извършване на поведението по подразбиране на Proxy капаните. Използването на Reflect гарантира, че вашият Proxy код се държи последователно със спецификацията на езика.

Заключение

JavaScript Proxy-тата предоставят мощен и универсален механизъм за персонализиране на поведението на обекти. Овладявайки различните Proxy шаблони, можете да пишете по-здрав, поддържан и ефективен код. Независимо дали прилагате валидация, виртуализация, проследяване или други напреднали техники, Proxy-тата предлагат гъвкаво решение за контролиране на начина, по който се достъпват и манипулират обекти. Винаги вземайте предвид последиците за производителността и осигурявайте съвместимост с целевите си среди. Proxy-тата са ключов инструмент в арсенала на съвременния JavaScript разработчик, позволяващ мощни техники за метапрограмиране.

Допълнително проучване

• Mozilla Developer Network (MDN): JavaScript Proxy
• Изследване на JavaScript Proxy-та: Статия в Smashing Magazine