Еще один пример абстрактного компонента Vue.js — используем render

Еще один пример абстрактного компонента Vue.js - используем render

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

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

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

Хорошо, давайте напишем код. Позвольте представить вам простую функцию:

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

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

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

В этом коде есть путаница с ответственностями! И как решить нашу проблему? Хотя мы связываем одно конкретное разрешение с одним или несколькими полями, нам нужно иметь возможность связывать разрешение и поле в одной строке кода. Представьте, что у нас есть абстрактный компонент (например, transition или keep-alive) с именем permission-control, которое может отвечать за поведение только с разрешениями. Нужно взять разрешение в свойстве и манипулировать с его производными. Посмотрите на пример использования:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

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

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

Абстракция … Абстрактный компонент Vue… Я помню, что еще, связанное с этим, для intersection observer API…

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

Автор: Michael Lelyakin

Источник: https://medium.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий