Advertisement
  1. Code
  2. HTML

Расширяем возможности HTML за счёт создания собственных тегов

Scroll to top
Read Time: 6 min

Russian (Pусский) translation by Stanislav Protasevich (you can also view the original English article)

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

Что такое пользовательский HTML тег?

Когда нам нужно сделать текст “жирным”, то мы пользуемся HTML тегом <b>. Если же нужно вывести список, то мы вероятнее всего воспользуемся тандемом <ul> и <li>. Браузеры используют разметку и таблицы стилей CSS, для того чтобы оформить внешний вид страницы, а в некоторых случаях и небольшой функционал.

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

В идеале, решение должно выглядеть как собственный тег — между знаками <>, который будет понятен браузеру.  Как и при работе с обычными HTML тегами у нас должна сохраниться возможность многократного использования тегов. Давайте посмотрим на реальный пример!

Пример #1: Создание HTML тега для Gravatar

Давайте создадим свой собственный тег для отображения изображения Gravatar по email адресу. Назовём наш тег <codingdude-gravatar>. Почтовый адрес будем указывать в атрибуте email.

Название тега может быть каким угодно. В нашем случае тег начинается с префикса codingdude-.  Префиксы следует писать чтобы исключить коллизии с названиями других пользовательских тегов. Также во избежание других конфликтов не следует выбирать названия идентичные текущему набору HTML тегов.

Для создания и тестирования нашего собственного тега нужно выполнить несколько шагов:

  • Создать отдельную папку; назовём её gravatar-custom-tag.
  • Поместить HTML файл под названием index.html в папку gravatar-custom-tag. Тут и будет храниться наш HTML код.
  • Создать JS файл под названием codingdude-gravatar.js в папке gravatar-custom-tag. В нём напишем JavaScript код, обеспечивающий работу нашего тега.

Давайте отредактируем файл index.html и наполним его следующим содержимым:

Если открыть файл index.html в браузере, то результат будет не слишком впечатляющим, ведь мы не реализовали функцию подгрузки изображения:

An example of the custom tagAn example of the custom tagAn example of the custom tag

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

Gravatar преобразует email в URL адрес PNG изображения.  Преобразование осуществляется путём хеширования почтового адреса через алгоритм MD5. URL адрес Gravatar изображения будет выглядеть так: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png.  Так что первое что нам нужно сделать — получить MD5 хеш. Для этого воспользуемся открытой библиотекой, которую подключим в файле index.html:

Теперь приступим к реализации нашего тега. Первая задача: написать код, который будет идентифицировать наш тег, а вторая — реализовать сам тега.  Весь код поместим в файл codingdude-gravatar.js:

В коде можно увидеть функцию customTag(), которая ищет все экземпляры нашего тега (через параметр tagName) и запускает функционал (через параметр fn).

Вызов document.createElement(tagName) необходим для таких браузеров как IE, чтобы сообщить о наличии на странице пользовательских тегов. В противном случае свои теги с названием tagName попросту не сработают.

Параметр fn — это функция где будет происходить вся “магия”. В нашем случае fn — вызов функции codingdudeGravatar(). Данная функция в качестве аргумента принимает ссылку на наш тег.  Если в нашем теге будет фигурировать атрибут email, то мы прогоним его через функцию md5() из открытой библиотеки.  Результат будет использоваться для формирования URL изображения, которое мы вставим в элемент.

В конце происходит вызов функции customTag() с названием нашего тега. Подобная функция может применяться многократно; вам просто нужно реализовать функцию с функционалом.

На этот раз при загрузке файла index.html в браузере мы увидим Gravatar по заданному email-у:

Viewing the Gravatar with the textViewing the Gravatar with the textViewing the Gravatar with the text

Пример #2: HTML тег круговой диаграммы

Прошлый пример создания пользовательского HTML тега был довольно-таки прост. Этот же принцип можно применить для создания тега любой сложности.

Теперь давайте реализуем что-то посложнее: круговую диаграмму. Для этого нам понадобится:

  • Создадим папку самого проекта и назовём piechart-custom-tag.
  • Внутри папки piechart-custom-tag создадим HTML файл и назовём его index.html. Тут будет храниться весь HTML код.
  • JavaScript реализацию тега поместим в файл codingdude-piechart.js.

Пользовательские теги зачастую используются как контейнеры с определённым функционалом. В нашем случае тег будет называться <codingdude-piechart> и представлять собой контейнер с круговой диаграммой. Если вы пропустили мой урок Как рисовать диаграммы с использованием JavaScript и HTML5 Canvas, то можете взглянуть. Мы воспользуемся уже готовым кодом создания графика и поместим его в наш тег.

Поправим файл codingdude-piechart.js и поместим функции из упомянутого урока:

  • drawLine()
  • drawArc()
  • drawPieSlice()
  • Piechart()

Теперь отредактируем файл index.html и напишем свой тег на месте которого появится диаграмма:

Ширину и высоту графика мы получим из атрибутов width и height. В атрибуте colors поместим список цветов, которыми будут окрашиваться доли.

Как было упомянуто ранее, данный тег сложнее предыдущего, а всё за счёт вложенных тегов.  В под-тегах <codingdude-data> мы перечислим данные по которым будет строиться график. Теперь давайте взглянем на код.

Отредактируем файл codingdude-piechart.js и после функции графика вставляем следующий код:

Функций customTag() точно такая же как и в Примере #1. Реализация тега <codingdude-piechart> помещена в функцию PiechartTag(). В частности данная функция:

  • Создаёт элемент <canvas> где будет отрисован график. Ширина и высота элемента canvas будет извлечена из атрибутов нашего пользовательского тега.
  • Ищет атрибут colors, преобразует его значение в массив цветов для элементов круговой диаграммы.
  • Последовательно подгружает элементы <codingdude-data> и помещает их в разметку графика.  Текст, указанный в данных элементах будет отображён браузером. Мы этого не хотим, поэтому удалим элементы со страницы после того как извлечём из них значения.
  • В конце вызывает конструктор Piechart() с необходимыми параметрами и выполняет функцию draw() для отрисовки графика.

Если зайти на страницу index.html, то можно увидеть следующий круговой график:

The custom tag is rendered as a pie chartThe custom tag is rendered as a pie chartThe custom tag is rendered as a pie chart

Наша круговая диаграмма выглядит очень даже ничего. Изменение значений атрибутов <codingdude-data> приведёт к изменению вида графика. Эта же техника применялась для создания Библиотеки графических объектов и HTML графики на CodeCanyon.

Infographic charts and graphics HTML tags libraryInfographic charts and graphics HTML tags libraryInfographic charts and graphics HTML tags library
Библиотека графиков с CodeCanyon

Данная библиотека содержит не только круговые диаграммы, но и другие типы графиков: линейные диаграммы, гистограммы и др.

В завершении

В этом уроке мы рассмотрели два примера создания пользовательских HTML тегов различной сложности. С помощью функции customTag() вы с лёгкостью можете создать свои собственные теги.

Если вам понравилась эта статья, то у нас есть ещё множество других уроков по HTML5 и схожим темам, так что не пропустите.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.