Existe-t-il une meilleure pratique pour générer html avec javascript


Answers

Si vous devez absolument concaténer des chaînes, au lieu de la normale:

var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }

utiliser un tableau temporaire:

var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");

L'utilisation de tableaux est beaucoup plus rapide, en particulier dans IE. J'ai fait quelques tests avec des chaînes il y a quelques temps avec IE7, Opera et FF. Opera a pris seulement 0.4s pour effectuer le test, mais IE7 n'avait pas fini après 20 minutes !!!! (Non, je ne plaisante pas.) Avec le tableau IE était très rapide.

Question

J'appelle un service Web qui renvoie un tableau d'objets dans JSON. Je veux prendre ces objets et remplir une div avec HTML. Disons que chaque objet contient une URL et un nom.

Si je voulais générer le code HTML suivant pour chaque objet:

    <div><img src="the url" />the name</div>

Y a-t-il une meilleure pratique pour cela? Je peux voir quelques façons de le faire:

  1. Concaténer les chaînes
  2. Créer des éléments
  3. Utilisez un plugin de template
  4. Générez le code HTML sur le serveur, puis servez-vous via JSON.



Vous pouvez ajouter le modèle HTML à votre page dans un div masqué, puis utiliser cloneNode et les fonctionnalités d'interrogation de votre bibliothèque préférée pour le peupler

/* CSS */
.template {display:none;}

<!--HTML-->
<div class="template">
  <div class="container">
    <h1></h1>
    <img src="" alt="" />
  </div>
</div>

/*Javascript (using Prototype)*/
var copy = $$(".template .container")[0].cloneNode(true);
myElement.appendChild(copy);
$(copy).select("h1").each(function(e) {/*do stuff to h1*/})
$(copy).select("img").each(function(e) {/*do stuff to img*/})



Voici un exemple, en utilisant mon plugin Simple Templates pour jQuery:

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);



Y a-t-il une meilleure pratique pour cela? Je peux voir quelques façons de le faire:

  1. Concaténer les chaînes
  2. Créer des éléments
  3. Utilisez un plugin de template
  4. Générez le code HTML sur le serveur, puis servez-vous via JSON.

1) Ceci est une option. Construire le code HTML avec JavaScript sur le côté client, puis l'injecter dans le DOM dans son ensemble.

Notez qu'il existe un paradigme derrière cette approche: le serveur ne génère que des données et (en cas d'interaction) reçoit des données du client asyncronoulsy avec des requêtes AJAX. L'opérateur de code côté client en tant qu'application Web JavaScript autonome.

L'application web peut fonctionner, restituer l'interface, même sans que le serveur soit en cours (bien sûr, elle n'affichera aucune donnée et n'offrira aucune sorte d'interaction).

Ce paradigme est en train d'être adopté souvent ces derniers temps, et des frameworks entiers sont construits autour de cette approche (voir backbone.js par exemple).

2) Pour des raisons de performances, il est préférable, dans la mesure du possible, de créer le code HTML dans une chaîne, puis de l'injecter dans son intégralité dans la page.

3) Ceci est une autre option, ainsi que l'adoption d'un cadre d'application Web. D'autres utilisateurs ont posté divers moteurs de modèles disponibles. J'ai l'impression que vous avez les compétences pour les évaluer et décider de suivre ou non cette voie.

4) Une autre option. Mais servez-le comme un texte brut / html; pourquoi JSON? Je n'aime pas cette approche car elle mélange PHP (votre langage serveur) avec Html. Mais je l'adopte souvent comme un compromis raisonnable entre les options 1 et 4 .

Ma réponse: vous regardez déjà dans la bonne direction.

Je suggère d'adopter une approche entre 1 et 4 comme je le fais. Sinon, adoptez un framework web ou un moteur de template.

Juste mon avis basé sur mon expérience ...




Related