De ce que vous avez besoin, il y a un peu de modèles

Récemment, j'ai reçu un e-mail de quelqu'un aux prises avec HTML, CSS et JavaScript. Leur code, contenant des espaces réservés HTML et des données JavaScript, ne fonctionnait pas comme prévu. Le comportement prévu était que les données JavaScript remplissent les espaces réservées HTML, une attente commune pour les débutants.

Bien que les développeurs Web expérimentés identifient facilement le problème, il est utile de comprendre cette perspective et d'offrir des solutions simples.

Le HTML problématique:

<meta charset="utf-8"><title> Test</title><link href="test.css" rel="stylesheet"><div> {Nom de l'entreprise}</div>

Le JavaScript correspondant:

 var company_data = {
  "{company_name}": "une entreprise",
};

Le code est valide et s'exécute, mais il affiche simplement "{company_name}" car le navigateur ne remplace pas automatiquement les espaces réservés par des données JavaScript.

Une solution simple (mais pas idéale):

Pour afficher "une entreprise", une seule ligne de JavaScript suffit:

 var company_data = {
  "{company_name}": "une entreprise"
};

document.QuerySelector ("div"). innerHtml = company_data ["{company_name}"];

Cette solution, bien que fonctionnelle, manque de réutilisabilité et de robustesse.

Le besoin de modèles

L'attente de l'utilisateur était que le système gérerait automatiquement les modèles - remplacer les espaces réservés HTML par des clés JavaScript correspondantes. Ce n'est pas inhérent aux technologies Web standard.

De nombreuses approches existent pour y parvenir. En voici quelques-uns:

• Moteurs de modèles: Utilisez un moteur de modèles comme le guidon ou la moustache.
• Générateurs de sites statiques: utilisez un générateur de sites statique comme Eleventy (qui utilise du liquide).
• Modèles HTML personnalisés: Créez un HTML<template></template> élément et écrivez un script pour l'utiliser.
• Composants Web: créez un composant Web personnalisé.
• Rendu côté serveur: traitez le modèle sur le serveur à l'aide d'une langue back-end ou d'un outil comme Nunjucks.
• Prérocesseurs: Utilisez un préprocesseur comme PUG.

Idéalement, les modèles doivent se produire côté serveur ou pendant le processus de construction pour éviter la manipulation DOM inutile. Cependant, à des fins d'illustration, un exemple côté client utilisant le guidon suit:

(L'exemple de guidon serait inséré ici, montrant comment utiliser le guidon pour réaliser les modèles souhaités.)

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!