Введение в HTML импорт

Введение в HTML импорт

425
ПОДЕЛИТЬСЯ

Шаблон, Shadow DOM, пользовательские элементы разрешают для вас создавать составляющие пользовательского интерфейса, проще и скорее. Но , это не самый действенный метод загрузки ресурсов, HTML, CSS, и JavaScript раздельно.
Все становится проще, когда с помощью интернет-компонентов с несколькими зависимостями. Для загрузки библиотеки jQuery UI, Bootstrap либо требуются отдельные теги для JavaScript, CSS и интернет-шрифты.
HTML импорта дозволяет загружать ресурсы как совокупа пары файлов этого типа.
Предлагаю для вас ознакомиться с видео на эту тему.

К примеру, раз вы желаете скачать файл с заглавием component.html в index.html все обязано смотреться так: С помощью HTML-импорт
Чтоб загрузить HTML-файл, добавить тег link с импорта’ω параметр rel, href, содержащий путь к подходящему файлу.
index.html
<link rel=»import» href=»component.html» >

Вы сможете скачать любые ресурсы, в том числе скриптов, таблиц стилей и шрифтов:
component.html
<link rel=»stylesheet» href=»css/style.css»>
<script src=»js/script.js»></script>

doctype, html, head, body необязательно. HTML импортирует автоматом загружает все указанные элементы, добавить их к страничке и запустить JavaScript, раз он доступен.
ПОРЯДОК ВЫПОЛНЕНИЯ
Браузеры обработать содержимое в порядке. Обратите внимание, что некие браузеры в ожидании завершения выполнения скрипта, до этого чем вы сможете скачать последующие элементы. Это значит, что скрипт в начале HTML-код будет загружен, до этого чем то же самое, но, в конце концов.
defer показывает на то, что код может выполняться лишь опосля загрузки HTML. async дозволяет браузеру делать эти два деяния параллельно. Чтоб избежать блокировки script tag оставшиеся вы сможете применять HTML-атрибуты async / defer (вы сможете также переместить все скрипты в конце странички).
Так как импорт?
Скрипт снутри HTML-импорт работает как обыденный тэгscript с атрибут defer. В примере ниже index.html запустить script1.js и script2.js снутри component.html перед казнью script3.js.
<title>пример импорта</title>
<script src=»script3.js»></script> // 4. index.html
<link rel=»import» href=»component.html»> // 1.
component.html
<script src=»js/script1.js»></script> // 2. <script src=»js/script2.js»></script> // 3.

Загружен component.html от index.html и ожидать выполнения;
Загружен script1.js в component.html;
Загружен script2.js в component.html опосля script1.js;
Загружен script3.js в index.html опосля script2.js.
Он не будет перекрыть HTML. Обратите внимание, что добавление асинхронного атрибут link[rel=»import»] рассматривается как async-атрибут в теге script. Это потенциально может повысить производительность вашего проекта.
К примеру, нельзя импортировать в http://example.com/ стр. За то, что происходит
На самом деле, HTML импорт не в состоянии передать полный файл из другого источника. http://webcomponents.org/.
Чтоб выяснить больше о данной технологии читайте в данной статье. Чтоб избежать этого ограничения, применять CORS (Cross Origin Resource Sharing).
Окна и объекты документа в импортированных файлов
Ранее я упоминал, что завезенные из других стран JavaScript будет работать на страничке. К огорчению, этого нельзя огласить о импортируемых файлов HTML. Сделать это случиться и с ними, для вас придется написать маленький скрипт.
Остерегайтесь, что объект document в импортируемый файл будет ссылаться на начальную страничку.
Внедрение ранее написанного кода, как пример, сделать документ в index.html и component.html см. документ в index.html.
Внести маленькие конфигурации в наши файлы.
index.html
var link = документ.querySelector(‘link[rel=»import»]’);
ссылка.addEventListener(‘load’, function(e) {
var importedDoc = ссылка.импорта;
// importedDoc показывает на документ, на основании component.html
});

Для получения документа от component.html дополнить ваш код с документа.currentScript.ownerDocument.
component.html
var mainDoc = документ.currentScript.ownerDocument;
// mainDoc показывает на документ, на основании component.html

Раз вы используете webcomponents.js используйте документ._currentScript заместо документа.currentScript. Подчеркивания в currentScript употребляется для поддержки браузеров, которые не сумеют работать с сиим компонентом, без использования этого знака.
документ._currentScript = документ._currentScript || документ.currentScript; component.html
var mainDoc = документ._currentScript.ownerDocument;
// mainDoc показывает на документ, на основании component.html

Писать это в начале вашего скрипта, вы сможете просто получить доступ к документу от component.html даже раз браузер не поддерживает HTML импорта.
Но это также значит, что HTML-код будет возрастать. На самом деле, есть несколько точек для сопоставления: Трудности с производительностью
Одним из преимуществ использования импорта — способность распределять нагрузку на страничке и порядок переработки, импортированных объектов.
К примеру: В согласовании
Что делать, раз несколько вставленных документы относятся к одной и той же библиотеки?
Загрузить jQuery в обоих документах, которые при импорте эти документы библиотеки в итоговом документе будут выполняться два раза.
index.html
<link rel=»import» href=»component1.html»>
<link rel=»import» href=»component2.html»>
component1.html
<script src=»js/jquery.js»></script>
component2.html
<script src=»js/jquery.js»></script>

Эта неувязка чрезвычайно просто решается импорта.
В отличие от тега script, объекты наши статьи, повторно не загружать один и тот же материал. Смотря на крайний пример, довольно обернуть HTML тег скрипта импорта, и этот ресурс не будет загружена в два раза.
Что делать, раз такового быть не два, а еще больше? Но есть еще одна неувязка: сейчас загрузка стала больше.
К счастью, наша помощь-это инструмент, который именуется «Приклеится».
Также есть аналоги грунт и глоток, что вы сможете сделать «Вулканизирует» часть процесса сборки. Ассоциация сетевых запросов
Вулканизирует — инструмент объединить несколько HTML-файлов в один, при этом количество подключений к сети для того, чтоб скачать нужные документы миниатюризируется. Вы сможете установить его с помощью npm и с помощью командной строчки.
Для слияния файлов index.html используйте последующий код:
$ вулканизирует-o vulcanized.html index.html

При выполнении данной команды все зависимости index.html будет подключен в файле vulcanized.html.
Подробнее о этом инструменте тут.
Сочетание импорт из шаблона, Shadow DOM, пользовательские элементы
Давайте применять HTML ipmport совместно с иными увлекательными инструментами, которые дискуссировались ранее.
С помощью пользовательских частей вы сможете сделать собственный свой HTML-теги. С Shadow DOM стили, идентификаторы и классы элемента можно применять незначительно по-другому. Для тех, кто не знает о этих разработках: шаблоны определяют содержание пользовательский элемент не может быть декларативным. Отлично, не так ли?
</style>
<div id=»container»>
<img class=»webcomponents» src=»http://webcomponents.org/img/logo.svg»>
<content select=»h1″></content>
</div>
</template>
<script>
// Этот элемент будет зарегистрирован index.html
// Поэтому что «документ» значит тут лишь один в index.html
var XComponent = документ.registerElement(‘x-компонента’, {
макет: объект.сделать(HTMLElement.макет {
createdCallback: {
значение: function() {
var root=.createShadowRoot();
var template = документ.querySelector(‘#template’);
var clone = документ.importNode(шаблон.содержание, true);
корневой.appendChild(клон);
}
}
})
});
</script> x-component.html
<шаблон id=»template»>
<style>
… Ассоциация импорт своим интернет-составляющие получают модульности и повторного использования. Кто-то сумеет применять их, добавив лишь тег link.
Не нужно писать ничего сложного, все работает само и для вас. index.html
… Обратите внимание, что объект документа в x-component.html же, как и в index.html. <link rel=»import» href=»x-component.html»>
</head>
<body>
<x-компонента>
<h1>это пользовательский элемент</h1>
</x-component>

Поддерживаемые браузеры
HTML импорта поддерживаются Chrome и Opera. Firefox в настоящее время отложил добавить эту функцию, так как они имеют наиболее высочайший ценность задачки.
Чтоб проверить этот способ для сопоставимости с определенным браузером, посетите chromestatus.com либо caniuse.com. Чтоб добавить эта разработка работает в остальных браузерах, используйте webcomponents.js (ранее platform.js).
Ресурсов
Таковым образом, мы исследовали HTML импорта. Раз вы желаете, чтоб далее углубиться в эту тему, Вы сможете поглядеть тут:

HTML импорта: #include для web — HTML5Rocks
HTML Импорт spec
habrahabr.ru