Utilisez la balise pour réutiliser efficacement le code HTML. Le contenu n'est pas rendu par défaut, mais peut être cloné et inséré dans le DOM via JavaScript. Les étapes spécifiques sont: 1. Définissez la structure du modèle; 2. Obtenez le modèle via document.getElementById; 3. Clonage du contenu avec document.importNode; 4. Ajouter le contenu du clone à l'emplacement spécifié du DOM; 5. Le contenu du clone peut être modifié dynamiquement pour atteindre un affichage personnalisé. Convient pour la réutilisation des structures statiques, telles que les cartes utilisateur, les bo?tes modales, etc., il est plus léger que les cadres et ne nécessite aucune dépendance externe. Notez que les scripts et les styles ne prennent effet qu'après l'insertion, évitez les conflits d'identité et envisagez l'impact du chargement retardé des ressources.

Si vous cherchez à réutiliser des morceaux de HTML sans répéter le code, la balise <template></template> est un outil simple mais puissant. Il vous permet de définir le contenu HTML inerte qui peut être cloné et inséré dans votre document en cas de besoin. Ceci est particulièrement utile pour les composants ou les sections qui apparaissent plusieurs fois sur un site.

Ce que fait la balise de modèle

La balise <template></template> contient du contenu HTML qui n'est pas rendu sur le chargement de la page. Le navigateur l'analyse, mais ne l'affiche pas ou ne charge pas de ressources associées comme des images ou des scripts à l'intérieur - du moins pas avant de l'activer avec JavaScript.

Cela le rend parfait pour stocker des bits de balisage que vous souhaitez utiliser plus tard, comme des éléments de formulaire, des éléments de liste ou des composants d'interface utilisateur. Vous pouvez les définir une fois et les cloner au besoin, en gardant votre HTML propre et organisé.

Voici à quoi ressemble un modèle de base:

 <template id = "user-card">
  <div class = "card">
    <h3> Nom d&#39;utilisateur </h3>
    <p> Courriel: user@example.com </p>
  </div>
</ template>

Rien n'appara?t sur la page, mais ce bloc est prêt à être tiré à l'aide de JavaScript chaque fois que vous avez besoin d'afficher une carte utilisateur.

Comment utiliser un modèle en javascript

Pour donner vie à un modèle, tout ce dont vous avez besoin est un peu de javascript. Voici comment saisir le contenu du modèle et l'insérer dans le DOM.

• Commencez par sélectionner l'élément de modèle.
• Clone son contenu à l'aide de document.importNode() .
• Ajoutez le clone à votre emplacement souhaité dans le DOM.

Par exemple:

 const template = document.getElementById (?user-carte?);
const clone = document.importNode (template.Content, true);
document.body.ApendChild (clone);

Cela insère une copie du contenu du modèle dans le corps. Vous pouvez le faire plusieurs fois, à chaque fois en insérant une nouvelle copie.

Vous pouvez également personnaliser le contenu avant de l'insérer. Par exemple, si vous bouclez via des données utilisateur:

 users.ForEach (user => {
  const clone = document.importNode (template.Content, true);
  clone.QuerySelector ('h3'). textContent = user.name;
  clone.QuerySelector ('p'). textContent = `Email: $ {user.email}`;
  document.getElementById ('User-list'). APPENDCHILD (clone);
});

De cette fa?on, vous évitez d'écrire HTML répétitif et de garder votre voisin logique.

Quand utiliser des modèles au lieu d'autres méthodes

Les modèles sont mieux utilisés lorsque vous avez des structures HTML statiques qui ne changent pas souvent mais qui doivent être réutilisées. Ils sont plus légers que les cadres de composants à part entière et ne nécessitent pas de bibliothèques externes.

Ils fonctionnent bien pour:

• Répéter des articles comme des cartes ou des inscriptions de liste
• Windows ou menus déroulants modaux qui apparaissent conditionnellement
• Sections qui sont échangées dynamiquement en fonction de l'entrée utilisateur

D'autres approches telles que le c?té serveur incluent ou les cadres JavaScript (React, Vue) peuvent être meilleurs pour des applications plus grandes ou un contenu dynamique qui nécessite une liaison bidirectionnelle ou une gestion de l'état.

Mais pour une réutilisation à petite échelle, les modèles sont un choix solide - aucun outil de construction requis.

Quelques choses à garder à l'esprit

Il y a quelques bizarreries à noter:

• Les scripts à l'intérieur d'un modèle ne s'exécuteront pas tant que le contenu n'est pas ajouté au DOM.
• Les styles à l'intérieur d'un modèle ne s'appliquent qu'une fois le contenu inséré.
• Si vous clonez plusieurs fois, assurez-vous que les ID sont uniques ou les supprimez complètement.

De plus, puisque les navigateurs traitent les modèles comme inertes, toutes les images ou les supports à l'intérieur ne commencent pas à se charger avant qu'ils ne fassent pas partie du Dom en direct. Cela peut être bon pour les performances, mais peut affecter le timing si vous comptez sur les actifs préchargés.

Fondamentalement, c'est tout. Les balises de modèle sont simples mais faciles à ignorer, particulièrement adaptées aux scénarios où la même structure doit être insérée plusieurs fois, mais le contenu est légèrement différent.

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!