Может быть, вы слышали о JavaScript Proxy и думаете: «Эй, это круто и все такое, но для чего мне его использовать?» Не волнуйтесь, я тоже так думал до недавнего времени, когда мне понадобилось комплексное решение. И ВЗГЛЯД, косвенный посредник, известный только как «Прокси», возник из пепла и поджег все текстовые редакторы по всей известной вселенной.

В моем случае использования я хотел вернуть объект (больше похожий на словарь), который будет содержать пары ключ / значение для каждой локализованной строки в приложении. Но волшебный соус здесь в том, что любая отсутствующая строка должна возвращать смайлик обезьяны "Видеть-не-зло" (🙈), потому что это означает, что разработчик неправильно набрал букву или, возможно, строка не была переведена вообще! Обезьяна не осудит вас.

Давайте посмотрим на пример JSON, который генерируется, когда старый добрый парень из-за пруда посещает наше приложение (кто-то использует en-GB).

{
  "color": "Colour",
  "elevator": "Lift",
  "pants": "Trousers"
}

Сначала вы могли подумать, что ES5 Getter может решить нашу проблему, потому что вы можете переопределить свойство (например, elevator) и проверить, не определено ли значение. Но как насчет ключей, о которых вы не знаете? Вы не знаете того, чего не знаете.

Войдите в Прокси, где Брюс Ли играет веб-разработчика, решившего помочь захватить пропавшие ключи, ответственные за смерть своей сестры.

let obj = JSON.parse(json);
let l10n = new Proxy(obj, {
  get(target, name) {
    if (typeof target[name] === 'undefined') {
      console.error(`Localized string is missing: ${name}`);
      return '🙈';
    }
    return target[name];
  }
});

Мы называем объект локализации l10n, потому что мы ленивы, и это сокращение обычно используется в соответствии с Википедией и другими ленивыми разработчиками. Ни у кого нет времени печатать. Почему я вообще пишу эту статью?

А теперь вернемся к теме использования прокси ... поговорим о React.

React великолепен, и вы должны использовать его, потому что Интернет сказал вам об этом, и что один блоггер написал об этом в своем блоге, так что не оспаривайте этот блог. Погрузитесь в блогосферу.

const SelectAColor = (props) => (<div>
  <label>{props.l10n.color}:</label>
  <select>{props.colors.map(c =>
    <option value={c}>
      {c}
    </option>)}
  </select>
</div>);

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

США выглядят неплохо! Великобритания выглядит великолепно! Мексика - это ¡Ay, caramba! Мы забыли перевести на испанский! Обезьяна не лжет, но обезьяна прощает.

То же самое произойдет, если вы неправильно написали props.l10n.color, например props.l10n.colr, и в этом случае обезьяна снова посетит вас, прикрывая глаза от вашей некомпетентности.

Если вы хотите посмотреть демоверсию, посетите CodeSandbox, чтобы увидеть код в действии и стать свидетелем великолепного обезьяньего безумия!

Первоначально опубликовано на www.ceriously.com 1 января 2018 г.