Сокращение JS-кода в вашей связке Vue

Недавно я получил типичную задачу для библиотеки компонентов пользовательского интерфейса.
Создание атомарного видеокомпонента.

Сделать это несложно: возьмите embed url, например, один из тех, что есть на Youtube, и задайте его в качестве атрибута src iframe.

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

Следующие примеры кода являются упрощенными.

Мой первый подход — это, вероятно, то, что первым придет в голову каждому разработчику Vue, столкнувшемуся с этой проблемой.

<script setup lang="ts">
interface Props {
  url: string
  ratio?: [number, number]
}
withDefaults(defineProps<Props>(), {
  ratio: () => [776, 437],
})
</script>

<template>
  <iframe
    :src="url"
    :style="{ aspectRatio: `${ratio[0]} / ${ratio[1]}` }"
  />
</template>
Вход в полноэкранный режим Выйти из полноэкранного режима

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

<UiVideo url="somewhere" :ratio="[3, 1]"/>
Войти в полноэкранный режим Выйти из полноэкранного режима

Но мы добавили prop и молча вычислили prop только для значения свойства CSS.

Это не очень важно для SPA, но что если вы создаете сайт, где вы хотите, чтобы JS был как можно меньше?

Конечно, мы можем использовать Astro 😉

Но что если нет?

Один из членов команды предложил отличную идею, которая позволяет обойтись без JS ценой небольшого количества дополнительного CSS!

<script setup lang="ts">
interface Props {
  url: string
}
</script>

<template>
  <iframe :src="url" style="aspect-ratio: var(--video-ratio, 776 / 437)" />
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

Лишний реквизит исчез!
Потребление компонента и настройка соотношения теперь будет выглядеть следующим образом

<UiVideo url="somewhere" style="--video-ratio: 3 / 1"/>
Вход в полноэкранный режим Выход из полноэкранного режима

Вы также можете создать CSS-класс и применить его вместо использования встроенного стиля.

Очень удобно! Хотя я думаю, что первая версия все же немного более дружелюбна к разработчикам (TS + ваша IDE предложит ratio в качестве prop, когда вы начнете вводить <UiVideo ...), вторая делает все, что вам нужно, и даже чище с некоторой точки зрения (CSS из style или class, данные + логика из props).

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

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

Оцените статью
Procodings.ru
Добавить комментарий