Головні новини
Ви тут: Головна / Цікаве / Імпорт файлів в HTML

Імпорт файлів в HTML



HTML імпорт є одним із способів включити зовнішній HTML-документ і його веб-компоненти на сторінці без відповідного AJAX запиту або завантаження IFRAME. Зважаючи цієї можливості, імпорт HTML може послужити прискоренню часу завантаження сторінки, відкрити нові можливості для повторного використання коду, а також поліпшити інтеграцію деяких популярних сервісів, таких як Google Maps.

На момент написання статті, технологія імпорту HTML є робочим проектом W3C, а це значить, що вона ще не є веб-стандартом і поки не підтримується у всіх браузерах. Однак, HTML імпорт можна вже зараз використовувати через Polymer.

HTML імпорт як інструмент для повторного використання та агрегування

Розробники програмного забезпечення, у тому числі і веб-розробники, намагаються не дублювати код, а скоріше розподіляти його за моделями, об’єктам, функціям. Завдяки розробникам Дейву Томасу і Ендрю Ханту, цей підхід зазвичай називають DRY-розробкою або DRY-програмуванням, що значить в перекладі з англійської «не повторюй себе”.

У певному сенсі, HTML імпорт підтримує розвиток DRY. Ось приклад – уявіть, що у вас є три повідомлення, які повторюються на кількох веб-сторінках. Замість того щоб копіювати і вставляти або передруковувати ці повідомлення для кожної сторінки або проекту, вони можуть бути включені за допомогою HTML імпорту.

Для прикладу візьмемо HTML-файл з назвою messages.html:

<div class="message-success">
 <h2>Success</h2>
 <p>Whatever you just did worked.</p>
</div>

<div class="message-failure">
 <h2>Failure</h2>
 <p>What a disappointment.</p>
</div>

<div class="message-ego-boost">
 <h2>You are amazing.</h2>
</div>

Для повторного використання контенту з messages.html, для початку включіть документ через HTML імпорт. Це здійснюється додаванням тега з атрибутом rel, рівним “import” і атрибутом href, приймаючим значення messages.html:

<link rel="import" href="messages.html">

Ми можемо написати невеликий уривок, використовуючи JavaScript, який звертається до документа messages.html і завантажує повідомлення “success” на сторінці. Кожне з наступних повідомлень (або всі разом) також можуть бути завантажені аналогічним чином, в залежності від того, як вам хотілося б використовувати їх. Ось код:

var htmlImport = document.querySelector('link[rel="import"]');
var htmlDoc = htmlImport.import;
var htmlMessage = htmlDoc.querySelector('.message-success');
document.body.appendChild(htmlMessage.cloneNode(true));

Даний код виконує наступні задачі:

Вибирає елемент link
Імпортує файл
Витягує імпортований DOM
Вставляє вміст на сторінку
Ось таким чином, повідомлення “success” тепер включено на сторінці, подібно до того, як це працює через AJAX запит.

Цей приклад, звичайно, вкрай спрощений. Якби вміст у messages.html було значно складніше, наприклад, в кілька сотень рядків HTML, JavaScript і CSS, то наш код імпорту виглядав би трохи складніше.

Як другий приклад розглянемо, як мови програмування часто використовуються для завантаження повторно-використовуваного контенту. У наведеному нижче прикладі з файлу single.php з’являється вибір вікна вітання для WordPress:

<?php
/**
 * The template for displaying all single posts.
 *
 * @package _s
 */

get_header(); ?>

 <div id="primary" class="content-area">
 <main id="main" class="site-main" role="main">

 <?php while ( have_posts() ) : the_post(); ?>

 <?php get_template_part( 'content', 'single' ); ?>

 <?php _s_post_nav(); ?>

 <?php
 // If comments are open or we have at least one comment, load up the comment template
 if ( comments_open() || '0' != get_comments_number() ) :
 comments_template();
 endif;
 ?>

 <?php endwhile; // end of the loop. ?>

 </main><!-- #main -->
 </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Зверніть увагу, що є кілька місць, в даному прикладі коли для single.php, були задіяні зовнішні ресурси, в тому числі, щоб отримати заголовок сторінки, завантажити шаблон, вікно навігації, сайдбар і нижню рядок.

Аналогічно тому, як скрипт PHP звертається до зовнішнього ресурсу, HTML імпорт може бути використаний для додавання вмісту. Ця аналогія може стати ясніше, якщо врахувати, що HTML імпорт є частиною проекту HTML Web Components Draft .

Припустимо, що веб-компоненти мають чотири складових блоку. Ерік Байдельман, який працює в комунікації з розробниками в Google, а також представляв веб-компоненти в Googio I / O в 2013 і 2014 роках, описав їх так:

Shadow DOM (тіньовий DOM): робота з DOM і стилями;
HTML Templates (HTML шаблони): DOM фрагменти, для забезпечення базової структури коду;
Custom Elements (користувача елементи) – власні HTMLелементи;
HTML Imports (HTML імпорт) – дозволяють об’єднувати веб-компоненти і повторно їх використовувати.
Враховуючи все вищеперелічене, тепер ви можете собі уявити, як можна використовувати HTML імпорт для поліпшення завантаження різних компонентів HTML-сторінки. Приміром дану техніку можна застосувати в наступних випадках.

Оплата через PayPal – використовуйте тег , і ви можете додати безпечну можливість оплати на будь-яку сторінку.
Форма для E-mail підписки – використовуючи HTML імпорт, додавання форми підписки може бути також просто, як імпортування зовнішнього HTML документа і додавання тега .
Карти Google – часто використовуваний приклад імпорту HTML, вставляємо користувальницький елемент . Звичайно, це спрацює, тільки після того як буде завантажений документ, що визначає спеціальний тег.
Третій приклад показує те, як HTML імпорт може допомогти розробникам, більш ефективно завантажити деякі фреймворки або інші зв’язки HTML.

В даному прикладі, завантажуємо Bootstrap і його численні файли:

<link rel="import" href="bootstrap.html">

В bootstrap.html підключаємо потрібні файли, як би ми це зробили в розділі <head>:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>

Браузерна підтримка

Як вже згадувалося вище, в даний час існує досить мало браузерів підтримують HTML імпорт. Винятки – Chrome 36 +, Chrome 37+ для Android і Opera 23 + 0.

Також існують полізаполненія, які роблять цю функцію доступною практично в будь-якому браузері. Найнадійнішим є вищезгаданий проект Polymer.



Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers