Веб-разработка может быть крайне трудной и утомительной, но, по крайней мере, инструменты и среда стремительно совершенствуются. Именно поэтому мне так нравится узнавать все больше о веб-компонентах.
Веб-компоненты обозначают несколько разных технологий. Однако, в целом они отображают невероятные изменения в сети интернет. Я считаю их настоящим "Web 2.0." подходом, который предлагает много интересного. У вас впервые получится определить новые структурные элементы (метки, поведение, дизайн), следуя веб-стандартам. Вы сможете расширить сеть интернет и это круто.
Шаблоны
Все, кто работал с шаблонами в JavaScript, знают, насколько это мощный инструмент. Шаблоны позволяют вам создавать многократно используемые блоки контента, которые можно добавить к DOM ("объектная модель документа") с помощью JavaScript. В качестве простого примера, представьте, что используете AJAX для получения контента, который возвращается в виде чистых данных.Хотя вы, разумеется, можете просто создать крупные блоки HTML в строках JavaScript, они достаточно быстро становятся громоздкими. Таким образом, появились различные фреймворки шаблонов JavaScript.
Вы сможете использовать метки шаблонов в своем HTML-документе. Контент в метке не выполняется, пока вы не выполните клонирование шаблона и не добавите его к DOM. Следовательно, загрузка изображений или блоков скриптов будет происходить только, когда необходимо.
В отличии, к примеру, от Handlebars.js, здесь не происходит замена токенов. Зато требуется меньше дополнительного кода.
Больше о спецификации вы можете прочитать здесь: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html.
Теневая модель документа (Shadow DOM)
Для меня теневая модель документа является самым запутанным понятием. Не буду вдаваться в его красочное описание. В сущности, это способ создать для контента систему стилей типа "черный ящик".Приведу пример. Представьте, что пишите HTML для кого-нибудь. Ваш HTML представляет собой лишь метку H1 и абзац. Вам хочется стилизовать данный контент, но тогда вам нужно убедиться, что ваш CSS не конфликтует с родительским документом. Есть альтернатива: контейнеры iFrame, но они создают другие трудности.
Опять-таки, я не знаток Shadow DOM. Больше информации ищите здесь: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html.
Пользовательские элементы
Самая прекрасная часть веб-компонентов -- в любом случае, для меня, -- пользовательские элементы. Как вы уже догадались, они позволяют создавать новые элементы HTML. Сейчас для их разметки используют префикс x-, но если вам когда-нибудь хотелось определить собственную разметку, никаких проблем.Вы получите поддержку в течении всего жизненного цикла (то есть, будете знать, когда ваш элемент загружен, показан и т.д.) и даже сможете использовать это свойство для расширения существующих элементов. Безусловно, можно связать собственные события JavaScript и "подмешать" как шаблоны, так и теневую модель документа.
Если вам случалось использовать что-то вроде jQuery UI Tabs для добавления вкладок на сайт, веб-компоненты позволят вам выполнить тоже самое посредством веб-стандартов.
Импорт HTML
И наконец, импорт HTML. Фактически, как только вы определили пользовательский элемент, применили к нему макет через теневую модель документа и пользовательское поведение, у вас будет возможность создать многократно используемый шаблон, которым можно поделиться с другими. Подобно тому, как вы импортируете таблицу стилей, тег ссылки позволит вам импортировать и пользовательские элементы.Спецификацию можно найти здесь: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html.
Ну и что, я не могу сейчас этого использовать!
Уверен, вы спрашиваете, насколько хорошо поддерживаются вышеперечисленные свойства. На данный момент достаточно слабо. По сути, пользовательские элементы не поддерживаются совсем. Все, что сейчас доступно -- функции Chrome и ночных билдов Firefox. Спецификации еще разрабатываются. Имейте в виду, что большинство главных браузеров переходят на постоянное обновление. Если вы по прежнему считаете, что вам не нужно обращать внимание на веб-стандарты, вы терпите фиаско как веб-разработчик.источник
Комментариев нет:
Отправить комментарий