Une brève introduction à l'importation de fichiers en HTML5

Cet article présente principalement une brève introduction à l'importation de fichiers en HTML, y compris le chargement de jQuery, la séquence d'exécution après l'importation et d'autres points de connaissances. Les amis dans le besoin peuvent se référer au

Modèle, Shadow DOM et éléments personnalisés. Vous créez des composants d’interface utilisateur plus facilement que jamais. Mais les ressources telles que HTML, CSS et JavaScript doivent toujours être chargées une par une, ce qui est très inefficace.

Supprimer les dépendances en double n'est pas simple non plus. Par exemple, le chargement de jQuery UI ou Bootstrap nécessite désormais l'ajout de balises distinctes pour JavaScript, CSS et Web Fonts. Si votre composant Web applique plusieurs dépendances, les choses deviennent plus compliquées.

L'importation HTML vous permet de charger ces ressources sous forme de fichier HTML combiné.
Utilisation de l'importation HTML

Pour charger un fichier HTML, vous devez ajouter une balise de lien dont l'attribut rel est import et l'attribut herf est le chemin du fichier HTML. Par exemple, si vous souhaitez charger composant.html dans index.html :

index.html

Code XML/HTMLCopier le contenu dans Conseil du presse-papiers

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

Vous pouvez importer des fichiers au format HTML (Note du traducteur : cet article traduit « le HTML importé » par « fichier d'importation HTML » et « le HTML d'origine » par « fichier principal HTML » . Par exemple, index.html est le fichier HTML principal et composant.html est le fichier d'importation HTML.) L'ajout de ressources, y compris des scripts, des feuilles de style et des polices, revient à ajouter des ressources au HTML ordinaire.

component.html

Code XML/HTMLCopier le contenu dans le presse-papiers

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

doctype, Le les balises html, head et body ne sont pas nécessaires. L'importation HTML charge immédiatement le document en cours d'importation, analyse les ressources du document et exécute les scripts le cas échéant.
Ordre d'exécution

La façon dont les navigateurs analysent les documents HTML est linéaire, ce qui signifie que les scripts en haut du HTML seront exécutés avant le bas. De plus, les navigateurs attendent généralement que le code JavaScript soit exécuté avant d'analyser le code suivant.

Afin d'éviter que le script ne gêne le rendu du HTML, vous pouvez ajouter des attributs asynchrones ou différés à la balise (ou vous pouvez également mettre la balise script en bas de la page). L'attribut defer retarde l'exécution du script jusqu'à ce que toutes les pages aient été analysées. L'attribut async permet au navigateur d'exécuter des scripts de manière asynchrone afin de ne pas gêner le rendu du HTML. Alors, comment fonctionne l’importation HTML ?

Le script dans le fichier d'importation HTML est le même que celui contenant l'attribut defer. Par exemple, dans l'exemple suivant, index.html exécutera d'abord script1.js et script2.js, puis script3.js.

index.html

Code XML/HTMLCopier le contenu dans le presse-papier

<link rel="import" href="component.html"> // 1.   
<title>Import Example</title>
<script src="script3.js"></script>        // 4.

component.html

Code XML/HTMLCopier le contenu dans le presse-papiers

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

1. Chargez composant.html dans index.html et attendez l'exécution

2 Exécutez script1.js dans composant.html

3 Exécutez le composant après avoir exécuté script1.js dans. html

4. Après avoir exécuté script2.js, exécutez script3.js

dans index.html Notez que si vous ajoutez l'attribut async à link[rel="import"] , importation HTML. le traitera comme un script contenant l'attribut async. Il n'attend pas que le fichier d'importation HTML s'exécute et se charge, ce qui signifie que l'importation HTML n'entrave pas le rendu du fichier HTML principal. Cela permet également d'améliorer les performances du site Web, sauf s'il existe d'autres scripts qui dépendent de l'exécution du fichier d'importation HTML.
Importation inter-domaines

Fondamentalement parlant, l'importation HTML ne peut pas importer de ressources provenant d'autres noms de domaine.

Par exemple, vous ne pouvez pas importer de fichiers HTML de http://webcomponents.org/ vers http://example.com/. Pour contourner cette limitation, CORS (Cross-Origin Resource Sharing) peut être utilisé. Pour en savoir plus sur CORS, veuillez lire cet article.
Objets de fenêtre et de document dans les fichiers d'importation HTML

J'ai mentionné plus tôt que les scripts à l'intérieur seront exécutés lors de l'importation de fichiers HTML, mais cela ne signifie pas que les balises dans les fichiers d'importation HTML seront également rendues par le navigateur. Vous devrez écrire du code JavaScript pour vous aider.

Une chose dont il faut se méfier lors de l'utilisation de JavaScript dans un fichier d'importation HTML est que l'objet document dans le fichier d'importation HTML fait en fait référence à l'objet document dans le fichier HTML principal. En prenant le code précédent comme exemple, les documents d'index.html et de composant.html font tous deux référence à l'objet document d'index.html. Comment puis-je utiliser HTML pour importer le document dans le fichier ? Utilisez l'attribut d'importation dans le lien.

index.html

Code XML/HTMLCopier le contenu dans le presse-papier

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

Pour obtenir l'objet document dans composant.html, utilisez document.currentScript.ownerDocument.

component.html

Code XML/HTMLCopiez le contenu dans Presse-papiers

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表单标签用法详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!