Mini moteur de template

Soyez le premier à donner votre avis sur cette source.

Vue 5 549 fois - Téléchargée 366 fois

Télécharger le projet
Commenter

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
Télécharger le projet

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 1
22 juin 2011 à 12:06
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
8 juin 2009 à 16:10
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 7
6 déc. 2008 à 02:06
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 1
5 déc. 2008 à 15:49
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 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
5 déc. 2008 à 15:04
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.
S'inscrire maintenant

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.

Du même auteur (abdoulax)