Импортирайте файлове в HTML

HTML импортирането е един от начините за включване на външен HTML документ и неговите уеб компоненти на страница без съответна AJAX заявка или зареждане на IFRAME. Благодарение на тази възможност импортирането на HTML може да ускори времето за зареждане на страницата, да отвори нови възможности за повторно използване на код и да подобри интегрирането на някои популярни услуги като Google Maps.

Към момента на писане технологията за импортиране на HTML е работен проект на W3C, което означава, че все още не е уеб стандарт и все още не се поддържа във всички браузъри. Импортирането на HTML обаче вече може да се използва чрез Polymer.

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

Разработчиците на софтуер, включително уеб разработчиците, се опитват да не дублират кода, а по-скоро да го разпределят между модели, обекти и функции. Благодарение на разработчиците Дейв Томас и Андрю Хънт, този подход обикновено се нарича DRY development или DRY programming, което означава „не се повтаряйте“ на английски.

В известен смисъл HTML импортирането поддържа DRY разработка. Ето един пример – представете си, че имате три публикации, които се повтарят на множество уеб страници. Вместо да копирате и поставяте или въвеждате повторно тези съобщения за всяка страница или проект, те могат да бъдат включени чрез импортиране на HTML.

Например, нека вземем HTML файл, наречен messages.html:

За да използвате повторно съдържание от messages.html, първо включете документа чрез HTML импортиране. Това става чрез добавяне на таг с атрибута rel, зададен на „import“ и атрибута href, зададен на messages.html:

Този код изпълнява следните задачи:

  • Избира елемент на връзка
  • Импортира файл
  • Извлича импортирания DOM
  • Вмъква съдържание в страницата

По този начин съобщението „успех“ вече е включено на страницата, подобно на това как работи чрез AJAX заявка.

Като втори пример, помислете как езиците за програмиране често се използват за зареждане на съдържание за многократна употреба. В примера по-долу от файла single.php се появява избор на начален екран за WordPress:

Обърнете внимание, че в този пример има няколко места, където за single.php са включени външни ресурси, включително за получаване на заглавието на страницата, зареждане на шаблона, навигационното поле, страничната лента и долния ред.

Точно както PHP скриптът има достъп до външен ресурс, HTML импортирането може да се използва за добавяне на съдържание. Тази аналогия може да стане по-ясна, когато вземете предвид, че HTML импортирането е част от черновата на HTML уеб компонентите.

Да кажем, че уеб компонентите имат четири компонентни блока. Ерик Бейделман, който работи в комуникациите на разработчиците в Google и също представлява уеб компоненти в Googio I/O през 2013 и 2014 г., ги описа по следния начин:

  • Shadow DOM (shadow DOM): работа с DOM и стилове;
  • HTML шаблони (HTML шаблони): DOM фрагменти, за предоставяне на основната структура на кода;
  • Custom Elements (custom elements) - персонализирани HTML елементи;
  • HTML импортиране (HTML импортиране) - позволява ви да комбинирате уеб компоненти и да ги използвате повторно.

Имайки предвид всичко по-горе, сега можете да си представите как HTML импортирането може да се използва за подобряване на зареждането на различни компоненти на HTML страница. Например, тази техника може да се приложи в следните случаи.

третоПримерът показва как HTML импортирането може да помогне на разработчиците да зареждат определени рамки или други HTML пакети по-ефективно.

В този пример зареждаме Bootstrap и неговите много файлове:

Включваме необходимите файлове в bootstrap.html, както бихме направили в секцията:

Поддръжка на браузър

Както бе споменато по-горе, в момента има доста браузъри, които поддържат импортиране на HTML. Изключения са Chrome 36+, Chrome 37+ за Android и Opera 23+0.

Има и полифили, които правят тази функция достъпна в почти всеки браузър. Най-надежден е гореспоменатият проект Polymer.

Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: http://www.sitepoint.com/introduction-html-imports-tutorial/ Превод: Станислав Протасевич Урокът е създаден: 30 септември 2014 г. Прегледан: 14014 Правила за препечатване

5 последни урока от рубриката "HTML и DHTML"

Life hack: най-полезната функция var_export().

Когато пишем или отстраняваме грешки в PHP скриптове, често използваме функциите var_dump() и print_r() за отпечатване на предварителни данни за масиви и обекти. В тази публикация бих искал да ви разкажа за функцията var_export(), която може да конвертира масив във формат, подходящ за PHP код.

17 безплатни администраторски шаблона

Няколко безплатни шаблона за администраторски панел.

30 уебсайта за изтегляне на безплатни имейл шаблони

Създаването на шаблон за писмо не е лесна задача. Предлагаме ви селекция от 30 сайта, където можете да изтеглите безплатно такива шаблони за всеки вкус.

Как да отложа натискането на клавиш с jQuery?

Например имате поле за търсене,който се обработва при всяко натискане на клавиш от клавиатурата. Ако някой иска да напише думата Windows, AJAX заявката ще бъде изпратена до следните фрагменти: W, Wi, Win, Wind, Windo, Window, Windows. Проблем?

15 нови сайта за безплатно изтегляне на снимки

Селекция от 15 нови сайта, където можете да изтеглите безплатни снимки, за да попълните вашите сайтове.