nothus

Exemple de scripts : Ajax, chargement de la page, etc. : comment ajouter des déclencheurs en simili-BB-code

Noter ce billet

par

Nothus

, 10/05/2015 à 12h08 (1155 Affichages)

Bonjour,

Qui, alors qu'il reçoit des données au format texte ou dans une page où il intervient en prestataire extérieur, ne s'est pas retrouvé en position délicate lorsqu'ils souhaitait traiter une donnée, afficher quelque chose sans une référence absolue dans le DOM (le casse-tête par excellence...) ou simplement déclencher un timer, sans toucher au code initiale de la page ?

Ci-dessous une partie d'une solution possible :

à partir d'une référence au DOM (ici, par défaut, body, on cherche une expression régulière précise, qui comporte dans une des deux références le type (ici soit un déclencheur, soit une fonction évaluée), et remplace la chaîne initiale par le résultat
on boucle donc à la fois sur l'élément, qui remplace la chaîne trouvée par le résultat comme indiqué, mais aussi sur le résultat lui-même : ainsi, il peut exister des profondeurs différentes (on fait appeler à une puis une autre référence ou fonction, à la manière d'étapes)
ce type de structuration permet, parce que l'on peut gérer tous les types de JS, de déclencher des fonctions prédéfinies en JS sans passer par du JSON en résultat de la requête AJAX dont une partie serait évaluée (problème de sécurité dramatique...), ni de bidouiller à partir de timers pas forcément adaptés (vérifier tous les X mili-secondes la présence ou non d'un élément du DOM par exemple)

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
<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<meta charset="utf-8"> 
	<title>Nothus - Editeur en ligne</title> 
	<style type="text/css"> 
	</style> 
</head> 
<body> 

<div id="test"><ul>
	<!-- Ici, "Fonction" fait référence à du code évalué : on récupére la variable $Test[1], qui ramène, par la même méthode, à $Test[2], qui est un string -->
	<li>évaluer du code, avec plusieurs rappels : <b>%%Fonction: $Test[1];%%</b></li> 
	<!-- Ici, "Declencheur" fait référence à une variable qui peut être (ou non) une fonction (dans mon exemple, ça en est systématiquement une : idéal pour gérer des retours de requête AJAX -->
	<li>un déclencheur existant : <i>%%Declencheur:3%%</i></li> 
	<!-- Ici, une erreur volontaire -->
	<li>un déclencheur non-existant : <i>%%Declencheur:4%%</i></li> 
</ul></div>

<script type="text/javascript"> 
try { window.addEventListener("load",function() { 
	
	$Test = { 
		1: 'Hé %%Fonction: "coucou "+$Test[2];%%', 
		2: 'toi !', 
		3: function() { return 'Sinon ça va ?'; } 
	}; 
	
	$Declencheurs = function() { 
		
		this.Analyser = function(ObjHTML) { 
			if ( 
				typeof ObjHTML!="object" 
			) 
				var ObjHTML = document.getElementsByTagName("body")[0]; 
			/* la variable "secu" évite des boucles infinies malheureuses... */ 
			var secu = -99; 
			/* r[0] : ce qui sert de remlacement, r[1] : le type pour le switch, r[2] : le contenu à évaluer ou à retourner */ 
			var ExpReg = /\%\%([0-9a-zA-Z]+)\:(.[^\%]*)\%\%/; 
			while ( 
				ExpReg.test(ObjHTML.innerHTML) 
				& 
				secu<0 
			) { 
				var r = ObjHTML.innerHTML.match(ExpReg); 
				var tmp = ""; 
				switch(r[1]) { 
					
					default:
						break; 
					
					case "Fonction": 
						tmp = eval("(function() { return "+r[2]+" })()"); 
						break; 
					
					case "Declencheur":
						if (typeof $Test[r[2]]!="undefined") { 
							tmp = $Test[r[2]](); 
						} else { 
							tmp = "oups, ce déclencheur "+r[2]+" n\'a pas été trouvé !"; 
						} 
						break; 
					
					/* on peut ajouter évidemment d'autres types pour le switch, voir lancer une autre expression régulière si nécessaire, pour détailler, par exemple, des groupes d'actions différentes */ 
					
				} 
				if (typeof tmp!="string") { 
					tmp = ""; 
				} 
				ObjHTML.innerHTML = ObjHTML.innerHTML.replace(r[0],tmp); 
				secu++; 
			} 
		}; 
		
	}; 
	
	$Declencheurs = new $Declencheurs(); 
	$Declencheurs.Analyser(); 

}); } catch(e) { 
	alert("Votre navigateur ne semble pas compatible avec grand chose..."); 
}
</script>
</body>
</html>