Discussion :

[arcade_stg_master]

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

[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.

[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

[Bovino]

A noter que innerHTML fait pleinement partie de la spécification DOM en HTML5.

[faucheuse]

L'utilisation de innertHTML n'est pas bloquée par certains browsers ?

[SpaceFrog]

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.

[javatwister]

non faucheuse, la méthode est universelle

[arnogues]

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)

[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.

[Auteur]

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.

[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é.

[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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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().

[sekaijin]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

1. 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).
   
2. 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
   
3. 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)
   
4. 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

[arnogues]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[javatwister]

documentFragment...

[SpaceFrog]

ou cloneNode ...

[Invité]

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

[arnogues]

@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....

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....

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...

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.

quant à ton exemple voici une version verbeuse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.