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

Template, Shadow DOM, і Custom Elements дозволяють вам будувати UI компоненти простіше і швидше. Однак, це не найефективніший спосіб завантаження ресурсів HTML, CSS і JavaScript окремо.

Для завантаження бібліотек типу jQuery UI або Bootstrap потрібні окремі теги для JavaScript, CSS, Web шрифтів. Все стає простіше при використанні Web Components з кількома залежностями.

HTML імпорти дозволяють завантажувати ресурси як сукупність декількох файлів цього типу.

Пропоную вам ознайомитися з відео по даній темі.



Використання HTML импортов

Щоб завантажити файл HTML, додайте тег
link
,
import
'ом у параметрі
rel
та
href
, що містить шлях до потрібного файлу. Наприклад, якщо ви хочете завантажити файл під назвою
component.html
на
index.html
, то все має виглядати так:
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, якщо є.

Порядок виконання
Браузери обробляють контент по порядку. Це означає, що
script
на початку HTML буде завантажений раніше, ніж те ж саме, але в кінці. Врахуйте, що деякі браузери очікують завершення виконання скрипта перед тим, як завантажувати наступні елементи.

Щоб уникнути блокування тегом
script
, що залишився HTML можна використовувати атрибути
async
/
defer
(також можна перемістити всі скрипти в кінець сторінки).
defer
вказує на те, що код можна запустити лише після завантаження HTML.
async
дозволяє браузеру виконувати ці дві дії паралельно.

Отже, як же працюють імпорти?

Скрипт всередині HTML імпорту працює як звичайний тег
script
з атрибутом
defer
. У прикладі нижче
index.html
запустить
script1.js
та
script2.js
component.html
перед виконанням
script3.js
.
index.html

<link rel="import" href="component.html"> // 1.
<title>Приклад імпорту</title>
<script src="script3.js"></script> // 4.

component.html

<script src="js/script1.js"></script> // 2.
<script src="js/script2.js"></script> // 3.

  1. Завантажується
    component.html
    index.html
    і очікує виконання;
  2. Завантажується
    script1.js
    на
    component.html
    ;
  3. Завантажується
    script2.js
    на
    component.html
    після
    script1.js
    ;
  4. Завантажується
    script3.js
    на
    index.html
    після
    script2.js
    .
Зауважте, що додавання атрибута
async
на
link[rel="import"]
розцінюється як атрибут
async
в тезі
script
. Він не буде блокувати HTML. Це може потенційно поліпшити продуктивність вашого проекту.

За рамками відбувається
Насправді, HTML імпорти не можуть повністю перенести файл з іншого джерела. Наприклад, ви не можете імпортувати http://example.com/ сторінку http://webcomponents.org/.

Щоб уникнути цього обмеження, використовуйте CORS (Cross Origin Resource Sharing). Щоб дізнатися більше про цю технологію, прочитайте цю статтю.

Об'єкти
window
та
document
в імпортованих файлах
Раніше я згадував про те, що імпортуються JavaScript будуть запущені на сторінці. На жаль, таке не можна сказати про імпортованих HTML файлах. Щоб таке відбувалося і з ними, треба дописати трошки скриптів.

Остерігайтеся того, що об'єкт
document
імпортований файл буде посилатися на сторінку оригіналу.

Використовуючи написаний раніше код в якості прикладу, змусимо
document
на
index.html
та
component.html
посилатися на
document
на
index.html
.

Внесемо невеликі зміни в наші файли.
index.html

var link = document.querySelector('link[rel="import"]');
link.addEventListener. ('load', function(e) {
var importedDoc = link.import;
// importedDoc points to the document under component.html
});

Для отримання
document
component.html
доповніть ваш код
document.currentScript.ownerDocument
.
component.html

var mainDoc = document.currentScript.ownerDocument;
// mainDoc points to the document under component.html

Якщо ви використовуєте
webcomponents.js
, скористайтесь
document._currentScript
замість
document.currentScript
. Нижнє підкреслення
currentScript
використовується для підтримки браузерів, не здатних працювати з цим компонентом без використання цього знака.
component.html

var mainDoc = document._currentScript.ownerDocument;
// mainDoc points to the document under component.html

Написавши ось це на початку вашого скрипта, можна легко отримати доступ до
document
component.html
, навіть якщо браузер не підтримує HTML імпорти.
document._currentScript = document._currentScript || document.currentScript;


Питання продуктивності

Один з плюсів використання импортов — можливість самостійно розподілити навантаження сторінки і порядок обробки імпортованих об'єктів. Але це ще й означає, що 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
, об'єкти нашої статті не завантажують повторно один і той же матеріал. Дивлячись на останній приклад, досить обернути тег
script
HTML імпортом, і цей ресурс не буде завантажений двічі.

Але є й інша проблема: тепер файлів для завантаження стало більше. Що робити, якщо таких буде не два, а набагато більше?

На щастя, нам на допомогу йде інструмент під назвою «Vulcanize».

Об'єднання мережевих запитів
Vulcanize — інструмент для об'єднання декількох HTML файлів в один, з допомогою чого число підключень до мережі в цілях завантаження необхідних документів скорочується. Ви можете встановити його за допомогою
npm
і використовувати в командному рядку. Також існують аналоги для
grunt
і
gulp
, за допомогою чого можна зробити «Vulcanize» частиною вашого процесу складання.

Для об'єднання файлів
index.html
використовуємо наступний код:
$ vulcanize-o vulcanized.html index.html

При виконанні цієї команди всі залежності
index.html
будуть з'єднані у файлі
vulcanized.html
.

Прочитати більше про даному інструменті можна тут.

Поєднання импортов з Template, Shadow DOM і Custom Elements

Давайте використовувати HTML ipmport разом з іншими цікавими інструментами, розглянутими раніше.

Для тих, хто не знає про дані технології: templates визначення вмісту елементів може бути декларативним. Shadow DOM
styles
,
ID
та
classes
елемента можна використовувати трохи інакше. Custom Elements можна створити власні HTML теги. Непогано, чи не так?

Об'єднання импортов із власними веб-компонентами отримає модульність і можливість багаторазового використання. Будь-хто зможе їх використовувати, додавши лише тег
link
.
x-component.html

<template id="template">
<style>
...
</style>
<div id="container">
<img class="webcomponents" src="http://webcomponents.org/img/logo.svg">
<content select="h1"></content>
</div>
</template>
<script>
// This element will be registered to index.html
// Because `document` here means the one in index.html
var XComponent = document.registerElement('x-component', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
</script>

index.html

...
<link rel="import" href="x-component.html">
</head>
<body>
<x-component>
<h1>This is Custom Element</h1>
</x-component>
...

Зверніть увагу, що об'єкт
document
на
x-component.html
такий же, як і в
index.html
. Не потрібно писати нічого складного, все працює саме і за вас.

Підтримувані браузери

HTML імпорти підтримуються браузерами Chrome і Opera. Firefox на даний момент відклав додавання цієї фічі, так як «у них є більш пріоритетні завдання».

Щоб перевірити даний метод на сумісність з конкретним браузером, відвідайте chromestatus.com або caniuse.com. Для додавання можливості роботи цієї технології в інших браузерах, скористайтесь webcomponents.js (раніше platform.js).

Ресурси

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

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.