Vos Fonctions Perso

ViPHP
ViPHP | 3607 Messages

02 févr. 2008, 11:40

Bonjour à tous,
Depuis quelques temps, j'ai eu beaucoup besoin de me pencher sur des scripts javascript...
Et je me suis rendu compte d'une chose, il existe très peu de fonctions "simples" natives, du genre en php str_replace(), ou bien alors des fonctions qui existe mais ne fonctionne pas sous tout les navigateurs... (genre getElementsByClassName)...
Et je me suis dit, pourquoi pas créer un topic dans lequel on regrouperais les fonctions des uns et des autres?
Ce qui nous donnerais deux avantages:
  • on ne réinvente pas la roue à chaque fois
  • et pour ceux qui l'on déja inventé, pourquoi pas l'améliorer au travers des critiques (constructives) des autres
Voilà, ce n'est pour l'instant qu'une ébauche "d'énoncé"...
Je tiendrais à jour une liste des contribution dans ce premier post:
Vos fonctions
  1. # strReplace() ~ Fonction de remplacement de caractères dans une chaine
  2. # addLoadEvent() ~ Ajout d'événement dans le onLoad de la page (sans écraser les précédents)
  3. # getValueChecked() ~ Retourne la valeur sélectionnée d'un groupe de boutons radios
  4. # wait ~ Classe de gestion de "piles d'évennement"
  5. # in_array() ~ Fonction qui indique si une valeur appartient à un tableau
Code de la fonction:
function strReplace(search, replace, subject){
    //on récupère la première occurence de search
    position=subject.indexOf(search,0);
    
    //tant que l'on trouve des occurences de search
    while(position!=-1){
        //on les remplace par replace
        subject=  subject.substring(0,position) + 
                  replace + 
                  subject.substring(position+search.length,subject.length);

        // on cherche les occurences suivantes
        position=subject.indexOf(search,position+replace.length);
    }

    //on retourne la chaine modifiée
    return subject;
}
Exemple d'utilisation:
alert(strReplace('moche','beau','Je suis moche'));
alert(strReplace('s','i','Je suis moche'));
Voilà en espérant que ce topic vous inspire, vous aide, et que vous y apportiez votre contribution ;)
Modifié en dernier par jojolapine le 11 févr. 2008, 13:47, modifié 3 fois.

ViPHP
ViPHP | 4039 Messages

02 févr. 2008, 12:35

Héhé.. désolé de te décevoir, mais tu viens de réinventer la roue :D .. c'est plutôt une méthode qu'une fonction, mais regarde bien string.replace() ? :wink:

Et string.replace() utilise les expression régulières..

La ou JS est franchement faible, c'est plutôt dans la gestion des tableaux. (recherche dans un tableau et tout ça).

JS est un langage assez bizarre, mais qui a certaines forces (mon dernier projet est quas exclusivement en JS, je baigne dedans depuis 6 mois, et j'ai pris certains plis.. bien que l'OO en js est assez étrange, on peut y faire de chouettes trucs..
Mais qu'importe. (je suis ici - dernier petit projet)
Berze going social.

ViPHP
ViPHP | 3607 Messages

02 févr. 2008, 12:47

Je n'invente la roue qu'a moitiée... puisque, pour comparer avec php...
On avait preg_replace, mais pas str_replace...
Parce que je trouvais que faire une nouvelle regexp (qui si on ne connais pas se domaine peut s'avérer difficile) pour remplacer des bêtes caractères fixes... aucune utilité d'après moi d'utiliser elmt.replace...
Après ça se discute :-*
Si tu as des fonctions de recherche dans les tableaux n'hésite pas ;)

edit: pour ce qui est de l'implémentation de "ma" fonction en méthode, ça doit pas être très compliquer si?
quelque chose comme ça:

Code : Tout sélectionner

String.strReplace=function(a,b,c){...}
non?

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

02 févr. 2008, 15:30

En fait ce qui est bien avec la méthode replace c'est que tu peux utiliser les expressions régulière, mais ça n'a rien d'une obligation :
var str = 'Je suis moche';
str = str.replace('moche', 'beau');
donnera le même résultat que ta fonction :)


Mais même si l'exemple n'est pas judicieux, sur le principe il est évident qu'on s'est tous fait des librairires de fonctions javascript pour compenser certaines fonctionalités inexistantes genre trim/ltrim/rtrim, padleft/padright ...

Personnellement en voici une que j'utilise régulièrement pour surcharger l'élément onLoad de la page. Cela me permet d'inclure plusieurs scripts dans une page en étant sur que chacun ira s'inscrire dans le onLoad sans écraser les précédents :)
/**
 * Ajout d'événement dans le onLoad de la page (sans écraser les précédents)
 * @param Function : nom de la fonction a exécuter ou déclaration d'une fontion
 *		addLoadEvent(maFonction);
 *		addLoadEvent(function(){...});
 */
function addLoadEvent(func) {
   var oldOnLoad = window.onload;
   if (typeof window.onload != "function") { // Si aucun élément dans le onLoad, ajout de la fonction
      window.onload = func;
   }
   else { // Sinon, création d'une fonction reprenant les éléments précédents et ajoutant le nouveau
      window.onload = function() {
         if (oldOnLoad)
            oldOnLoad();
         func();
      };
   }
}
Et une seconde pour récupérer dans un groupe de boutons radio, la valeur de celui qui a été coché. Très utile pour un affichage de champs en cascade en fonction des réponses données, ou simplement pour envoyer des valeurs via ajax :) :
/**
 * Retourne la valeur sélectionnée d'un groupe de boutons radios
 * @param Object : objet des radios (ex: document.nom_formulaire.nom_radio)
 * @return String : retourne la valeur sélectionnée, ou vide si aucun bouton coché
 */
function getValueChecked(field) {
	if (!field) return '';
	if (field.length) { // s'il y a plusieurs boutons (field est alors un tableau)
		for(i=0; i<field.length;i++) {
			if (field[i].checked) // retourne la valeur du radio coché
				return field[i].value;
		}
	}
	else { // s'il n'y a qu'une seule option
		if (field.checked) // retourne sa valeur
			return field.value;
	}
	return ''; // aucun bouton radio coché
}
HTH
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

ViPHP
ViPHP | 4039 Messages

06 févr. 2008, 18:01

C'est rare que je reprends d'anciennes fonctions (parce que le temps que je veux les réutiliser, j'ai changé mes habitudes :wink: ), mais j'ai pondu ceci y'a pas longtemps, et je me dis que c'est quand même pratique (même si, peut-être, c'est à nouveau par manque de connaissance de ce qu'il y a d'autre).

Alors, Il s'agit d'un simple objet, qui sert de file d'attente en attendant un certain évènement (pratique pour une application Über-JS).

D'abord, on l'initialise avec un identifiant (du coup, il peut y en avoir plusieurs):

Code : Tout sélectionner

wait.wait("coco");
Alors, tout ce qu'on veut avoir exécuté une fois l'évènement achevé s'ajoute en toute simplicité:

Code : Tout sélectionner

wait.dothis("coco",function() { alert("weee, coco est arrivé!"); });
La fonction s'ajoute sur le tas, et on peut en ajouter plein, un peu partout dans le script.

Et pour montrer qu'on est prêts..

Code : Tout sélectionner

wait.ready("coco");
Et si jamais on ajoute des fonctions à l'identifiant une fois celui-ci prêt, la fonction s'exécute tout de suite. (même chôse si l'identifiant n'existe pas)


Certes, c'est très proche d'un callback. Mais les callback, c'est pas pratique, ça se définit à un endroit, et du coup on y perd quand même en clarté. Je l'utilise aussi bien pour tout ce qui est ajax, que pour ce qui est animation. (genre navigation avec fondu, pour empêcher le nouveau contenu d'apparaître avant que le prochain ne soit complètement disparu, tout en autorisant le traitement du contenu arrivant.. bon, c'est pas clair, mais c'est cool). Comme ça, je mets juste l'appel wait.ready() dans le callback, et je continue tout naturellement le flux de l'appli, sans trop me préoccuper, et sans surcharger le client avec des ontimeout() intempestifs.

Ah oui, le code:

Code : Tout sélectionner

wait={ counters:[], wait:function(cnt) { this.counters[cnt] = { // status: 1= occupied, 2= doing stuff, 3= free, 4=dying tasks:[], status:1, done:function() { this.status=2; this.work(); this.status = 3; }, job:function (fn) { this.tasks.push(fn); if (this.status === 3) { this.work(); } else { } }, work:function() { if (this.status > 1 && this.tasks[0] !== undefined) { while (work = this.tasks.shift()) { work(); } } } }; }, ready:function(cnt) { this.counters[cnt].done(); }, dothis:function(cnt,fn) { if (this.counters[cnt] !== undefined) { this.counters[cnt].job(fn); } else { fn(); } } };
C'est pas encore très mature, mais pour le moment ça marche plutôt bien :roll:
Mais qu'importe. (je suis ici - dernier petit projet)
Berze going social.

ViPHP
ViPHP | 3607 Messages

06 févr. 2008, 21:52

Bonsoir,
j'ai un peu de mal à saisir le but et le fonctionnement de ta classe... :-k (j'ai peut-être pas les neurones en face des synapses...)
Si tu pouvai mettre un petit exemple "réel"?
J'en profite aussi pour dire à Rile que la fonction addLoadEvent et bien pratique ;)
Pour l'autre j'en ai pas trop l'utilité, mais ça servira à d'autres!!!

edt: j'ai mis une petite description provisoire dans ma petite liste là haut... Si c'est pas très juste ou carrément faux, n'hésite pas ;)

Eléphant du PHP | 445 Messages

11 févr. 2008, 13:03

J'y vais de ma petite pierre.
function in_array(tableau,valeur)
{
	for(ligne in tableau)
	{
		if(tableau[ligne]==valeur)
		return true ;
	}
	
	return false ;
}

ViPHP
ViPHP | 4039 Messages

11 févr. 2008, 15:47

Bonsoir,
j'ai un peu de mal à saisir le but et le fonctionnement de ta classe... :-k (j'ai peut-être pas les neurones en face des synapses...)
Si tu pouvai mettre un petit exemple "réel"?
J'en profite aussi pour dire à Rile que la fonction addLoadEvent et bien pratique ;)
Pour l'autre j'en ai pas trop l'utilité, mais ça servira à d'autres!!!

edt: j'ai mis une petite description provisoire dans ma petite liste là haut... Si c'est pas très juste ou carrément faux, n'hésite pas ;)
voyons voyons..

Par exemple, tu as un site très simple, avec de simples pages. La navigation entre les pages se fait par ajax, le tout en fondu.

=> l'utilisateur clique sur un lien
=> la page actuelle disparait lentement
=> la page demandée apparait lentement.

De base (et pour quelque chôse de léger), l'opération qui va chercher la nouvelle page se déclenche quand la première page à terminé son animation. Par un callback par exemple.

Imagine maintenant que la page que l'utilisateur appelle a quand même besoin de traitements du côté client, un xml a parser par exemple. Tout ça ralentit l'affichage de la page.

Or si tu pouvais demander la nouvelle page, la traiter, pendant que la vieille page se fond dans l'arrière-plan, l'animation devient plus fluide, moins de délais d'attente, tu gagnerais en temps.. Or, avec l'ajax, on ne sait jamais vraiment quand l'info va arriver. Si on lance l'ajax dés que l'utilisateur clique, on risque de voir apparaître la nouvelle page pendant que l'ancienne s'occupait à fondre, et on risque même de louper l'action censée afficher la nouvelle page. Un beau brol quoi.

Avec le waiter, tu continues simplement ton code, et tu ne décides d'injecter la page (déjà traitée) dans le html qu'une fois l'animation terminée.

La c'est ultra simplifié un peu.. en quelque sorte, ça permet de paralléliser ton code, en ce quil peut faire deux ou trois chôses en même temps, sans qu'il ne perde son temps à attendre trop.

Si ça va toujours pas, je pourrais coder un exemple sur base du tuto ajax ou quelque chôse comme ça.
Mais qu'importe. (je suis ici - dernier petit projet)
Berze going social.

Eléphant du PHP | 99 Messages

18 févr. 2008, 15:02

Personnellement en voici une que j'utilise régulièrement pour surcharger l'élément onLoad de la page. Cela me permet d'inclure plusieurs scripts dans une page en étant sur que chacun ira s'inscrire dans le onLoad sans écraser les précédents :)
attachEvent (IE) et addEventLisener (FF) marchent très bien, aussi. ;)
Et ils peuvent être supprimés, ce qui est aussi très pratique (quoique dans un contexte onLoad, ce ne soit pas forcément utile ^^).

Moi j'ai codé une pitite fonction error. Elle affiche simplement un message d'erreur à l'écran. C'est simple, c'est basique, c'est tout con, mais ça peut être pratique en débuggage.

Code : Tout sélectionner

var error = function(text) { if(document.body) { var tmp = document.createElement('div'); tmp.innerHTML = '<b>[JSPetale Error]</b> '+text; document.body.appendChild(tmp); } else { document.write('<div><b>[JS Error]</b> '+text+'</div>'); } }
Et il est aussi possible de la lier avec l'évènement onError pour afficher directement les erreurs.

Clonage d'objets (ça évite de modifier les propriété d'un objet en éditant l'une de ses copies):

Code : Tout sélectionner

function clone(object) { var tmp = {} for (var attr in object) { tmp[attr] = object[attr]; } return tmp; }
Celle-ci n'est pas de moi (http://siddh.developpez.com/articles/ajax/), mais elle est bien pratique, aussi. C'est tout con, ça permet de lancer rapidement un instance ajax crossbrowser.

Code : Tout sélectionner

function getAjax() { var xhr; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { xhr = false; } return xhr; }