innerHTML ou/et DOM Methods

Version imprimable

05/03/2013, 05h06
arcade_stg_master

innerHTML ou/et DOM Methods

Bonjour,

J'ai une question vraiment qui me taraude depuis des mois et j'ai du mal à faire un choix, même si j'ai une idée.

Que dois-je utiliser ? innerHTML ou les méthodes DOM

Ma théorie serait d'utiliser
* le DOM pour tout ce qui est éléments intéractifs : Champs, boutons etc ... nettement plus lisible et plus souple pour ajouter des methods ou des events
* le innerHTML (étant soi disant plus rapide) pour tout ce qui est affichage de résultat (notamment quand il s'agit de gros tableaux avec plus d'une centaine d'enregistrements) par rapport à une recherche dans une base de donnée par exemple

Est-ce que je fais fausse route ou pas ...

Merci d'avance pour les réponses
05/03/2013, 09h24
SpaceFrog

Je préconise toujours de passer de préférence par les méthodes du DOM afin d'éviter tout souci de prise en compte hasardeuse du code inséré en innerHTML selon les navigatuers.
05/03/2013, 09h59
arnogues

Je conseille fortement de passer par innerHTML car c'est la méthode la plus rapide et la plus efficace pour produire du code DOM.

La seule contrainte c'est qu'il faut que tu fermes bien toutes tes balises.
Il n'y aura jamais d'interprétation hasardeuse des navigateurs à partir du moment où tu leurs fais manger du html correct.

La seule chose qu'il faut éviter c'est de prendre ce innerHTML depuis un noeud DOM et de le manipuler pour le réinjecter ensuite, car des navigateurs comme IE te retourne le innerHTML avec du HTML parfois interprété à sa manière (suppression des guillemets pour les attributs par exemple)

Ensuite si tu dois utiliser générer ton html à partir de données javascript, je te conseille de passer par un système de templating il en existe plusieurs :
- Handlebars
- MicroTEmplating de John Resig
- Underscore
...

A partir du moment ou tu commences à avoir beaucoup de HTML à produire depuis JS, je te déconseille de passer par le DOM, car en terme de performances ça sera horrible. Si tu travaille le HTML dans une chaine de caractères (String) et que ensuite tu envoies tout en une seule fois au DOM, en terme de perfs tu es gagnant
05/03/2013, 10h10
Bovino

A noter que innerHTML fait pleinement partie de la spécification DOM en HTML5.
05/03/2013, 11h08
faucheuse

L'utilisation de innertHTML n'est pas bloquée par certains browsers ?
05/03/2013, 11h17
SpaceFrog

Citation:

Je conseille fortement de passer par innerHTML car c'est la méthode la plus rapide et la plus efficace pour produire du code DOM.

La plus rapide ... j'en conviens.
Je reste cependant sceptique quand a la prise en compte intégrale du code de façon crossbrowser.
La méthode DOM est certes plus lente, mais à qui est à quelques microsecondes près ?
La methode de création par le DOM permet de s'assurer que l'element inséré est parfaitement pris en compte avec toutes ses propriétés pas le navigateur, vu que c'est le navigateur qui le crée au lieu d'avoir à parser du code html.
05/03/2013, 11h17
javatwister

non faucheuse, la méthode est universelle :roll:
05/03/2013, 11h42
arnogues

Citation:

Envoyé par SpaceFrog

La plus rapide ... j'en conviens.
Je reste cependant sceptique quand a la prise en compte intégrale du code de façon crossbrowser.
La méthode DOM est certes plus lente, mais à qui est à quelques microsecondes près ?
La methode de création par le DOM permet de s'assurer que l'element inséré est parfaitement pris en compte avec toutes ses propriétés pas le navigateur, vu que c'est le navigateur qui le crée au lieu d'avoir à parser du code html.

Il sera parfaitement pris en compte, et je peux te l'assurer.
Pour bien te rassurer, je peux même aller encore plus loin, j'ai codé un projet pendant 1 an 1/2, un projet full JS web et mobile
il y avait 800 classes JS, et énormément de HTML à produit depuis des templates.

Au final cela fonctionnait PARFAITEMENT sur :
PC/Mac :
- Safari, opera, IE 6-10, Chrome, firefox.
Mobile :
Symbian OS7, Blackberry 6+, Bada, IE Mobile, Android, IOS (Iphone/ipad)
05/03/2013, 11h47
SpaceFrog

J'ai eu tellement de déconvenues avec du code HTML inséré au pied de biche, avec des exceptions de prise en compte de propriétés que je reste avec le DOM, je en suis pas à quelques millisecondes près et chat échaudé craignant l'eau froide, je préfère maitriser les propriétés des me objets insérés.
05/03/2013, 16h08
Auteur

Citation:

Envoyé par SpaceFrog

J'ai eu tellement de déconvenues avec du code HTML inséré au pied de biche, avec des exceptions de prise en compte de propriétés que je reste avec le DOM, je en suis pas à quelques millisecondes près et chat échaudé craignant l'eau froide, je préfère maitriser les propriétés des me objets insérés.

pareil, la quantité de codes postés sur ce forum que l'on voit avec innerHTML (utilisé la plupart du temps pour insérer des lignes dans une table ou des éléments d'un select), me laisse dire qu'il vaut mieux imposer les fonctions DOM à un débutant et laisser innerHTML à une personne plus aguerrie (=qui maîtrise le DOM).
J'utilise innerHTML uniquement pour afficher du texte sans balise.

Si arcade_stg_master veut afficher les résultats de requêtes SQL dans une table, je conseille le DOM. Le code sera plus long sans doute, mais il sera propre. innerHTML avec des tables (ou select) c'est la catastrophe.
05/03/2013, 17h02
Watilin

Pour ma part, j'ai longtemps considéré innerHTML comme le diable, avant d'adopter un esprit un peu plus pragmatique.

Les méthodes du DOM feront toujours exactement ce qu'on leur demande (encore faut-il savoir exactement ce qu'on veut). En cas de faute de frappe, on a une erreur JavaScript claire.
La méthode innerHTML a l'avantage de faire gagner du temps à l'écriture et à la relecture, et permet de ne pas avoir à utiliser des variables temporaires pour manipuler les différents noeuds. À mon humble avis, si on lui donne du code HTML bien écrit, il n'y aura pas de surprises.
L'inconvénient de innerHTML est qu'on lui passe une chaîne. Le navigateur devra faire un travail d'ananlyse / compilation sur cette chaîne pour la transformer en un fragment DOM. Ce surcoût de temps sera amorti si on réutilise le fragment de nombreuses fois, et si le navigateur est assez intelligent pour garder en mémoire le fragment « compilé ».

Autrement dit, on peut considérer qu'un code utilisant les méthodes DOM est la version « assembleur » du innerHTML. Ca fait sensiblement la même chose, c'est plus long, moins lisible, mais c'est plus optimisé.
06/03/2013, 00h57
arnogues

Je pense qu'il faut arrêter de séparer débutant de pro. De toute manière toute personne qui arrive ici, doit normalement pouvoir évoluer et on doit lui donner la meilleure réponse, pas une réponse ou l'un dit blanc et l'autre dit noir.

Pendant quelques années il y a eu la mode du DOM, ou on construisait son dom à coup de document.createElement, Element.appendChild, Element.insertBefore, etc...
Le problème c'est que pour créer une page HTML on n'a pas fini d'utiliser ce genre de chose.

Il est vrai que de ce que certains remontent, il on retrouve aussi des innerHTML pour insérer des lignes dans le tableau, certe dans ce cas ce n'est pas bon, il faut d'abord et toujours créer le premier node avec du DOM et ensuite on injecte le HTML
06/03/2013, 09h59
Auteur

arnogues, si tu savais la quantité de codes dégueulasses que j'ai pu voir avec innerHTML... et dans la majorité des cas c'était l'oeuvre de débutants.
Quand je vois un message avec

Code:

document.getElementById("idElement").innerHTML = " avec une chaine de caractères de 50 lignes "

et à la fin un "ça marche pas" je n'ai aucune envie de corriger ça.

Le document.createElement() est fastidieux mais le code est propre et surtout on met en évidence les différentes étapes.

Pour moi innerHTML c'est comme document.write(), on commence par maîtriser l'essentiel pour ensuite aller plus loin, d'où la séparation débutant / expérimenté. On fait les choses étapes par étapes.

Pour en revenir aux tables, je préfère et de loin insertRow(), insertCell().

Je suis un adepte du DOM et de ces méthodes.

trops souvent je trouve des codes où dans une partie on utilise un innerHTML pour créer des élement puis ensuite des getElementById ($() en jQuery) pour retrouver dans le dom les objets qui ont étés créés
du coup le "gain de temp" de innerHTML est contrebalancé par des recherches inutiles d'élément.

avec le DOM quant on crée un élément on en a un référence donc pas de recherche
exmple
Code:

1 2 3 4 5 6 7 var uneVariable = 'Titre'; function test (id) { alert(document.getElementById(id).name); } myElement.innerHTML='<h1 id="myId">' + uneVariable + '</h1><a href="#" onclick="test(\'id\');">test</a>';
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var uneVariable = 'Titre'; var myH1 = document.createElement('H1'); myH1.appendChild( document.createTextNode(uneVariable) ); var myAHref = document.createElement('A'); myAHref.appendChild( document.createTextNode('test') ); myAHref.onclick = function () { alert(myH1.name); } myElement.appendChild(myH1); myElement.appendChild(myAHref);
plusieurs choses pour moi font que je préfaire le DOM
dans ce simple exemple on peut voir

que pour placer la valeur d'une variable (uneVariable) dans un innerHTML il faut concaterner des String outre le fait que ce soit dificile à lire c'est très consommateur de ressources et de temps. alors qu'avec le DOM on met la valeur simplement sans artifice (c'est juste un passage de référence).
que rapidement on se heurte à des pb de " et ' d'où des \. Avec le DOM aucun problème le js reste du js les String des String
qu'on se retrouve avec une fonction définie au niveau global (on peu l'éviter mais le code est alors dans la string donc dificile à déboguer). Alors que la méthode du onclick dans la version DOM est uniquement attaché à l'élément. Du coup si par la suite l'objet est détruit la méthode ne reste pas en mémoire pour rien (je n'aime pas les définition globales)
qu'il faut recherché dans le DOM à chaque click pour récupérer l'élément (h1) alors qu'avec le DOM on utilise directement la référence de l'objet crée.

au pire j'utilise le DOM pour afficher un texte dans un objet existant.
InnerHTML c'est en passer par l'interpète HTML du nanvigateur. et les informaticiens ont beau avoir mal traduit le mot interprète de l'anglais interpreter par interpreteur. ça reste un interprète qui va interpréter votre String. Je préfère me passer des interprétations du navigateur et créer moi même les objets don j'ai besoin.

A+JYT

Ton exemple est trop simple pour justifier l'utilisation du DOM,

Je te propose un morceau de HTML et mets le moi en DOM :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 tplEcoProfilPopin:'<h2 class="blockTitle blockTitleRed"><div class="title">{ESP_UNDERSTAND_ECOPROFIL_TITLE}</div></h2>' +
        '<div class="introPart">' +
        '<h3 class="blockSTitle">{ESP_ECOPROFIL_POPIN_CONTENT_TITLE}</h3>' +
        '<p>{ESP_ECOPROFIL_POPIN_CONTENT_TEXT}</p>' +
        '</div>' +
        '<div class="descPart">' +
        '<dl class="ecoProfilList">' +
        '<dt class="term firstTerm">{ESP_ECOPROFIL_POPIN_GREEN_COLOR}</dt>' +
        '<dd class="dfn dfn_25"><div class="txt">{ESP_ECOPROFIL_POPIN_GREEN_TEXT}</div><div class="graph"></div></dd>' +
        '<dt class="term">{ESP_ECOPROFIL_POPIN_ORANGE_COLOR}</dt>' +
        '<dd class="dfn dfn_60"><div class="txt">{ESP_ECOPROFIL_POPIN_ORANGE_TEXT}</div><div class="graph"></div></dd>' +
        '<dt class="term">{ESP_ECOPROFIL_POPIN_RED_COLOR}</dt>' +
        '<dd class="dfn dfn_85"><div class="txt">{ESP_ECOPROFIL_POPIN_RED_TEXT}</div><div class="graph"></div></dd>' +
        '</dl> ' +
        '</div>' +
        '<div class="blockLinks"><a href="#" class="btn btnGrey btnPrev btnReturnEcoProfil"><span>Retour</span></a></div>',

Maintenant transforme moi ça en DOM, et regarde la quantité de code que tu vas écrire.

Et imagine, ça c'est une des 200 vues du projet sur lequel j'ai travaillé.

BOn là le HTML est dans le JS en tant que template, mais une solution bien plus propre aurait été de stocker ça dans un fichier XML contenant tous les templates de VU pour un module, et rulez, au niveau de la maintenance c'est fingers in the noze

08/03/2013, 14h12
javatwister

documentFragment...
08/03/2013, 14h34
SpaceFrog

ou cloneNode ...

Citation:

Je te propose un morceau de HTML et mets le moi en DOM

quand je voit autant de ligne a cree je me dit autant le faire directement en html pourquoi passer par le dom quel que par c'est pas son role de cree des page

la raison primaire du dom associé a javascript c'est la dynamisation d'une page

Citation:

avec le DOM quant on crée un élément on en a un référence

c'est un des grand avantage du dom sa permet de referencer un element qui devra etre manipulé sans avoir recourt a son id (getElement.... )
Code:

1 2 3 4 5 6 var myH1 = document.createElement('H1'); myH1.appendChild(document.createTextNode(uneVariable) ); this.monelement=myElement.appendChild(myH1);
il y a aussi quand on créer un élément avec "document.createElement" même si il n'est pas inséré dans la page il existe et on peut lui faire toute sortes de manipulations sa sert par exemple a faire du traitement dans un canvas intermédiaire
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 var cvs=document.createElement('canvas'); var ctx=cvs.getContext('2d'); var ima = new Image(); ima.src = 'monimage.png'; ima.onload = function () { cvs.width=ima.width; cvs.height=ima.height; ctx.drawImage(ima,0,0); var idata = ctx.getImageData( 0, 0,ima.width,ima.height); var data = idata.data; for(var i = 0; i < data.length; i+=4) { var r = data[i]; var g = data[i+1]; var b = data[i+2]; if (r == rouge && g == vert && b == bleue){ data[i+3] = 0; } } idata.data = data; ctx.putImageData(idata,0,0); var base64 = cvs.toDataURL("image/jpg"); document.getElementById(elem).src=base64 }
en gros c'est sur si on doit pondre uniquement du html en grande quantité sans aucuns traitement autant utiliser innerHTML un peut comme avec php

@arnogues quand je vois ça je fuis. car ce que tu mets dans ton exemple est visiblement la construction d'une string qui va servir de modèle pour construire d'autre chaines en remplaçant les {XXX}

je te conseille de t'ammuser à installer un Webkit ou tout autre moteur HTML et de le lancer avec un déboguer C en pas à pas.
tu vas voir juste pour la constitution de la String modèle sans affectation des valeur 30 allocations mémoire pour test strings + autant de copy de string.

ensuite pour affecter les 9 valeur tu vas avoir 3 allocations / 2 copy par variables.

le tout passera dans la moulinette du moteur HTML ta string sera alors découpé en morceau (heureusement le moteurs est optimisé)
tout ce qui constitue ton modèle sera mis à la poubelle après création des eléments dans le dom et une copie de tes 9 variables sera placé dans les élément adéquat.

alors même si ça fait du texte à écrire dans le code source je préfère créer les 16 éléments de ton code et placer une référence de mes 9 variable dedans

le top c'est quand je vois du code comme celui que tu présente généré en jsp asp ou php
là ça deviens grandiose. nonseulement ont fait travailler le moteur inutilement on consomme des ressource avec js mais en plus le code étant généré par le serveur il est rechargé re-parsé re-compilé à chaque fois qu'on charge la page.

les quelques lignes qu'il faut pour faire ton modèle avec le DOM placé dans un fichier JS ne sont chargé qu'une fois et ne sont re-parsé et recompilé que si on à quitté son navigateur.

quant à ton exemple voici une version verbeuse
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 function tplEcoProfilPopin ( root, ESP_UNDERSTAND_ECOPROFIL_TITLE ESP_ECOPROFIL_POPIN_CONTENT_TITLE, ESP_ECOPROFIL_POPIN_CONTENT_TEXT, ESP_ECOPROFIL_POPIN_GREEN_COLOR, ESP_ECOPROFIL_POPIN_GREEN_TEXT, ESP_ECOPROFIL_POPIN_ORANGE_COLOR, ESP_ECOPROFIL_POPIN_ORANGE_TEXT, ESP_ECOPROFIL_POPIN_RED_COLOR, ESP_ECOPROFIL_POPIN_RED_TEXT ) { var h2j_h21 = document.createElement('H2'); h2j_h21.className = 'blockTitle blockTitleRed'; var h2j_div1 = document.createElement('DIV'); h2j_div1.className = 'title'; h2j_div1.appendChild( document.createTextNode(ESP_UNDERSTAND_ECOPROFIL_TITLE) ); h2j_h21.appendChild(h2j_div1); root.appendChild(h2j_h21); var h2j_div2 = document.createElement('DIV'); h2j_div2.className = 'introPart'; var h2j_h31 = document.createElement('H3'); h2j_h31.className = 'blockSTitle'; h2j_h31.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_CONTENT_TITLE) ); h2j_div2.appendChild(h2j_h31); var h2j_p1 = document.createElement('P'); h2j_p1.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_CONTENT_TEXT) ); h2j_div2.appendChild(h2j_p1); root.appendChild(h2j_div2); var h2j_div3 = document.createElement('DIV'); h2j_div3.className = 'descPart'; var h2j_dl1 = document.createElement('DL'); h2j_dl1.className = 'ecoProfilList'; var h2j_dt1 = document.createElement('DT'); h2j_dt1.className = 'term firstTerm'; h2j_dt1.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_GREEN_COLOR) ); h2j_dl1.appendChild(h2j_dt1); var h2j_dd1 = document.createElement('DD'); h2j_dd1.className = 'dfn dfn_25'; var h2j_div4 = document.createElement('DIV'); h2j_div4.className = 'txt'; h2j_div4.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_GREEN_TEXT) ); h2j_dd1.appendChild(h2j_div4); var h2j_div5 = document.createElement('DIV'); h2j_div5.className = 'graph'; h2j_dd1.appendChild(h2j_div5); h2j_dl1.appendChild(h2j_dd1); var h2j_dt2 = document.createElement('DT'); h2j_dt2.className = 'term'; h2j_dt2.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_ORANGE_COLOR) ); h2j_dl1.appendChild(h2j_dt2); var h2j_dd2 = document.createElement('DD'); h2j_dd2.className = 'dfn dfn_60'; var h2j_div6 = document.createElement('DIV'); h2j_div6.className = 'txt'; h2j_div6.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_ORANGE_TEXT) ); h2j_dd2.appendChild(h2j_div6); var h2j_div7 = document.createElement('DIV'); h2j_div7.className = 'graph'; h2j_dd2.appendChild(h2j_div7); h2j_dl1.appendChild(h2j_dd2); var h2j_dt3 = document.createElement('DT'); h2j_dt3.className = 'term'; h2j_dt3.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_RED_COLOR) ); h2j_dl1.appendChild(h2j_dt3); var h2j_dd3 = document.createElement('DD'); h2j_dd3.className = 'dfn dfn_85'; var h2j_div8 = document.createElement('DIV'); h2j_div8.className = 'txt'; h2j_div8.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_RED_TEXT) ); h2j_dd3.appendChild(h2j_div8); var h2j_div9 = document.createElement('DIV'); h2j_div9.className = 'graph'; h2j_dd3.appendChild(h2j_div9); h2j_dl1.appendChild(h2j_dd3); h2j_div3.appendChild(h2j_dl1); root.appendChild(h2j_div3); var h2j_div10 = document.createElement('DIV'); h2j_div10.className = 'blockLinks'; var h2j_a1 = document.createElement('A'); h2j_a1.href = '#'; h2j_a1.className = 'btn btnGrey btnPrev btnReturnEcoProfil'; var h2j_span1 = document.createElement('SPAN'); h2j_span1.appendChild( document.createTextNode('Retour') ); h2j_a1.appendChild(h2j_span1); h2j_div10.appendChild(h2j_a1); root.appendChild(h2j_div10); }
c'est pas la mer à boire
A+

Citation:

Envoyé par sekaijin

@arnogues quand je vois ça je fuis. car ce que tu mets dans ton exemple est visiblement la construction d'une string qui va servir de modèle pour construire d'autre chaines en remplaçant les {XXX}

je te conseille de t'ammuser à installer un Webkit ou tout autre moteur HTML et de le lancer avec un déboguer C en pas à pas.
tu vas voir juste pour la constitution de la String modèle sans affectation des valeur 30 allocations mémoire pour test strings + autant de copy de string.

ensuite pour affecter les 9 valeur tu vas avoir 3 allocations / 2 copy par variables.

Tu n'as pas du comprendre comment fonctionnait les derniers moteur de templating existant... (ie : microtemplating, template de underscore, handlebars)
Ils transforment ta string en une fonction JS et c'est assez performant.
Ensuite, si tu vois une concaténation dans la string, c'est pour la lisibilité au niveau du code, l'ajout du + permet de repasser à la ligne sans mettre le bordel dans la lisibilité, un minifier/compresseur de code te transformera ça en un seule string.

Je te conseille par exemple d'analyser le code de celui-ci :
http://ejohn.org/blog/javascript-micro-templating/
Et après tu regarderas le code du templating de underscore, ils ont repris le code du microtemplating.
Enfin bref, c'est pareil pour tous les moteurs de template performant, la string devient une fonction JS, et ils ne font pas de concaténation, mais utilisent un array avec push. Donc quand tu parles de nouvelle instance de string lolilooool. Et là au cas ou tu n'as toujours pas compris, ce n'est même pas webkit qui rentre en jeu pour construire la chaine, mais le moteur JS.
Ensuite tu transforme ça en DOM, et rulez, et ça se fait ultra rapidement hein.

Ou alors toi et moi on s'est pas du tout compris....

Citation:

Envoyé par sekaijin

le tout passera dans la moulinette du moteur HTML ta string sera alors découpé en morceau (heureusement le moteurs est optimisé)
tout ce qui constitue ton modèle sera mis à la poubelle après création des eléments dans le dom et une copie de tes 9 variables sera placé dans les élément adéquat.

Alors justement tu n'as pas compris, ce modèle n'est injecté dans le HTML que lorsque qu'on lui à injecté l'objet qui permettra d'obtenir la string finale. Je t'ai donné un exemple de code avec juste des variables, mais souvent tu as des "for", "if", etc....

Citation:

Envoyé par sekaijin

alors même si ça fait du texte à écrire dans le code source je préfère créer les 16 éléments de ton code et placer une référence de mes 9 variable dedans

Bonjour la lisibilité, regarde mes quelques lignes qu'un simple designer peut modifier, et regarde ton pavé de 100 lignes...

Citation:

Envoyé par sekaijin

le top c'est quand je vois du code comme celui que tu présente généré en jsp asp ou php
là ça deviens grandiose. nonseulement ont fait travailler le moteur inutilement on consomme des ressource avec js mais en plus le code étant généré par le serveur il est rechargé re-parsé re-compilé à chaque fois qu'on charge la page.

les quelques lignes qu'il faut pour faire ton modèle avec le DOM placé dans un fichier JS ne sont chargé qu'une fois et ne sont re-parsé et recompilé que si on à quitté son navigateur.

Si j'avais eu un client intelligent j'aurai déporté un maximum de choses coté serveur, mais quand tu as un client qui en plus de ne pas vouloir faire d'effort sur ses webservice, découpe encore ses webservice parce que blabla perf blabla, toussa, et qu'en plus il nous demande de faire en front ce qu'il pourrait faire en back, tu te doute bien que lui demander de générer du HTML coté back est quelque chose d'impossible.

Mais tu m'excuseras, mais maintenant les performances des moteurs de templating sont telles, que parser une énorme string de template prend un temps ridicule.
Citation:
Envoyé par sekaijin
quant à ton exemple voici une version verbeuse
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 function tplEcoProfilPopin ( root, ESP_UNDERSTAND_ECOPROFIL_TITLE ESP_ECOPROFIL_POPIN_CONTENT_TITLE, ESP_ECOPROFIL_POPIN_CONTENT_TEXT, ESP_ECOPROFIL_POPIN_GREEN_COLOR, ESP_ECOPROFIL_POPIN_GREEN_TEXT, ESP_ECOPROFIL_POPIN_ORANGE_COLOR, ESP_ECOPROFIL_POPIN_ORANGE_TEXT, ESP_ECOPROFIL_POPIN_RED_COLOR, ESP_ECOPROFIL_POPIN_RED_TEXT ) { var h2j_h21 = document.createElement('H2'); h2j_h21.className = 'blockTitle blockTitleRed'; var h2j_div1 = document.createElement('DIV'); h2j_div1.className = 'title'; h2j_div1.appendChild( document.createTextNode(ESP_UNDERSTAND_ECOPROFIL_TITLE) ); h2j_h21.appendChild(h2j_div1); root.appendChild(h2j_h21); var h2j_div2 = document.createElement('DIV'); h2j_div2.className = 'introPart'; var h2j_h31 = document.createElement('H3'); h2j_h31.className = 'blockSTitle'; h2j_h31.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_CONTENT_TITLE) ); h2j_div2.appendChild(h2j_h31); var h2j_p1 = document.createElement('P'); h2j_p1.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_CONTENT_TEXT) ); h2j_div2.appendChild(h2j_p1); root.appendChild(h2j_div2); var h2j_div3 = document.createElement('DIV'); h2j_div3.className = 'descPart'; var h2j_dl1 = document.createElement('DL'); h2j_dl1.className = 'ecoProfilList'; var h2j_dt1 = document.createElement('DT'); h2j_dt1.className = 'term firstTerm'; h2j_dt1.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_GREEN_COLOR) ); h2j_dl1.appendChild(h2j_dt1); var h2j_dd1 = document.createElement('DD'); h2j_dd1.className = 'dfn dfn_25'; var h2j_div4 = document.createElement('DIV'); h2j_div4.className = 'txt'; h2j_div4.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_GREEN_TEXT) ); h2j_dd1.appendChild(h2j_div4); var h2j_div5 = document.createElement('DIV'); h2j_div5.className = 'graph'; h2j_dd1.appendChild(h2j_div5); h2j_dl1.appendChild(h2j_dd1); var h2j_dt2 = document.createElement('DT'); h2j_dt2.className = 'term'; h2j_dt2.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_ORANGE_COLOR) ); h2j_dl1.appendChild(h2j_dt2); var h2j_dd2 = document.createElement('DD'); h2j_dd2.className = 'dfn dfn_60'; var h2j_div6 = document.createElement('DIV'); h2j_div6.className = 'txt'; h2j_div6.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_ORANGE_TEXT) ); h2j_dd2.appendChild(h2j_div6); var h2j_div7 = document.createElement('DIV'); h2j_div7.className = 'graph'; h2j_dd2.appendChild(h2j_div7); h2j_dl1.appendChild(h2j_dd2); var h2j_dt3 = document.createElement('DT'); h2j_dt3.className = 'term'; h2j_dt3.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_RED_COLOR) ); h2j_dl1.appendChild(h2j_dt3); var h2j_dd3 = document.createElement('DD'); h2j_dd3.className = 'dfn dfn_85'; var h2j_div8 = document.createElement('DIV'); h2j_div8.className = 'txt'; h2j_div8.appendChild( document.createTextNode(ESP_ECOPROFIL_POPIN_RED_TEXT) ); h2j_dd3.appendChild(h2j_div8); var h2j_div9 = document.createElement('DIV'); h2j_div9.className = 'graph'; h2j_dd3.appendChild(h2j_div9); h2j_dl1.appendChild(h2j_dd3); h2j_div3.appendChild(h2j_dl1); root.appendChild(h2j_div3); var h2j_div10 = document.createElement('DIV'); h2j_div10.className = 'blockLinks'; var h2j_a1 = document.createElement('A'); h2j_a1.href = '#'; h2j_a1.className = 'btn btnGrey btnPrev btnReturnEcoProfil'; var h2j_span1 = document.createElement('SPAN'); h2j_span1.appendChild( document.createTextNode('Retour') ); h2j_a1.appendChild(h2j_span1); h2j_div10.appendChild(h2j_a1); root.appendChild(h2j_div10); }
c'est pas la mer à boire
A+
Mer à boire, mer à boire, oui, bien avant que les systèmes de template existe, je faisais pareil, mais à un moment il y a un mot qui vient à mon esprit : MAINTENABILITE, et oui, on est pas tous seuls à travailler sur un projet. Des gens comme toi et moi on le niveau pour comprendre ou modifier ce genre de chose, mais quand tu travailles avec des juniors ou des designers ou même que tu autorises ton CDP à modifier les templates. Il est plus facile d'avoir des vues html que ton pavé imbitable.
Parce que ton pavé, imagine si je devais le reproduire dans les 200 autres vues de l'application. J'en aurai pas fini, et en terme de maintenance c'est ZERO.

09/03/2013, 12h32
sekaijin

effectivement il existe des micro templating
mais du coup ce n'est plus un innerHTML le micro templating consiste justement à produire une fonction JS qui assure le boulot.

une simple question si ton template est une string produite par le développeur
pourqu'oi l'envoyer au client pour qu'il génère une fonction qu'il utilisera pour afficher le contenu ?

perso j'utilise (parfois) un générateur dans on outil de build
je lui donne mon html il me fournis une fonction que je n'ai plus qu'à placer dans un fichier js et à utiliser.

à quoi sert de faire à chaque fois tout le boulot sur le poste du client ?

A+jyt

Bonjour,
j'aurais plutôt vu une structure du type

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var html = [
  {
    'tag': 'div',
    'id': 'super_id',
    'class': 'nom_class',
    'content': 'hello world'
  },
  {
    'tag': 'div',
    'class': 'nom_class',
    'content':{
      'tag':'H1',
      'content': 'le titre'
    }
  }
];

et une fonction récursive qui me créerait les éléments, avec les méthodes DOMmesque.

c'est exactement ce que propose Extjs
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.DomHelper

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var dh = Ext.DomHelper; // create shorthand alias
// specification object
var spec = {
    id: 'my-ul',
    tag: 'ul',
    cls: 'my-list',
    // append children after creating
    children: [     // may also specify 'cn' instead of 'children'
        {tag: 'li', id: 'item0', html: 'List Item 0'},
        {tag: 'li', id: 'item1', html: 'List Item 1'},
        {tag: 'li', id: 'item2', html: 'List Item 2'}
    ]
};
var list = dh.append(
    'my-div', // the context element 'my-div' can either be the id or the actual node
    spec      // the specification object
);

Code:

1
2
3
4
5
6
7
8
// create the node
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
// get template
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
 
for(var i = 0; i < 5, i++){
    tpl.append(list, [i]); // use template to append to the actual node
}

A+JYT

10/03/2013, 09h58
SpaceFrog

J'aurais codé façon extJS sans le savoir :mrgreen: ??
http://www.developpez.net/forums/d53...ynamique-form/
10/03/2013, 19h48
SylvainPV

innerHTML ou document.appendChild ? Aucun des deux !

Sauf cas exceptionnels, il est bien plus pratique de reposer sur du templating.

Si vous n'avez pas besoin d'une vue dynamique, et si votre data se trouve côté serveur, alors utilisez un templating serveur: JSP, PHP...

Si vous voulez une vue dynamique avec des contrôles Javascript, chargez vos données en AJAX sous format JSON et confiez la génération de vos vues à une librairie de templating.

Quelques librairies de templating Javascript :
- http://beebole.com/pure/
- http://handlebarsjs.com/
- http://akdubya.github.com/dustjs/

Et un article très complet de tests de différentes solutions de templating :
http://engineering.linkedin.com/fron...ustjs-and-more
10/03/2013, 19h59
Bovino

Sylvain, ta réponse est quelque peu incohérente...
Que tu passes par une librairie de templating est une chose, mais ça n'implique que le fait que tu laisses à ce script choisir pour toi la méthode utilisée, tu ne parviendras jamais à modifier le DOM en JavaScript sans innerHTML ou Element.appendChild()...
10/03/2013, 20h39
SylvainPV

Certes Bovino, mais le développeur lambda ne devrait pas à avoir à se poser la question. Quand je dis "Aucun des deux", je réponds à la question "Que dois-je utiliser" et non "Que doit utiliser ma librairie de templating". Ces librairies sont créées par des spécialistes qui s'occupent de les optimiser, et des benchmarks comparatifs existent pour les questions de performance. Le développeur ne devrait se concentrer que sur l'aspect pratique et la productivité plutôt que de vouloir réinventer la roue.

Je ne pense pas que l'auteur du topic s'intéresse aux différences fondamentales en perf et praticité entre document.appendChild et innerHTML. Il cherche simplement un moyen simple et efficace de générer beaucoup de HTML. Auquel cas la meilleure réponse est d'utiliser un outil conçu exprès pour ça.
11/03/2013, 17h50
le_chomeur

Sujet a troll ...

Les adeptes du forums aillants pas mal d'année d'expériences en terme de problème utilisateurs, ont tous eu / vu / résolu des problèmes lié a innerHTML , résolu avec le dom utilisé a bon escient !

sur ce ... :)