Вы когда-нибудь хотели преобразовать строку, написанную PascalCase или camelCase, в kebab-case через дефис? Конечно, есть; у всех нас есть. Меня спрашивают, как это сделать, может быть, 42 раза в день, так что вот как вы это делаете.

Регулярное выражение

В JavaScript:

Как насчет PHP?

Что насчет С#?

Как это работает?

Регулярное выражение ищет буквенно-цифровой символ нижнего регистра [a-z0–9], за которым следует буквенный символ верхнего регистра [A-Z], оба в группе захвата (xyz). Мы используем $1 и $2, потому что хотим сохранить символы, но поместить что-то между ними.

Если бы вы заменили его на $1.$2, вы бы получили такой результат: my.paragraph.element

Когда бы вы использовали это?

Это можно использовать для автоматического вывода имен классов, например преобразования MyParagraph в my-paragraph, что удобно для автоматической загрузки элементов ShadowDOM (или аналогичного в PHP).

Пример:https://jsfiddle.net/tbkhczd7/1/

Давайте посмотрим на два файла: index.html и файл main.js.

В приведенном ниже HTML-коде вы можете видеть, что у нас есть два пользовательских тега с именами my-paragraph и labeled-input.

Они определяются с помощью HTML-тега template. Узнайте больше о MDN, чтобы лучше понять их возможности и узнать, как использовать <slot>, если вы незнакомы.

Эти шаблоны составляют половину того, что определяет наши элементы ShadowDOM. Они обеспечивают структуру, позволяют настраивать и использовать теги <style> с ограниченной областью действия для визуального представления.

Другая необходимая половина — это JavaScript для определения и инициализации элементов. Здесь довольно много кода, но суть такова:

  • Расширьте HTMLElement, чтобы абстрагировать общую функциональность
  • Вывести конкретные классы из вышеупомянутого
  • Свяжите наши классы с нашими шаблонами

Обратите внимание, что вы можете расширить любой элемент, а не только HTMLElement; если вы хотите усилить кнопку, вы можете сделать что-то вроде этого:

class MyButton extends HTMLButtonElement { ... }

Ниже вы увидите, что в методе static attach(...) мы используем наш преобразователь PascalCase, упомянутый ранее в этой статье.

Прочитайте код, и мы наверстаем упущенное ниже.

Функциональность, предоставляемая в LabeledInputElement и MyParagraphElement, является просто демонстрационной, чтобы проиллюстрировать, как они могут охватывать события/логику.

В нашем методе static attach(template) { ... } вы можете увидеть нулевую проверку против template, после чего он пытается преобразовать имя нашего класса в ожидаемый HTML-тег. Здесь можно добавить дополнительную логику, чтобы убедиться, что элемент существует, но для примера мы предполагаем, что наши связанные шаблоны должны существовать.

Внизу пример без комментариев перебирает все доступные теги <template> и меняет местами kebab-case на PascalCase в попытке найти определенный класс. Опять же, вы должны добавить сюда логику, чтобы убедиться, что то, что вы ищете, действительно существует, но это демонстрация.

Используя наши два преобразования строк, мы можем легко создавать и автоматически загружать пользовательские элементы ShadowDOM, просто используя базовые определения; два шага:

  1. Создайте <template> с уникальным идентификатором kebab-case
  2. Создайте класс с похожим идентификатором PascalCase

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