Кирилл Морозов

Proxy в Javascript: Что за зверь. Use cases (сценарии использования)

2024-10-16T22:26:11.333Z

В JavaScript Proxy — это объект, который перехватывает операции с другим объектом, известным как целевой объект (target). Это мощный инструмент для добавления поведения или проверки доступа к объектам.

Ниже приведены несколько примеров использования (use cases) Proxy:

Валидация данных

Proxy можно использовать для проверки данных перед их установкой в объект.

const user = {
  name: 'John',
  age: 25
};

const proxyUser = new Proxy(user, {
  set(target, property, value) {
    if (property === 'age' && typeof value !== 'number') {
      throw new Error('Age must be a number');
    }
    target[property] = value;
    return true;
  }
});

proxyUser.age = 30;  // Всё нормально
proxyUser.age = 'thirty';  // Ошибка: Age must be a number

Логирование операций

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

const product = {
  name: 'Laptop',
  price: 1000
};

const proxyProduct = new Proxy(product, {
  get(target, property) {
    console.log(`Accessed property: ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Set property ${property} to ${value}`);
    target[property] = value;
    return true;
  }
});

console.log(proxyProduct.name);  // Логирует доступ к свойству "name"
proxyProduct.price = 1200;  // Логирует изменение свойства "price"

Ограничение доступа

Можно использовать Proxy для ограничения доступа к определённым свойствам объекта.

const secretData = {
  username: 'admin',
  password: '1234'
};

const proxySecretData = new Proxy(secretData, {
  get(target, property) {
    if (property === 'password') {
      throw new Error('Access to password is denied');
    }
    return target[property];
  }
});

console.log(proxySecretData.username);  // 'admin'
console.log(proxySecretData.password);  // Ошибка: Access to password is denied

Автоматическое создание свойств

Proxy может быть использован для автоматического создания свойств объекта при обращении к ним.

const data = {};

const proxyData = new Proxy(data, {
  get(target, property) {
    if (!(property in target)) {
      target[property] = 0;  // Если свойства нет, создать его с начальным значением 0
    }
    return target[property];
  }
});

console.log(proxyData.counter);  // Выведет 0, даже если свойства "counter" не было
proxyData.counter += 1;
console.log(proxyData.counter);  // Выведет 1

Наблюдение за изменениями

Proxy можно использовать для отслеживания изменений в объекте.

const user = {
  name: 'Alice',
  age: 30
};

const handler = {
  set(target, property, value) {
    console.log(`Property ${property} was changed from ${target[property]} to ${value}`);
    target[property] = value;
    return true;
  }
};

const proxyUser = new Proxy(user, handler);

proxyUser.name = 'Bob';  // Логирует изменение имени с 'Alice' на 'Bob'
proxyUser.age = 35;      // Логирует изменение возраста с 30 на 35

Псевдомассив с отрицательными индексами

Proxy может расширить функциональность массивов, добавив поддержку отрицательных индексов.

const array = [1, 2, 3, 4, 5];

const proxyArray = new Proxy(array, {
  get(target, property) {
    const index = Number(property);
    if (index < 0) {
      return target[target.length + index];
    }
    return target[property];
  }
});

console.log(proxyArray[-1]);  // 5 (последний элемент массива)
console.log(proxyArray[-2]);  // 4

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

А как вы используете Proxy?

ANGULAR: КАК ПРОВЕРИТЬ ПЕРЕДАННЫЕ ДАННЫЕ В NG-CONTENT

2024-06-07T09:17:33.761Z

Иногда возникает задача с проверкой пришли ли данные в ng-content компонента или нет.

Например у нас есть такой шаблон компонента:

<div class="block">
    <div *ngIf="title" class="block__title" innterHtml="title"></div>
    <div class="block__body">
        <ng-content></ng-content>
    </div>
</div>

Проблема в то сто если мы ничего не передали в ng-content то обёртка .block__body все равно отобразится, чего не хотелось бы.

Решение есть. Не очень красивое, но все же...

При вызове компонента оборачиванем данные в ng-template

<ng-template #сontent>
    <p>Body content...</p>
</ng-template>

В компоненте инициализируем переменную:

@ContentChild('content', { static: false }) content: TemplateRef<unknown>;

У после этого в шаблоне уже можем проверить - пришли данные или нет.

<div class="block">
    <div *ngIf="title" class="block__title" innterHtml="title"></div>
    <div *ngIf="content" class="block__body">
        <ng-container *ngTemplateOutlet="mainContent"></ng-container>
    </div>
</div>

Angular: Чем module federation отличается от library?

2023-02-28T20:09:19.327Z

Module Federation и библиотеки в Angular - это два разных концепта.

Библиотеки в Angular - это переиспользуемые наборы кода, которые вы можете создавать и использовать в разных проектах. Они представляют собой некоторую функциональность, которую можно импортировать и использовать в других частях вашего приложения. Это может быть что угодно, от набора компонентов и сервисов до функций и классов утилит.

Module Federation - это механизм, который позволяет нескольким приложениям, работающим на разных доменах, обмениваться кодом на основе модулей. Он позволяет разделить ваше приложение на небольшие, независимые части, которые можно развернуть на разных серверах и обмениваться между собой. Это особенно полезно, когда у вас есть несколько микросервисов, работающих на разных доменах, и вы хотите, чтобы они обменивались функциональностью, не копируя код между ними.

Таким образом, библиотеки в Angular предназначены для переиспользования кода в рамках одного приложения, тогда как Module Federation предназначен для обмена кодом между несколькими приложениями на разных доменах.

Module Federation позволяет обмениваться кодом между приложениями на основе модулей, что может помочь упростить разработку и ускорить время выхода на рынок. Он также позволяет создавать более гибкие и масштабируемые приложения, поскольку вы можете использовать только те модули, которые вам нужны, и не переносить весь код между приложениями.

В Angular вы можете использовать Module Federation, чтобы подключить удаленный код, который предоставляется другими приложениями, в ваше приложение. Это может быть полезно, если вы хотите добавить функциональность из другого приложения, например, использовать компоненты из другого приложения в своем приложении.

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

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

Module Federation, с другой стороны, предоставляет возможность обмениваться кодом между отдельными приложениями, работающими на разных доменах. Это позволяет создавать распределенные системы, которые могут легко масштабироваться и поддерживаться.

Кроме того, с помощью Module Federation вы можете создавать гибридные приложения, объединяя код, написанный на разных языках программирования и/или фреймворках, в одно приложение. Например, вы можете использовать React-компоненты в Angular-приложении или наоборот.

Таким образом, использование библиотек и Module Federation в Angular может помочь сделать ваше приложение более гибким, масштабируемым и удобным для разработки.

Как сменить пользователя git на mac os

2020-12-24T10:30:26.677Z

В общем сижу себе такой «крутой» удаленный работник в Крыму на шезлонге, пью квас, заедаю кукурузой. И тут хуяк, github мне пишет, мы вас просекли, вы работаете на территори, которая находится под санкциями США - типа пишите объяснительную чё за нахуй?

Глянул там надо на кучу вопросов ответить + приложить скан документа с пропиской. Охуенно…

Ну я же умный, зарегил новый аккаунт делаю git pull… а мне пишет что вы работаете из старого аккаунта.

Решается это довольно просто. На маке заходим в связку ключей (программа такая страндартная). Находим github.com и удаляем учетную запись. Все теперь при следующей работе с github из консоли попросит ввести новый логин и пароль. Ура!