Всем привет! Я фронтенд-разработчик и надеюсь, что вы тоже программист. Как часто вам нужно внедрять абстракции в код JavaScript? Никогда? О, давайте это изменим!

Вы что-нибудь знаете о Intersection Observers API? Если да, отлично! Вы можете загуглить «Написание абстрактных компонентов в Vue.js» и получить множество скопированных статей о написании компонентов с отложенным рендерингом для достижения производительности рендеринга страницы в DOM. Я не буду здесь обсуждать этот пример, давайте посмотрим на мой собственный пример.

Я и моя команда слишком часто внедряем новые функции, некоторые из них будут запущены в производство через 2–3 дня. Чтобы не пугать пользователей удивительными функциями и новыми ошибками, мы скрываем их разрешениями и показываем только администраторам. Когда администратор думает, что сейчас самое время показать это пользователям, он меняет конфигурацию в панели разрешений и открывает остальные функции.

Хорошо, давайте напишем код.

Позвольте мне познакомить вас с простой функцией:

Как мы можем использовать эту функцию в качестве вычисляемого метода в шаблонах Vue?

Основная идея: если у пользователя есть разрешение только на чтение, он может видеть поле, но оно будет отключено. Если у пользователя нет на это разрешения, вместо поля он ничего не увидит. Какие проблемы в этом шаблоне?

Первый, его слишком сложно читать. Мы вызываем функцию userHasPermission два раза для каждого поля. Копировать-вставить на передний план!

Второй: представьте ситуацию, когда вам нужно добавить дополнительные правила для отключения поля. Например, если у команды нет дальнейшего обучения, поле «Время следующего обучения» необходимо отключить без запроса разрешения. Без решения, которое я предлагаю вам в этой статье, возможно, это будет выглядеть так:

В этом коде есть смешение ответственности! Ах .. как решить нашу проблему?

Хотя мы связываем одно конкретное разрешение с одним или несколькими полями, нам необходимо иметь возможность связывать разрешение и поле в одной строке кода. Представьте, что у нас есть абстрактный компонент (например, transition или keep-alive) с именем permission-control, который может отвечать за поведение только с разрешениями. Ему нужно получить разрешение в реквизите и манипулировать своими детьми. Посмотрите на пример использования:

И отредактированный пример с дополнительными правилами для последнего поля:

Оба примера выглядят очень наглядно. Новый участник нашей команды легко поймет бизнес-логику этой формы. Какая реализация этого полезного (надеюсь) permission-control? Идея основана на мощности render функций в фреймворке Vue.js и функциональности слотов. Посмотрите на прототип:

Есть ли у этого фрагмента кода какие-то ограничения?

Вам нужно обернуть только один элемент управления этим компонентом, все элементы управления должны поддерживать disabled имя реквизита, а элемент управления должен существовать. Если у вас есть дополнительные правила для скрытия элемента управления с атрибутом v-if, вы получите ошибку Can not read property 0 of undefined. В любом случае вы можете избежать этой ошибки, если поставите проверки наличия дочерних элементов вверху функции render:

if (!this.$slots.default) {
  return null;
}

Аннотация ... Абстрактный компонент Vue ... Я помню кое-что еще из других статей о компонентах для API-интерфейса наблюдателя пересечений ...

Да ты прав! Vue имеет недокументированное ключевое слово abstract: true для абстрактных компонентов. Но я действительно не знаю, как это изменение описывает поведение. Я не вижу дополнительных комментариев в других статьях. Если я не знаю причины использования этого слова, я не буду просить вас использовать его. Это хороший тезис, чтобы исследовать его в отдельной статье.

Спасибо за чтение, товарищи!