Eine kurze Einführung in den Dateiimport in HTML5_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Vorlagen, Shadow DOM und benutzerdefinierte Elemente machen es einfacher als je zuvor, UI-Komponenten zu erstellen. Aber Ressourcen wie HTML, CSS und JavaScript müssen immer noch einzeln geladen werden, was sehr ineffizient ist.

Das Entfernen doppelter Abhängigkeiten ist ebenfalls nicht einfach. Beispielsweise erfordert das Laden von jQuery UI oder Bootstrap jetzt das Hinzufügen separater Tags für JavaScript, CSS und Webfonts. Wenn Ihre Webkomponente mehrere Abhängigkeiten anwendet, wird die Sache komplizierter.

Mit dem HTML-Import können Sie diese Ressourcen als kombinierte HTML-Datei laden.
Importieren mit HTML

Um eine HTML-Datei zu laden, müssen Sie ein Link-Tag hinzufügen, dessen rel-Attribut import und herf-Attribut der Pfad der HTML-Datei ist. Wenn Sie beispielsweise „component.html“ in „index.html“ laden möchten:

index.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

Sie können Dateien in HTML importieren (Anmerkung des Übersetzers: In diesem Artikel wird „das importierte HTML“ als „HTML-Importdatei“ und „das ursprüngliche HTML“ als „HTML-Hauptdatei“ übersetzt. Index.html ist beispielsweise HTML Die Hauptdatei (Datei, „component.html“ ist die HTML-Importdatei.) Fügen Sie alle Ressourcen hinzu, einschließlich Skripten, Stylesheets und Schriftarten, genau wie beim Hinzufügen von Ressourcen zu gewöhnlichem HTML.

component.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<link rel="stylesheet" href="css/style.css">
<script src="js/ script.js">script>

doctype-, html-, head- und body-Tags werden nicht benötigt. Der HTML-Import lädt das zu importierende Dokument sofort, analysiert die Ressourcen im Dokument und führt gegebenenfalls Skripts aus.
Ausführungsauftrag

Die Art und Weise, wie Browser HTML-Dokumente analysieren, ist linear, was bedeutet, dass die Skripte oben im HTML vor denen unten ausgeführt werden. Darüber hinaus warten Browser normalerweise, bis der JavaScript-Code ausgeführt wird, bevor sie den nachfolgenden Code analysieren.

Um zu verhindern, dass Skripte die Darstellung von HTML behindern, können Sie dem Tag asynchrone oder zurückgestellte Attribute hinzufügen (oder Sie können das Skript-Tag auch unten auf der Seite platzieren). Das Defer-Attribut verzögert die Skriptausführung, bis alle Seiten analysiert wurden. Das async-Attribut ermöglicht dem Browser die asynchrone Ausführung von Skripten, sodass die Darstellung von HTML nicht behindert wird. Wie funktioniert der HTML-Import?

Das Skript in der HTML-Importdatei ist dasselbe wie das Skript, das das Defer-Attribut enthält. Im folgenden Beispiel führt index.html beispielsweise zuerst script1.js und script2.js und dann script3.js aus.

index.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<link rel="import" href="component.html"> // 1.
<Titel>ImportbeispielTitel>
<script src="script3. js">script> // 4.

component.html

XML/HTML-Code复制内容到剪贴板

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

1.在index.html 中加载component.html并等待执行

2.执行component.html中的script1.js

3. Klicken Sie auf „script1.js“ und „component.html“ und dann auf „script2.js“

4. Erstellen Sie script2.js und index.html und script3.js

注意，如果给link[rel="import"]添加async属性,HTML导入会把它当做含有async属性的脚本来对待.它不会等待HTML导入文件的执行和加载,这意味着HTML 导入不会妨碍HTML文件的渲染件的执行.
跨域导入

从根本上说，HTML导入是不能从其他的域名导入资源的.

比如，你不能从http://webcomponents.org/向 http://example.com/ 导入HTML.为了绕过这个限制，可以使用CORS（跨域资源共享）。想了解CORS，请看这篇文章.
HTML导入文件中的window和document对象

前面我提过在导入HTML文件的时候里面的脚本是会被执行的,但这并不意味着HTML导入文件中的标签也会被浏览器渲染.你需要写一些JavaScript代码来帮忙。

当在HTML导入文件中使用JavaScript时,有一点要提防的是,HTML导入文件中的document对象实际上指的是HTML主文件中的document对象.以前面的代码为例，index.html Verwenden Sie „component.html“ und „document“.

index.html

XML/HTML-Code复制内容到剪贴板

var link = document.querySelector('link[rel ="importieren"]'); link.addEventListener('load', function(e) {
var
importedDoc = link.import; // importDoc zeigt auf das Dokument unter „component.html“
});
Um das Dokumentobjekt in Component.html abzurufen, verwenden Sie document.currentScript.ownerDocument.

component.html

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

var

= document.currentScript.ownerDocument; > // mainDoc zeigt auf das Dokument unter Component.html
component.html

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

var mainDoc

document._currentScript.ownerDocument; > // mainDoc zeigt auf das Dokument unter Component.html Durch das Hinzufügen des folgenden Codes am Anfang des Skripts können Sie problemlos auf das Dokumentobjekt in „component.html“ zugreifen, unabhängig davon, ob der Browser den HTML-Import unterstützt. document._currentScript = document._currentScript || document.currentScript;
Ein Vorteil des HTML-Imports besteht darin, Ressourcen zu organisieren, aber es bedeutet auch, dass beim Laden dieser Ressourcen der Header aufgrund der Verwendung einiger zusätzlicher HTML-Dateien zu groß wird. Dabei sind einige Punkte zu beachten: Abhängigkeiten auflösen

Was passiert, wenn die Haupt-HTML-Datei von mehreren Importdateien abhängt und die Importdateien dieselbe Bibliothek enthalten? Wenn Sie beispielsweise jQuery aus einer Importdatei laden möchten und jede Importdatei ein Skript-Tag enthält, das jQuery lädt, wird jQuery zweimal geladen und zweimal ausgeführt.

index.html

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

link

rel

"import" href="component1.html"> <link rel
="import" href="component2.html"> component1.html XML/HTML-CodeInhalt in die Zwischenablage kopieren

<script src="js/jquery.js ">Skript>

component2.html

Der HTML-Import löst dieses Problem automatisch für Sie.

Im Gegensatz zum doppelten Laden von Skript-Tags lädt der HTML-Import nicht mehr die bereits geladene HTML-Datei und führt sie aus. Nehmen wir den vorherigen Code als Beispiel: Durch das Packen des Skript-Tags, das jQuery lädt, in eine HTML-Importdatei wird jQuery nur einmal geladen und ausgeführt.

Aber es gibt ein Problem: Wir haben eine Datei zum Laden hinzugefügt. Wie gehe ich mit der steigenden Anzahl an Dateien um? Glücklicherweise haben wir ein Tool namens Vulkanisieren, um dieses Problem zu lösen.
Netzwerkanfragen zusammenführen

Vulcanize kann mehrere HTML-Dateien in einer Datei zusammenführen und so die Anzahl der Netzwerkverbindungen reduzieren. Sie können es mit npm installieren und über die Befehlszeile verwenden. Möglicherweise verwenden Sie auch Grunzen und Schlucken, um einige Aufgaben zu hosten. In diesem Fall können Sie sie als Teil des Build-Prozesses vulkanisieren.

Um Abhängigkeiten aufzulösen und die Importdateien in index.html zusammenzuführen, verwenden Sie den folgenden Befehl:

Code kopieren

Der Code lautet wie folgt:

$ vulcanize -o vulcanized.html index.html

Durch die Ausführung dieses Befehls werden die Abhängigkeiten in index.html analysiert und eine zusammengeführte HTML-Datei namens vulcanized.html generiert. Weitere Informationen zum Thema Vulkanisieren finden Sie hier.

Hinweis: Die Server-Push-Funktion von http2 wird für die künftige Eliminierung der Dateiverknüpfung und -zusammenführung in Betracht gezogen.
Kombinieren Sie Vorlage, Shadow DOM, benutzerdefinierte Elemente und HTML-Import

Lassen Sie uns den HTML-Import für den Code dieser Artikelserie verwenden. Möglicherweise haben Sie diese Artikel noch nie gesehen. Lassen Sie mich sie daher zunächst erklären: Mit einer Vorlage können Sie den Inhalt Ihrer benutzerdefinierten Elemente deklarativ definieren. Mit Shadow DOM können der Stil, die ID und die Klasse eines Elements nur auf sich selbst angewendet werden. Mit benutzerdefinierten Elementen können Sie HTML-Tags anpassen. Durch die Kombination mit HTML-Importen werden Ihre benutzerdefinierten Webkomponenten modular und wiederverwendbar. Jeder kann es verwenden, indem er ein Link-Tag hinzufügt.

x-component.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<template id="template" >
<Stil>
...
Stil>
<div id="container" >
<img src="http: //webcomponents.org/img/logo.svg">
<Inhalt select="h1" >Inhalt>
div>
Vorlage>
<Skript>
// Dieses Element wird in index.html registriert
// Weil „Dokument“ hier das in index.html bedeutet
var XComponent = document.registerElement('x-component', {
Prototyp: 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);
}
}
})
});
Skript>

index.html

XML/HTML-Code复制内容到剪贴板

...
<link rel="import" href="x-component.html">
Kopf>
<Körper>
<x-Komponente>
<h1>Dies ist ein benutzerdefiniertes Elementh1>
x-Komponente>
...

Beachten Sie, dass Sie keinen komplizierten Code schreiben müssen, da das Dokumentobjekt in x-component.html mit index.html identisch ist. Es wird automatisch für Sie registriert.
Unterstützte Browser

Chrome und Opera bieten Unterstützung für den HTML-Import, und Firefox wird dies erst im Dezember 2014 unterstützen (Mozilla gab an, dass Firefox nicht plant, in naher Zukunft Unterstützung für den HTML-Import bereitzustellen, und behauptete, dass es zunächst verstehen müsse, wie ES6-Module funktionieren umgesetzt werden).

Sie können zu chromestatus.com oder caniuse.com gehen, um zu überprüfen, ob der Browser den HTML-Import unterstützt. Wenn Sie den HTML-Import in anderen Browsern verwenden möchten, können Sie webcomponents.js (ehemals platform.js) verwenden.
Verwandte Ressourcen

Das ist alles für den HTML-Import. Wenn Sie mehr über den HTML-Import erfahren möchten, gehen Sie bitte zu:

HTML-Importe: #include für das Web – HTML5Rocks
HTML-Importspezifikationen