Une brève introduction à l'importation de fichiers dans les compétences du didacticiel HTML5

Les modèles, Shadow DOM et les éléments personnalisés facilitent plus que jamais la création de composants d'interface utilisateur. 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é.
Importer en utilisant 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 le presse-papiers

<lien rel="importer" 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 HTML Le fichier principal fichier, composant.html est le fichier d'importation HTML.) Ajoutez des ressources, y compris des scripts, des feuilles de style et des polices, tout comme vous ajoutez des ressources au HTML ordinaire.

composant.html

Code XML/HTMLCopier le contenu dans le presse-papiers

<lien rel="feuille de style" href="css/style.css">
<script src="js/ script.js">script>

Les balises doctype, 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.
Ordonnance 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-papiers

<lien rel="importer" href="component.html"> // 1.
<titre>Exemple d'importationtitre>
<script src="script3. js">script> // 4.

composant.html

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

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

1.在index.html etcomponent.html并等待执行

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

3.执行完script1.js etcomponent.html中的script2.js

4.执行完 script2.js继而执行index.html中的script3.js

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

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

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

L'utilisation du HTML pour les utilisateurs标签也会被浏览器渲染。你需要写一些JavaScript来帮忙。

Le document HTML est basé sur JavaScript, et le document HTML est basé sur le document HTML.件中的document对象。以前面的代码为例，index.html和 composant.html 的document都是指index.html的document对象。怎么才能使用HTML导入文件中的document 呢？借助link中的import 属性。

index.html

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

var link = document.querySelector('link[rel ="importer"]');
link.addEventListener('load', function(e) {
var importedDoc = lien.import
// importéDoc pointe vers le document sous composant.html
});

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

composant.html

Code XML/HTMLCopier le contenu dans le presse-papiers

var mainDoc = document.currentScript.ownerDocument; > // mainDoc pointe vers le document sous composant.html

Si vous utilisez webcomponents.js, utilisez document._currentScript au lieu de document.currentScript. Les traits de soulignement sont utilisés pour remplir l'attribut currentScript car tous les navigateurs ne prennent pas en charge cet attribut.

composant.html

Code XML/HTML

Copier le contenu dans le presse-papiers

mainDoc = document._currentScript.ownerDocument // mainDoc pointe vers le document sous composant.html

En ajoutant le code suivant au début du script, vous pouvez facilement accéder à l'objet document dans composant.html, que le navigateur prenne ou non en charge l'importation HTML.

document._currentScript = document._currentScript || document.currentScript;

Considérations sur les performances

L'un des avantages de l'importation HTML est d'organiser les ressources, mais cela signifie également que lors du chargement de ces ressources, l'en-tête devient trop volumineux en raison de l'utilisation de certains fichiers HTML supplémentaires. Il y a quelques points à considérer :
Résoudre les dépendances

Que se passe-t-il si le fichier HTML principal dépend de plusieurs fichiers d'importation et que les fichiers d'importation contiennent la même bibliothèque ? Par exemple, si vous souhaitez charger jQuery à partir d'un fichier d'importation, si chaque fichier d'importation contient une balise de script qui charge jQuery, alors jQuery sera chargé deux fois et exécuté deux fois.

index.html

Code XML/HTML

Copier le contenu dans le presse-papiers

lien rel="importer" href="component1.html">
<lien rel="importer" href="component2.html">

composant1.html

Code XML/HTML

Copier le contenu dans le presse-papiers

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

component2.html

L'importation HTML résout automatiquement ce problème pour vous.

Contrairement au chargement double des balises de script, l'importation HTML ne charge et n'exécute plus le fichier HTML déjà chargé. En prenant le code précédent comme exemple, en empaquetant la balise de script qui charge jQuery dans un fichier d'importation HTML, jQuery n'est chargé et exécuté qu'une seule fois.

Mais il y a un problème : nous avons ajouté un fichier à charger. Comment faire face au nombre croissant de dossiers ? Heureusement, nous disposons d'un outil appelé vulcaniser pour résoudre ce problème.
Fusionner les requêtes réseau

Vulcanize peut fusionner plusieurs fichiers HTML en un seul fichier, réduisant ainsi le nombre de connexions réseau. Vous pouvez l'installer avec npm et l'utiliser depuis la ligne de commande. Vous pouvez également utiliser grunt et gulp pour héberger certaines tâches, auquel cas vous pouvez vulcaniser dans le cadre du processus de construction.

Afin de résoudre les dépendances et de fusionner les fichiers d'importation dans index.html, utilisez la commande suivante :

Copier le code

Le code est le suivant :

$ vulcanize -o vulcanized.html index.html

En exécutant cette commande, les dépendances dans index.html seront analysées et un fichier HTML fusionné appelé vulcanized.html sera généré. Pour en savoir plus sur la vulcanisation, voir ici.

Remarque : La fonctionnalité push du serveur de http2 est envisagée pour l'élimination future de la liaison et de la fusion de fichiers.
Combinez le modèle, le Shadow DOM, les éléments personnalisés et l'importation HTML

Utilisons l'importation HTML pour le code de cette série d'articles. Vous n'avez peut-être pas vu ces articles auparavant, alors permettez-moi de les expliquer d'abord : le modèle vous permet de définir le contenu de vos éléments personnalisés de manière déclarative. Shadow DOM permet au style, à l'ID et à la classe d'un élément de s'appliquer uniquement à lui-même. Les éléments personnalisés vous permettent de personnaliser les balises HTML. En les combinant avec des importations HTML, vos composants Web personnalisés deviennent modulaires et réutilisables. Tout le monde peut l'utiliser en ajoutant une balise Link.

x-component.html

Code XML/HTMLCopier le contenu dans le presse-papiers

<modèle id="modèle" >
<style>
...
style>
<div id="conteneur" >
<img src="http : //webcomponents.org/img/logo.svg">
<content sélectionner="h1" >contenu>
div>
modèle>
<script>
// Cet élément sera enregistré dans index.html
// Parce que `document` ici signifie celui dans index.html
var XComponent = document.registerElement('x-component', {
prototype : Object.create(HTMLElement.prototype, {
createdCallback : {
valeur : function() {
var root = this.createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
script>

index.html

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

...
<lien rel="importer" href="x-component.html">
tête>
<corps>
<x-composant>
<h1>Ceci est un élément personnaliséh1>
x-composant>
...

Notez que, comme l'objet document dans x-component.html est le même que index.html, vous n'avez pas besoin d'écrire de code délicat, il sera automatiquement enregistré pour vous.
Navigateurs pris en charge

Chrome et Opera prennent en charge l'importation HTML, et Firefox ne le prendra pas en charge avant décembre 2014 (Mozilla a déclaré que Firefox ne prévoit pas de prendre en charge l'importation HTML dans un avenir proche, affirmant qu'il doit d'abord comprendre comment les modules ES6 sont mises en œuvre) .

Vous pouvez accéder à chromestatus.com ou caniuse.com pour vérifier si le navigateur prend en charge l'importation HTML. Si vous souhaitez utiliser l'importation HTML sur d'autres navigateurs, vous pouvez utiliser webcomponents.js (anciennement platform.js).
Ressources connexes

C'est tout pour l'importation HTML. Si vous souhaitez en savoir plus sur l'importation HTML, rendez-vous sur :

Importations HTML : #include pour le Web – HTML5Rocks
Spécifications des importations HTML