Y a-t-il une meilleure pratique pour générer le html avec javascript

Question

Je suis d'appeler un service web qui retourne un tableau d'objets JSON. Je veux profiter de ces objets et de remplir un div avec HTML. Disons que chaque objet contient une adresse url et nom.

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

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

Quelle est la meilleure pratique pour cela? Je peux voir quelques façons de le faire:

1. Concaténer des chaînes
2. Créer des éléments
3. Utiliser un plugin de template
4. Générer le code html sur le serveur, puis servir via JSON.

Answer 1

Options #1 et #2 sont va être votre plus immédiate et directe de la options, cependant, pour les deux options, vous allez vous sentir de la performance et de la maintenance de l'impact par la construction de chaînes ou de création d'objets DOM.

De template n'est pas immature, et que vous voyez ce message dans la plupart des principaux frameworks Javascript.

Voici un exemple dans JQuery Template de Plugin qui va vous sauver la performance succès, et c'est vraiment, vraiment simple:

var t = $.template('<div><img src="${url}" />${name}</div>');

$(selector).append( t , {
     url: jsonObj.url,
     name: jsonObj.name
});

Je dis allez les frais de route (et plus performant, plus facile à gérer), et l'utilisation de templates.

Answer 2

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

Utilisez un tableau temporaire :

L’utilisation de tableaux est beaucoup plus rapide, en particulier dans Internet Explorer. J’ai fait quelques tests avec des cordes il y a quelque temps avec IE7, Opera Opera et suiv., a pris seulement 0,4 s pour effectuer le test, et IE7 n’avait pas terminé au bout de 20 MINUTES !!! (Non, je ne plaisante pas.) Avec tableau IE a été très rapide.

Answer 3

Une des deux premières options est fréquente et acceptable.

Je vais donner des exemples de chacune d’elles dans le Prototype.

Approche #1 :

Approche #2 :

Answer 4

Voici un exemple, à l’aide de mes Modèles Simple plug-in pour jQuery :

Answer 5

Peut-être une approche plus moderne, est d'utiliser un langage de templating comme la Moustache, qui a des mises en œuvre dans de nombreuses langues, y compris le code javascript. Par exemple:

var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("{{title}} spends {{calc}}", view);

Vous obtenez même un avantage supplémentaire - vous pouvez réutiliser les mêmes modèles dans d'autres lieux, tels que du côté serveur.

Si vous avez besoin de plus compliqué modèles (si les déclarations, les boucles, etc.), vous pouvez utiliser le Guidon qui a plus de fonctionnalités, et est compatible avec la Moustache.