После решений Google и Mozilla для веб-компонентов теперь настала очередь Microsoft войти в это пространство со своим публичным выпуском библиотеки X-Tag . Официальный сайт определяет это следующим образом:
X-Tag — это поддерживаемая Microsoft библиотека JavaScript с открытым исходным кодом, которая объединяет семейство API-интерфейсов стандартных веб-компонентов W3C, предоставляя компактный многофункциональный интерфейс для быстрой разработки компонентов. Хотя X-Tag предлагает функциональные хуки для всех API веб-компонентов (пользовательских элементов, теневого DOM, шаблонов и импорта HTML), для работы ему требуется только поддержка пользовательских элементов. В отсутствие собственной поддержки пользовательских элементов X-Tag использует набор полифилов, совместно используемых с каркасом Polymer от Google.
Другими словами, X-Tag для Microsoft — это то же самое, что Polymer для Google . Единственное, что является общим для них обоих, — это базовый полифилл, который обеспечивает поддержку веб-компонентов в неподдерживаемых браузерах.
Чем X-Tag отличается от полимера?
Polymer объединяет все четыре технологии веб-компонентов, а именно: импорт HTML , пользовательские элементы , Shadow DOM и шаблоны HTML в одном пакете. Он предоставляет разработчику простой в использовании API для создания пользовательских веб-компонентов. С другой стороны, X-Tag предоставляет только API пользовательских элементов для создания пользовательских веб-компонентов. Конечно, вы также можете использовать другие API веб-компонентов вместе с библиотекой X-Tag.
Разве X-Tag не является проектом Mozilla?
Да, это было, но это больше не так. Немного покопавшись, мне удалось выяснить, что первоначальный разработчик проекта X-Tag Даниэль Бухнер когда-то работал в Mozilla, когда создавал библиотеку. Но с тех пор он перешел в Microsoft и продолжил проект. Кроме того, он был единственным вкладчиком в библиотеку с помощью бывшего Mozillian. Следовательно, теперь это проект, поддерживаемый Microsoft, основанный бывшим Mozillian.
Начало работы с X-Tag
В этой статье мы создадим пользовательский элемент с использованием библиотеки X-Tag для встраивания вида улиц карты Google с использованием следующей разметки:
<google-map latitude="40.7553231" longitude="-73.9752458"></google-map> Пользовательский элемент <google-map> будет иметь два атрибута, latitude и longitude , чтобы указать координаты местоположения. Поскольку эти атрибуты являются необязательными, мы также назначим значения по умолчанию для каждого из них на случай, если разработчик не сможет определить их в разметке.
Давайте начнем с включения библиотеки JavaScript X-Tag в <head> нашего документа.
<!DOCTYPE html> <html> <head> <!-- X-Tag library including the polyfill --> <script src="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"></script> </head> <body> <!-- Custom element markup will appear here --> <script> <!-- The behavior of the custom element will be defined here --> </script> </body> </html>
Важно включить библиотеку X-Tag в
<head>документа. Это делается для того, чтобы он был загружен и полностью проанализирован до того, как механизм рендеринга обнаружит пользовательскую разметку элемента, которую мы будем использовать внутри<body>.
Определение пользовательского элемента
В отличие от Polymer, процесс создания пользовательского элемента с помощью X-Tag полностью основан на JavaScript. Библиотека X-Tag предоставляет кучу полезных методов, обратных вызовов и свойств для определения пользовательского поведения для нашего элемента. Типичный скелет для создания пользовательского элемента с X-Tag выглядит следующим образом:
xtag.register('google-map', { content: '', lifecycle: { created : function(){ /* Called when the custom element is created */ }, inserted : function(){ /* Called when the custom element is inserted into the DOM */ }, removed : function(){ /* Called when the custom element is removed from the DOM */ }, attributeChanged: function(attrName, oldValue, newValue){ /* Called when the attribute of the custom element is changed */ } }, accessors : {}, methods : {}, events : {} });
-
register()— это самый важный метод в библиотеке. Он принимает имя пользовательского элемента в качестве первого аргумента, за которым следует определение объекта. Как следует из названия, это отвечает за регистрацию пользовательского элемента в DOM. -
content— довольно часто, пользовательскому элементу может потребоваться дополнительная разметка для структуры или представления. Это принимает строку HTML или строку многострочного комментария для вставки разметки в DOM. -
lifecycle— содержит полезные методы обратного вызова, предназначенные для различных этапов жизненного цикла пользовательского элемента. -
accessors— предоставляет общий интерфейс для доступа к атрибутам объекта, установщикам и получателям и связывает их с соответствующими атрибутами HTML. Когда атрибуты связаны с получателем / установщиком, их состояния всегда остаются синхронизированными. -
methods— пользовательскому элементу, вероятно, потребуются некоторые собственные уникальные методы для обеспечения желаемой функциональности. Просто добавьте объектmethodsобъекту определенияxtag.register()верхнего уровня иxtag.register()все определяемые пользователем методы. -
events— Это ответственно за присоединение событий к пользовательскому элементу. Ключи этого объекта — это имена событий, которые вы хотите прикрепить к пользовательскому элементу, например,tap,focusи т. Д.
Основная идея заключается в том, чтобы встроить карту Google с помощью iframe и указать URL-адрес src в следующем формате:
https://www.google.com/maps/embed/v1/streetview?key=<API_KEY>&location=<LATITUDE>,<LONGITUDE>
Чтобы получить API_KEY , выполните шаги, описанные здесь . Как только вы получите API_KEY , мы создадим iframe внутри created метода обратного вызова объекта жизненного цикла и определим свойство src в указанном выше формате.
// Insert your API key here var API_KEY = <API_KEY>; xtag.register('google-map', { lifecycle: { created: function() { var iframe = document.createElement('iframe'); iframe.width = 600; iframe.height = 600; iframe.frameBorder = 0; iframe.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + API_KEY + '&location=40.7553231,35.3434'; this.appendChild(iframe); } } });
Приведенный выше код работает, но нам нужно избавиться от жестко закодированных значений координат в iframe.src и вместо этого iframe.src значения непосредственно из атрибутов пользовательских элементов. Для этого мы будем использовать объект accessors с именами атрибутов, формирующих ключи. Мы связываем их с атрибутами HTML, объявляя attributes: {} .
accessors: { latitude: { attribute: {}, set: function(value) { this.xtag.data.latitude = value; }, get: function() { return this.getAttribute('latitude') || "40.7553231"; // Default value } }, longitude: { attribute: {}, set: function(value) { this.xtag.data.longitude = value; }, get: function() { return this.getAttribute('longitude') || "-73.9752458"; // Default value } } }
Затем мы можем использовать эти переменные напрямую, указав URL-адрес src :
iframe.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + API_KEY+'&location=' + this.latitude+',' + this.longitude;
Применяя последние штрихи
Стилизация пользовательского элемента аналогична стилизации любого другого тега HTML. Классы, идентификаторы и селекторы атрибутов работают должным образом с пользовательскими элементами. Например, мы добавим box-shadow и border-radius в наш недавно созданный пользовательский элемент <google-map> .
google-map { display: inline-block; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); padding: 1em; border-radius: .25em; }
Использовать пользовательский элемент теперь так же просто, как включить следующую разметку в <body> :
<!-- Use the custom element --> <google-map latitude="40.7553231" longitude="-73.9752458"></google-map>
Конечный результат виден в CodePen ниже:
Хотя поддержка браузеров для веб-компонентов немного поверхностна , наша демонстрация с использованием библиотеки X-Tag с полифилом должна работать во всех современных браузерах, включая IE9 и выше.
Последние мысли
По сравнению с Polymer, X-Tag предоставляет гораздо более простой API для понимания и реализации пользовательских элементов, в основном из-за отсутствия сложных функций, которыми обладает Polymer. Если вы намерены сохранять свою настройку легкой и гибкой, и у вас нет подходящего варианта использования для других API-интерфейсов веб-компонентов, то X-Tag наверняка будет подходящим кандидатом для этой работы.