Всем привет! Я фронтенд-разработчик и надеюсь, что вы тоже программист. Как часто вам нужно внедрять абстракции в код 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
для абстрактных компонентов. Но я действительно не знаю, как это изменение описывает поведение. Я не вижу дополнительных комментариев в других статьях. Если я не знаю причины использования этого слова, я не буду просить вас использовать его. Это хороший тезис, чтобы исследовать его в отдельной статье.
Спасибо за чтение, товарищи!