Mini moteur de template

Soyez le premier à donner votre avis sur cette source.

Vue 4 991 fois - Téléchargée 310 fois

Description

Ceci est un mini moteur de template. L'idée met venue de Smarty en php. Je n'ai implémenté que la condition if et la boucle while. Voici la synatxe:
- {if condition}{/}
- {while condition}{/}
- {$var}
Pour passer une variable, utiliser vdata:
test = new JTemplate();
test.vdata={myvar:"sa marche", test:3};

Source / Exemple :


function JTemplate() {}
JTemplate.prototype={
	vdata:null,
	str_var:"this.vdata.",
	p_this: new RegExp("[\$]","gmi"),
	patern: new RegExp("(\{(/|(if|while) ([^\{\}]+)|([\$])([^\{\} ]+))\})","gmi"),
	error:null,
	parse: function(data) {
		var datab=data.split(this.patern);
		var action=[];
		var strout="";
		for (var i=0; i < datab.length; i++ )
		{
			if ( datab[i].match(this.patern) )
			{
				if ( datab[i+2] == "if" )
				{
					if ( !action.length || (action.length && action[action.length-1].v) )
					{
						test=eval(datab[i+3].replace(this.p_this,this.str_var));
						action.push({t:"if",v:test});
					}
					else
						action.push({t:"if",v:false});
				}
				else if ( datab[i+2] == "while" )
				{
					if ( !action.length || (action.length && action[action.length-1].v) )
					{
						test=eval(datab[i+3].replace(this.p_this,this.str_var));
						action.push({t:"while",v:test,p:i});
					}
					else
						action.push({t:"while",v:false,p:i});
				}
				else if ( datab[i+1] == "/" )
				{
					if ( !action.length )
					{
						this.error="error";
						alert(this.error);
						return false;
					}
					else if (action[action.length-1].t != "while" || !action[action.length-1].v )
						action.pop();
					else if (action[action.length-1].t == "while")
					{
						i=action[action.length-1].p-6;
						action.pop();
					}
				}
				else if ( datab[i+4] == "$" )
				{
					if ( !action.length || ( action.length && action[action.length-1].v ))
					{
						myvar=(this.str_var+datab[i+5]).replace(this.p_this,this.str_var);
						myvar=eval(myvar);
						strout+=myvar;
					}
				}
				i+=5;
			}
			else
			{
				if ( !action.length || ( action.length && action[action.length-1].v ))
					strout+=datab[i];
			}
		}
		return strout;
	}
}

str="start encore un test {if 1} <ul>{while $test++<5}\
<li>loop haha {$test} </li>{/}</ul> end {/} hihhiih";

test = new JTemplate();
test.vdata={myvar:"sa marche", test:3};
document.write(str+"<hr />");
document.write(test.parse(str));

Conclusion :


Have fun

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

abdoulax
Messages postés
875
Date d'inscription
samedi 17 mai 2003
Statut
Membre
Dernière intervention
22 juin 2012
-
Pour ce qui sont intéressés par le système de template, jquery a un plugin pour utiliser ce genre de méthode.

;-)
kankrelune
Messages postés
1293
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
21 mai 2015
-
Je rajouterais que le DOM c'est bien en abuser ça craint... quand tu as une grosse quantité de html a générer utiliser le modèle DOM devient très vite inutilement lourd et fastidieux a lire/maintenir... .. .

Très bon concept... je ne regrette que l'absence de {foreach}, si on reprend la syntaxe Smarty, pour le parcourt de tableau... .. .

@ tchaoo°
Arto_8000
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
5 -
depression -> Mais d'un autre côté tu sépare le HTML (affichage) du javascript (modèle) ce qui permet d'avoir un code davantage orienté objet (ce qui comporte beaucoup d'avantages). Tu peux ainsi modifier le modèle sans avoir à te soucier de l'affichage et modifier l'affichage sans avoir à te soucier du modèle.
abdoulax
Messages postés
875
Date d'inscription
samedi 17 mai 2003
Statut
Membre
Dernière intervention
22 juin 2012
-
DOM c'est beaucoup plus élégant mais beaucoup plus cassage de cervo. J'utilise aussi régulièrement DOM mais parfois il est beaucoup plus rapide d'utiliser directement les balises. En plus, tu gagnes sur la taille du fichier JavaScript et je t'avoue qu'en rajoutant mon système de framework, tu pers aussi sur la taille!!

En tant qu'utilisateur de Smarty, je trouve le concepte de template très pratique et permet d'avoir un code bien plus claire. Après, il est vrai que le PHP et Javascript sont différent.

Enfin après ce n'est qu'une manière de faire parmis t'en d'autre (surtout en Javascript).

Have fun
XtremDuke
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3 -
En fait, l'utilisation de Template ne s'applique pas uniquement à l'affichage Depression. C'est une très bonne méthode de gestion de STRING.

Par exemple, dernièrement, j'ai été confronté au problème suivant :
J'avais sur un document Js une liste d'entêtes XML à envoyer via Ajax. Chaque entête avait une voir deux propriétés spécifiques. Exemple :

var xmlHeaders = {
action : '',
getProperty : '',
etc...
}

Ici le système de template est tout à fait convenant. De plus cela évite d'avoir N variables qui se promènent.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.