begin process at 2012 02 09 18:27:37
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

 > MINI MOTEUR DE TEMPLATE

MINI MOTEUR DE TEMPLATE


 Information sur la source

Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Classé sous :template, smarty, moteur Niveau :Débutant Date de création :05/12/2008 Date de mise à jour :05/12/2008 15:51:49 Vu / téléchargé :3 535 / 221

Auteur : abdoulax

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note


 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

  • 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));
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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

05 décembre 2008 15:51:49 :
Un zip pour les flemmars

 Sources du même auteur

Source avec Zip DIV APPARITION FUN
Source avec Zip BANNIÈRE, DIAPORAMA, FONDU, AJAX
Source avec Zip Source avec une capture VUE 360° SIMPLE
Source avec Zip Source avec une capture SIMPLE ACCUEIL ANIMÉ
Source avec Zip Source avec une capture MENU DYNAMIQUE DÉROULANT W3C

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture 3D AVEC WEBGL + MESH par Hakumbaya
Source avec Zip Source avec une capture CANVAS I3D : 3D SOUS JAVASCRIPT SANS WEGGL par Hakumbaya
Source avec Zip Source avec une capture MOTEUR DE RECHERCHE SANS PHP par jdmcreator
D.SEARCH :: MOTEUR DE RECHERCHE QVDLM par DomJ
Source avec Zip Source avec une capture RPG GROUND ENGINE par Cyreb

Commentaires et avis

Commentaire de depression le 05/12/2008 11:13:02

Euh, c'est quoi l'intérêt de développer un moteur de templates en javascript?

Commentaire de abdoulax le 05/12/2008 11:24:18

Pour mieux séparer le code et les vues. Pourquoi utiliser un moteur de template en PHP? Bon, c'est vrai que c'est certainement moins utile, mais cela peut servir par exemple d'ans un système AJAX... Pour ma part, j'ai d'abord réalisé cette class pour éviter d'avoir des balise HTML en plein milieu de mon code Javascript:
data="<p>ceci est exemple" + varriable1 + "suite de l'exemple" + var2\
"blah blah</p>" + var3 + "<div>balise</div>" + ...;

Commentaire de XtremDuke le 05/12/2008 14:09:26

Bravo Abdoulax, je trouves ton idée très bonne.
Même s'il est vrai qu'on emploie encore peu les templates Javascript, c'est un concept qui devient à la mode et on en voit de plus en plus.
C'est dommage que tu ne proposes pas un Zip avec un exemple concret car cela aurait permis aux sceptiques de comprendre l'intérêt du template. Pour ma part, je n'ai pas non plus testé ta source car je suis faignant du copier/coller.

J'attends une MAJ avec impatience.

A+

Commentaire de depression le 05/12/2008 14:49:34

Perso, j'ai horreur de mettre toute une portion de (X)HTML de cette façon.

Je préfère tout créer avec le DOM, je trouve cela beaucoup plus élégant.

Commentaire de XtremDuke le 05/12/2008 15:04:11

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 : '<action name="{name}" value="{value}"/>',
     getProperty : '<property name="{name}"/>',
     etc...
}

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

Commentaire de abdoulax le 05/12/2008 15:49:32

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

Commentaire de Arto_8000 le 06/12/2008 02:06:00

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.

Commentaire de kankrelune le 08/06/2009 16:10:51 8/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°

Commentaire de abdoulax le 22/06/2011 12:06:43

Pour ce qui sont intéressés par le système de template, jquery a un plugin pour utiliser ce genre de méthode.

;-)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

moteur de recherche+frames [ par poloute ] Bonjour,Comment faire avec le moteur de recherche interne v2 pour que le visiteur saisisse sa demande dans le cadre du haut et obtienne la réponse dan programmation java d'un moteur de recherche [ par calou34 ] voilà je dois programmer un moteur de recherche ou l'utilisateur rentre ces mots clés et une page affiche tous les résultat avec les liens et une desc Moteur de recherche en java [ par spiff79 ] je dois programmer un moteur de recherche type google en java et je n'ai aucune idée sur la question, si qq'un peut m'aider!Merci developper un moteur de recherche dans une base de donnée access [ par foued123 ] Bonjourje doit faire un moteur de recherche dans une base de donnée access en utilisant frontpage comme éditeur de site et en utilisant comme serveur moteur de recherche [ par fvr ] JackJackBonjour à tousEtant débutant, je cherche un javascript pour le problème suivant:J'ai crée une page avec trois cadres:1/cadre haut / sommaire2/ Moteur recherche internet avec fenêtre pop up [ par Krysteen ] Malgré des mois de recherches intenses, je ne parviens pas à trouver de script pour un moteur de recherche interne qui aie les fonctions dont j'ai bes Moteur de calcul sur un formulaire [ par twentyseven ] Bonjour,Je souhaite effectuer des claculs (+, *, % ...) sur des formulaires représentant des devis, factures...Le nombre de calculs étant important, j Problème de gestion de fenetres [ par laurentbalmer ] Voilà,Sur la page principale de mon site, j'ai en "include" le menu avec des rubriques dont une qui est un moteur de recherche qui s'ouvre dans une au moteur de recherche [ par cherie_cheri ] je veux faire un moteur de recherche a partir de fichier situ&#233; sur le reseau d'une entreprise.Le dossier s'appele hardware.Dans ce dossier ya ple Un moteur de recherche pour mon site [ par farguais ] Bonjour tt le monde,Voila j aimerai faire un moteur de recherche sur mon site pour des joueurs de Tennis de table,soit en html ou ne javascript ,L exe


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,139 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales