Eine kurze Einführung in den Dateiimport in HTML5

Dieser Artikel führt hauptsächlich eine kurze Einführung in den Dateiimport in HTML ein, einschließlich des Ladens von jQuery, der Ausführungssequenz nach dem Import und anderer Wissenspunkte. Freunde, die Hilfe benötigen, können sich auf

Vorlage, Shadow DOM und benutzerdefinierte Elemente beziehen. Sie erstellen UI-Komponenten einfacher als je zuvor. 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.
HTML-Import verwenden

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

index.html

XML/HTML-CodeInhalt kopieren nach Zwischenablage Board

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

Sie können Dateien in HTML importieren (Anmerkung des Übersetzers: Dieser Artikel übersetzt „das importierte HTML“ als „HTML-Importdatei“ und „das ursprüngliche HTML“ als „HTML-Masterdatei“. Für (Beispiel: index.html ist die Haupt-HTML-Datei und Component.html ist die HTML-Importdatei.) Fügen Sie alle Ressourcen hinzu, einschließlich Skripts, 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, The Head- und Body-Tags sind nicht erforderlich. Der HTML-Import lädt das zu importierende Dokument sofort, analysiert die Ressourcen im Dokument und führt gegebenenfalls Skripts aus.
Ausführungsreihenfolge

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 es dem Browser, Skripte asynchron auszuführen, 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.   
<title>Import Example</title>
<script src="script3.js"></script>        // 4.

component.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

1 .html in index.html und warten Sie auf die Ausführung

2. Führen Sie „script1.js“ in „component.html“ aus

3. Führen Sie nach dem Ausführen von „script1.js“ script2 in „component.html .js“ aus

4. Führen Sie nach dem Ausführen von script2.js script3.js

in index.html aus. Beachten Sie, dass der HTML-Import behandelt wird, wenn Sie das asynchrone Attribut zu link[rel="import"] hinzufügen Es ähnelt einem Skript mit dem Async-Attribut. Es wartet nicht auf die Ausführung und das Laden der HTML-Importdatei, was bedeutet, dass der HTML-Import die Darstellung der Haupt-HTML-Datei nicht behindert. Dadurch ist es auch möglich, die Website-Performance zu verbessern, es sei denn, es gibt andere Skripte, die auf die Ausführung der HTML-Importdatei angewiesen sind.
Domänenübergreifender Import

Grundsätzlich kann der HTML-Import keine Ressourcen von anderen Domainnamen importieren.

Zum Beispiel können Sie keine HTML-Dateien von http://webcomponents.org/ nach http://example.com/ importieren. Um diese Einschränkung zu umgehen, kann CORS (Cross-Origin Resource Sharing) verwendet werden. Um mehr über CORS zu erfahren, lesen Sie bitte diesen Artikel.
Fenster- und Dokumentobjekte in HTML-Importdateien

Ich habe bereits erwähnt, dass die darin enthaltenen Skripte beim Importieren von HTML-Dateien ausgeführt werden. Dies bedeutet jedoch nicht, dass die Tags in HTML-Importdateien auch von gerendert werden Der Browser. Zur Unterstützung müssen Sie JavaScript-Code schreiben.

Bei der Verwendung von JavaScript in einer HTML-Importdatei ist zu beachten, dass das Dokumentobjekt in der HTML-Importdatei tatsächlich auf das Dokumentobjekt in der Haupt-HTML-Datei verweist. Am Beispiel des vorherigen Codes verweisen die Dokumente von index.html und Component.html beide auf das Dokumentobjekt von index.html. Wie kann ich HTML verwenden, um das Dokument in die Datei zu importieren? Verwenden Sie das Importattribut im Link.

index.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

Um Komponente zu erhalten Verwenden Sie für das Dokumentobjekt in HTML document.currentScript.ownerDocument.

component.html

XML/HTML-Code, um den Inhalt in das zu kopieren Zwischenablage

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

如果你在用webcomponents.js，那么就用document._currentScript来代替document.currentScript。下划线用于填充currentScript属性，因为并不是所有的浏览器都支持这个属性。

component.html

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

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

通过在脚本开头添加下面的代码，你就可以轻松地访问component.html中的document对象，而不用管浏览器是不是支持HTML导入。
document._currentScript = document._currentScript || document.currentScript;
性能方面的考虑

使用HTML 导入的一个好处是能够将资源组织起来，但是也意味着在加载这些资源的时候，由于使用了一些额外的HTML文件而让头部变得过大。有几点是需要考虑的：
解析依赖

假如HTML主文件要依赖多个导入文件，而且导入文件中含有相同的库，这时会怎样呢？例如，你要从导入文件中加载jQuery，如果每个导入文件都含有加载jQuery的script标签，那么jQuery就会被加载两次，并且也会被执行两次。

index.html

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

<link rel="import" href="component1.html">
<link rel="import" href="component2.html">

component1.html

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

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

component2.html
 
HTML导入自动帮你解决了这个问题。

与加载两次script标签的做法不同，HTML 导入对已经加载过的HTML文件不再进行加载和执行。以前面的代码为例，通过将加载jQuery的script标签打包成一个HTML导入文件，这样jQuery就只被加载和执行一次了。

但这还有一个问题：我们增加了一个要加载的文件。怎么处理数目膨胀的文件呢？幸运的是，我们有一个叫vulcanize的工具来解决这个问题。
合并网络请求

Vulcanize 能将多个HTML文件合并成一个文件，从而减少了网络连接数。你可以借助npm安装它，并且用命令行来使用它。你可能也在用 grunt和gulp 托管一些任务，这样的话你可以把vulcanize作为构建过程的一部分。

为了解析依赖以及合并index.html中的导入文件，使用如下命令：

复制代码

代码如下:

$ vulcanize -o vulcanized.html index.html

通过执行这个命令，index.html中的依赖会被解析，并且会产生一个合并的HTML文件，称作 vulcanized.html。学习更多有关vulcanize的知识，请看这儿。

注意：http2的服务器推送功能被考虑用于以后消除文件的连结与合并。
把Template、Shadow DOM、自定义元素跟HTML导入结合起来

让我们对这个文章系列的代码使用HTML导入。你之前可能没有看过这些文章，我先解释一下：Template可以让你用声明的方式定义你的自定义元素的内容。Shadow DOM可以让一个元素的style、ID、class只作用到其本身。自定义元素可以让你自定义HTML标签。通过把这些跟HTML导入结合起来，你自定义的web 组件会变得模块化，具有复用性。任何人添加一个Link标签就可以使用它。

x-component.html

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

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

index.html

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

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

注意，因为x-component.html 中的document 对象跟index.html的一样，你没必要再写一些棘手的代码，它会自动为你注册。
支持的浏览器

Chrome 和 Opera提供对HTML导入的支持，Firefox要在2014年12月后才支持（Mozilla表示Firefox不计划在近期提供对HTML导入的支持，声称需要首先了解ES6的模块是怎样实现的）。

你可以去chromestatus.com或caniuse.com查询浏览器是否支持HTML导入。想要在其他浏览器上使用HTML导入，可以用webcomponents.js（原名platform.js）。

相关推荐：

HTML5中form表单标签用法详解

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in den Dateiimport in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!