Est-il une bonne pratique pour générer du html avec du javascript

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>

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

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

Vous pouvez aussi vérifier trait de soulignement js: documentcloud.github.com/underscore/#template Il joue très bien avec backbone.js
Le choix de mong 1-4: dépend de la quantité de contenu à être injecté.(préférez les 4 pour les plus gros) comment beaucoup de différentes parties html devra être annexé au total (3 ou 4). ce que sb est familier. (Influence de dev temps). Si tu ne connais pas les outils de son juste une petite modal qui va être injecté une fois, je ne sais pas amy de mieux que de pur js pour le faire (1-2)

InformationsquelleAutor ckarbass | 2008-10-21

65

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.
- Ach, l'homme, j'ai été à la recherche pour que l'autre jour.
- JQuery template semble être mort, voir stackoverflow.com/questions/7911732/...
- Fiorato: le lien est mort :s
- Le lien est mort, comme Adrien points. Vous suggérons de mettre à jour votre réponse à inclure: Mustache.js
- Quelqu'un peut-il expliquer, pourquoi un jQuery-réponse est également accepté comme l'un? Je doute que cela soit la meilleure pratique!
- Pire encore, le plugin jQuery est mort, cette réponse est obsolète.
InformationsquelleAutor Jim Fiorato
13

Si vous devez absolument pour 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'aide de tableaux est beaucoup plus rapide, en particulier dans IE. J'ai fait quelques tests avec des cordes il y a un moment avec IE7, Opera et FF. L'opéra a pris seulement 0,4 s pour effectuer le test, mais IE7 n'avaient pas terminé au bout de 20 MINUTES !!!! ( Non, je ne plaisante pas. ) Avec la matrice de IE a été très rapide.
- N'aimez-vous pas IE performances JavaScript? 😛
- J'ai changé de navigateur, il y a longtemps, donc je ne souffre pas tant que ça. IE était un horrible navigateur, mais il est de mieux en mieux. Mais je doute que je vais jamais revenir.
- Le ralentissement des performances vu dans la première méthode est probablement parce que la chaîne de résultat doivent être transférés de 200 fois, et les allocations de mémoire peut être lent. Après deux itérations que vous avez "testingtesting". Après trois itérations, cette chaîne est jeté et la mémoire avec assez de place pour "testingtestingtesting" est attribuée. Et ainsi de suite 200 fois avec en augmentant progressivement la longueur. Cependant s.join() alloue une nouvelle chaîne de caractères comme un résultat qui est assez long pour s'adapter à tous d'entre eux, puis copie dans chacun d'eux. Une répartition beaucoup plus rapidement.
- d'accord, son un Shlemiel Le Peintre de l'algorithme. joelonsoftware.com/articles/fog0000000319.html
- Microsoft Bord FTW
InformationsquelleAutor some
8

L'une des deux premières options est à la fois normal et acceptable.

Je vais donner des exemples de chacun dans Prototype.
```
//assuming JSON looks like this:
//{ 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }
```
Approche #1:
```
var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); //inserts at bottom
```
Approche #2:
```
var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); //inserts at bottom
```
- La construction de générer le HTML explicitement à l'aide de chaînes de caractères plutôt que des éléments du DOM est plus performant (en supposant que la concaténation de chaîne n'est pas un vrai problème), et lisible.
- Dans IE concaténation de chaîne est toujours un problème. Utiliser un tableau à la place.
InformationsquelleAutor savetheclocktower
7

Peut-être une approche plus moderne consiste à utiliser un template de la langue tels que Moustache, qui a des mises en œuvre dans de nombreuses langues, y compris le code javascript. Par exemple:
```
var view = {
  url: "/hello",
  name: function () {
    return 'Jo' + 'hn';
  }
};

var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', 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 Guidon qui a plus de fonctionnalités, et est compatible avec la Moustache.

InformationsquelleAutor Tzach
6

Voici un exemple, à l'aide de mon Simple Des Modèles plug-in jQuery:
```
var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);
```
- Neat. Je pourrais avoir utilisé quelque chose qui ressemble à un gros projet il y a quelques mois.
- Oui. Concis et soigné !
InformationsquelleAutor Andrew Hedges

Vous pouvez ajouter le modèle de code HTML à votre page dans un div caché et ensuite utiliser cloneNode et votre favori de la bibliothèque de l'interrogation des installations pour la remplir

/* 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*/})

InformationsquelleAutor Leo

3

Divulgation: je suis le responsable de BOB.

Il y est une bibliothèque javascript qui rend ce processus beaucoup plus facile appelé BOB.

Pour votre exemple:
```
<div><img src="the url" />the name</div>
```
Cela peut être généré avec BOB par le code suivant.
```
new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"
```
Ou avec la syntaxe plus courte
```
new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"
```
Cette bibliothèque est très puissant et peut être utilisé pour créer des structures très complexes avec insertion de données (similaire à d3), par exemple.:
```
data = [1,2,3,4,5,6,7]
new BOB("div").i("ul#count").do(data).i("li.number").co(BOB.d).up().up().a("a",{"href": "www.google.com"}).s()
//=> "<div><ul id="count"><li class="number">1</li><li class="number">2</li><li class="number">3</li><li class="number">4</li><li class="number">5</li><li class="number">6</li><li class="number">7</li></ul></div><a href="www.google.com"></a>"
```
BOB ne prend actuellement pas en charge de l'injection de données dans les DOM. C'est sur la todolist. Pour l'instant vous pouvez simplement utiliser la sortie avec la normale JS ou jQuery, et le mettre où vous voulez.
```
document.getElementById("parent").innerHTML = new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s();
//Or jquery:
$("#parent").append(new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s());
```
J'ai fait cette bibliothèque parce que je n'étais pas heureux avec toutes les alternatives comme jquery et d3. Le code très compliqué et difficile à lire. Travailler avec BOB est, à mon avis, ce qui est évidemment partial, beaucoup plus agréable.

BOB est disponible sur Bower, de sorte que vous pouvez l'obtenir en cours d'exécution bower install BOB.

InformationsquelleAutor Automatico
2
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.
1) C'est une option. Construire le code html avec du JavaScript côté client et ensuite l'injecter dans les DOM dans son ensemble.

Remarque qu'il y est un paradigme qui sous-tend cette approche: le serveur sorties juste des données et (en cas d'interaction) reçoit les données du client asyncronoulsy avec des requêtes AJAX. Le côté client code operete comme un stand-alone JavaScript de l'application web.

L'application web peut fonctionner, rendre l'interface, même sans que le serveur soit up (bien sûr, il n'affiche pas les données ou d'offrir tout type d'interaction).

Ce paradigme est de faire adopter souvent ces derniers temps, et l'ensemble des cadres sont construits autour de cette approche (voir backbone.js pour exemple).

2) Pour des raisons de performances, lorsque cela est possible, il est préférable de construire le code html dans une chaîne, puis de l'injecter dans son ensemble dans la page.

3) Ceci est une autre option, ainsi que l'adoption d'un cadre d'Application de Web. D'autres utilisateurs ont posté des différents moteurs de template disponible. J'ai l'impression que vous avez les compétences, de les évaluer et de décider de suivre cette voie ou non.

4) une Autre option. Mais la servir comme un texte/html; pourquoi JSON? Je n'aime pas cette approche car les mélanges de PHP (votre serveur de langue) avec Html. Mais je l'adopte souvent comme un compromis raisonnable entre l'option 1 et 4.

Ma réponse: vous êtes déjà à la recherche dans la bonne direction.

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

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

InformationsquelleAutor Paolo

Vous devez vous connecter pour publier un commentaire.

Il y est une bibliothèque javascript qui rend ce processus beaucoup plus facile appelé BOB.