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

Главная->Уроки по html->Расширяем возможности HTML за счёт создания собственных тегов

В этом уроке я покажу процесс создания собственных 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 и наполним его следующим содержимым: 1 <html> 2 <head> 3 <script type="text/javascript" src="codingdude-gravatar.js"></script> 4 </head> 5 <body> 6 This is my Gravatar picture: 7 <codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar> 8 </body> 9 </html> Если открыть файл index.html в браузере, то результат будет не слишком впечатляющим, ведь мы не реализовали функцию подгрузки изображения: Возможность создавать пользовательские теги возникла благодаря браузерам, которые игнорируют незнакомые теги, встречающиеся в документе. Для того чтобы наш тег подгружал Gravatar изображение по электронному адресу, нужно понимать как работает сам сервис Gravatar. Gravatar преобразует email в URL адрес PNG изображения. Преобразование осуществляется путём хеширования почтового адреса через алгоритм MD5. URL адрес Gravatar изображения будет выглядеть так: http://www.gravatar.com/avatar/EMAIL_MD5_HASH.png. Так что первое что нам нужно сделать — получить MD5 хеш. Для этого воспользуемся открытой библиотекой, которую подключим в файле index.html: 1 <html> 2 <head> 3 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script> 4 <script type="text/javascript" src="codingdude-gravatar.js"></script> 5 </head> 6 <body> 7 This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" /> 8 </body> 9 </html> Теперь приступим к реализации нашего тега. Первая задача: написать код, который будет идентифицировать наш тег, а вторая — реализовать сам тега. Весь код поместим в файл codingdude-gravatar.js: 01 function customTag(tagName,fn){ 02 document.createElement(tagName); 03 // поиск всех вхождений пользовательского тега в документе 04 var tagInstances = document.getElementsByTagName(tagName); 05 // для каждого тега запускаем функцию 06 for ( var i = 0; i < tagInstances.length; i++) { 07 fn(tagInstances[i]); 08 } 09 } 10 11 function codingdudeGravatar(element){ 12 // отрисовка элемента 13 if (element.attributes.email){ 14 // извлечение почтового адреса из атрибута email 15 var email = element.attributes.email.value; 16 var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png"; 17 element.innerHTML = "<img src='"+gravatar+"'>"; 18 } 19 } 20 21 customTag("codingdude-gravatar",codingdudeGravatar); В коде можно увидеть функцию customTag(), которая ищет все экземпляры нашего тега (через параметр tagName) и запускает функционал (через параметр fn). Вызов document.createElement(tagName) необходим для таких браузеров как IE, чтобы сообщить о наличии на странице пользовательских тегов. В противном случае свои теги с названием tagName попросту не сработают. Параметр fn — это функция где будет происходить вся “магия”. В нашем случае fn — вызов функции codingdudeGravatar(). Данная функция в качестве аргумента принимает ссылку на наш тег. Если в нашем теге будет фигурировать атрибут email, то мы прогоним его через функцию md5() из открытой библиотеки. Результат будет использоваться для формирования URL изображения, которое мы вставим в элемент <img>. В конце происходит вызов функции customTag() с названием нашего тега. Подобная функция может применяться многократно; вам просто нужно реализовать функцию с функционалом. На этот раз при загрузке файла index.html в браузере мы увидим Gravatar по заданному email-у: Пример #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 и напишем свой тег на месте которого появится диаграмма: 01 <html> 02 <head> 03 <script type="text/javascript" src="codingdude-piechart.js"></script> 04 </head> 05 <body> 06 <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88"> 07 <codingdude-data category="Classical music">10</codingdude-data> 08 <codingdude-data category="Alternative rock">14</codingdude-data> 09 <codingdude-data category="Pop">2</codingdude-data> 10 <codingdude-data category="Jazz">12</codingdude-data> 11 </codingdude-piechart> 12 </body> 13 </html> Ширину и высоту графика мы получим из атрибутов width и height. В атрибуте colors поместим список цветов, которыми будут окрашиваться доли. Как было упомянуто ранее, данный тег сложнее предыдущего, а всё за счёт вложенных тегов. В под-тегах <codingdude-data> мы перечислим данные по которым будет строиться график. Теперь давайте взглянем на код. Отредактируем файл codingdude-piechart.js и после функции графика вставляем следующий код: 01 // сюда нужно вставить функцию из прошлого урока 02 // Как рисовать диаграммы с использованием JavaScript и HTML5 Canvas 03 //... 04 function customTag(tagName,fn){ 05 document.createElement(tagName); 06 // поиск всех вхождений пользовательского тега в документе 07 var tagInstances = document.getElementsByTagName(tagName); 08 // для каждого тега запускаем функцию 09 for ( var i = 0; i < tagInstances.length; i++) { 10 fn(tagInstances[i]); 11 } 12 } 13 14 function PiechartTag(element){ 15 // add the canvas where to draw the piechart 16 var canvas = document.createElement("canvas"); 17 // get the width and height from the custom tag attributes 18 canvas.width = element.attributes.width.value; 19 canvas.height = element.attributes.height.value; 20 element.appendChild(canvas); 21 22 // get the colors for the slices from the custom tag attribute 23 var colors = element.attributes.colors.value.split(","); 24 25 // load the chart data from the <codingdude-data> sub-tags 26 var chartData = {}; 27 var chartDataElements = element.querySelectorAll("codingdude-data"); 28 for (var i=0;i<chartDataElements.length;i++){ 29 chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent); 30 //remove the data sub-tags 31 chartDataElements[i].parentNode.removeChild(chartDataElements[i]); 32 } 33 34 // call the draw() function 35 new Piechart( 36 { 37 canvas:canvas, 38 data:chartData, 39 colors:colors 40 } 41 ).draw(); 42 } 43 44 customTag("codingdude-piechart",PiechartTag); Функций customTag() точно такая же как и в Примере #1. Реализация тега <codingdude-piechart> помещена в функцию PiechartTag(). В частности данная функция: Создаёт элемент <canvas> где будет отрисован график. Ширина и высота элемента canvas будет извлечена из атрибутов нашего пользовательского тега. Ищет атрибут colors, преобразует его значение в массив цветов для элементов круговой диаграммы. Последовательно подгружает элементы <codingdude-data> и помещает их в разметку графика. Текст, указанный в данных элементах будет отображён браузером. Мы этого не хотим, поэтому удалим элементы со страницы после того как извлечём из них значения. В конце вызывает конструктор Piechart() с необходимыми параметрами и выполняет функцию draw() для отрисовки графика. Если зайти на страницу index.html, то можно увидеть следующий круговой график: В завершении В этом уроке мы рассмотрели два примера создания пользовательских HTML тегов различной сложности. С помощью функции customTag() вы с лёгкостью можете создать свои собственные теги.