Librairies javascript, personnalisation de syntaxe

Version imprimable

Voir 40 message(s) de cette discussion en une page

09/04/2008, 17h08
SpaceFrog

Librairies javascript, personnalisation de syntaxe
Il est possible et ce de façon assez rapide de rendre javascript un peu plus semblable à d'autre langages.

Je pense en particulier aux codeurs php. Combien de fois cherchez vous l'équivalent de telle ou telle fonction php en javascript et tou ça pour des raisons d'une syntaxe différente ...

exemple :
Pour la syntaxe PHP
en php explode( chaine, separateur)
en javascript chaine.split('separateur')

on peut donc uniformiser ainsi:

Code:

var explode = function(str,sep){return str.split(sep);}

qui s'uilisera plus aisément pour les codeur php comme ceci:
Code:

1 2 3 var chaine="lkjhkl.dsfsq.qdsfsfd.sdqffs"; var TabChaine=explode(chaine,'.');
Pour des raccoucis de code

Code:

var ArrInf=Math.floor;
Code:

1 2 3 4 s'utilise simplement comme ceci var chiffre=5489.25; alert(ArrInf(chiffre));
[*]Je vous propose donc dans ce thread de créer deux petites librairies
- La première a destination des codeurs php javascript afin d'uniformiser un peu les syntaxes = > LibPHP.js
- La seconde pour simplifier certaines syntaxes javascript un peu lourdes
  LibShot.js
il suffira ensuite de mettre les deux libs dans un repertoire et de les appeler ainsi dans le head de vos pages:
Code:

1 2 <script type='text/javascript' src="LibPHP.js"></script> <script type='text/javascript' src="LibShort.js"></script>
Merci de bien vouloir poster vos propositions ci après en indiquant si il s'agit de la lib PHP ou Short
Nous testeeroins en concatènerons vos propositions et vous propsoerons ici même les deux librairies.

mes premières recherches dasn le domaine:

Des shorts ...

Code:

1
2
3
4
5
6
7
8
9
10
11
var toInt = parseInt;
var Chrono = setTimeout;
var Recur=SetTimeOut;
var getElt = function(id){return document.getElementById(id);};
var appChild = function(parent, child) {return parent.appendChild(child);};
var NewTag = function(tag) {return document.createElement(tag);};
var child = function(e,i){return e.childNodes[i]};
var charAt = function(str,idx) {return str.charAt(idx);};
var floor = Math.floor
var round = Math.round;
var ceil=Math.ceil;

le replace général de PHP:
destructif

Code:

1
2
3
4
replaceAll= function(str,old,rep){
while(str.indexOf(old)>-1){str=str.replace(old,rep)}
return str;
}

non destructif

Code:

1
2
3
4
5
String.prototype.replaceAll= function(old,rep){
var str = this;
while(str.indexOf(old)>-1){str=str.replace(old,rep)}
return str;
}

Code:

var array_count=function(arr){ return array.length; }

l'explode (corrigé merci marts)

Code:

var explode= function(sep, str) {return str.split(sep);}

09/04/2008, 17h54
marts

Juste pour faire mon emmerdeur : la syntaxe de explode php c'est explode(separateur,chaine) (tu as inversé les 2 paramètres). :mrgreen:
10/04/2008, 09h46
SpaceFrog
emmerdeur ? non bien au contraire j'apprécie que cela intéresse au moins quelqu'un ... Merci Mart :king:

en fait je ne suis torp emprunt de javascript, moi il faudrait que je fasse la librairie en php pour uniformiser à la syntaxe de javascript ^^

Vous pouvez également ajouter des fonctions "manquantes"
Par exemple déterminer si un chiffre est pair ou impair ...
Code:

1 2 3 function isPair(chiffre){ return (parseInt(chiffre) & 1)=='0')?true:false; }
10/04/2008, 11h08
le_chomeur

Salut spaffy , je vois que tu as bien attaqué , il faudrait référencer les fonctions les plus couramment utilisée que cela soit en javascript ou en php :)
Ainsi que les méthodes récurrentes ( taille d'un tableau , id d'un objet ... ;) )

que penses tu de faire appel aux communautés php/js de developpez ?
10/04/2008, 12h23
SpaceFrog

Je te laisse le soin de faire le lien si tu veux ...

Je comptais juste dans un premier temps voir la popularité de ce thread, mais l'idée est excellente !

Si on met un explode, faut mettre un implode

Code:

1
2
3
function implode(sep, array) {
  return array.join(sep);
}

Aussi, en vrac :

Code:

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
// Transform a string into a char array
var toCharArray = function(str) {
  str=String(str);
  var result = [];
  for (var i=0; i!=str.length; i++) {
     result[i]=str.charAt(i);
  }
};
 
// Transform a string into a number array
var toCharCodeArray = function(str) {
  str=String(str);
  var result = [];
  for (var i=0; i!=str.length; i++) {
     result[i]=str.charCodeAt(i);
  }
};
 
// Do something asynchronously
var async = function(func) {
  setTimeout(func, 0);
};
 
// Show some message to the user but continue to execute the code
var asyncAlert = function(txt) {
  setTimeout(function() { alert(txt); }, 0);
};
 
// Add an error to the console but continue to execute the code
var asyncThrow = function(ex) {
  async(function() {
    throw ex;
  });
};
 
// Create a delegated function
var createDelegate = function(obj, func) {
  return function() { return func.apply(obj, arguments); }
}
 
// Attach an event
var addHandler = function(obj, ev, func) { // IE
  if(obj.attachEvent) { obj.attachEvent('on'+ev, func); }
  else if (obj.addEventListener) { // FF, OP, SF, ...
    obj.addEventListener(ev, func, true);
  } else { // Old browsers
    var oldHandler = obj['on'+ev];
    obj['on'+ev] = function() {
      var returnValue = true;
      try { 
         if (oldHandler.apply(obj, arguments) === false) {
            returnValue = false;
         }
      } catch (ex) {}
      try { 
         if (func.apply(obj, arguments) === false) {
            returnValue = false;
         }
      } catch (ex) {}
      return returnValue;
    }
  }
}

Sinon, on devrait assez facilement trouver ma fonction getXHR sur le forum (qui renvoie la version la plus récente de l'objet XHR sous IE). Ainsi que la fonction getFileContent(url) (alias file(url)).

J'ai plein d'autres trucs comme ca en réserve, mais faut encore que je les trouves ;)

12/04/2008, 16h45
FremyCompany

Attention à Chrono qui sert souvent à faire un vrai chronomètre et que tu risque de virer pour placer setTimeout.

Sinon, j'ai retrouvé une fonction que j'aime assez bien :

Code:

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
// Transform a collection into an array
function $a(arr) {
    if (arr instanceof Array) { return arr; }
    else {
        var arr2 = [];
        for (var i=0; i<arr.length; i++) {
            arr2[i] = arr[i]||arr.item(i);
        }
        return arr2;
    }
}
 
// Filter an array
Array.prototype.where = function(test,comparer,value) {
  var arr = [];
  if (arguments.length>1) {
     if (typeof(comparer) != "function") {
        comparer = new Function('a', 'b', 'return a'+ comparer+'b');
     }
     var prop = test;
     test = function(i) { return comparer(i[prop],value) }
  } else if (typeof(test) != "function") {
     test = new Function('i', 'return '+test);
  }
  for (var i=0; i!=this.length; i++) {
      if (test(this[i])) {
          arr.push(this[i])
      }
  }
}

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
// Solution 1
var allItems = document.getElementsByTagName('div');
allItems = $a(allItems);
allItems = allItems.where("i.name=='menu'");
 
// Solution 2
var theName = "menu";
var allItems = $a(document.getElementsByTagName('div')).where(function(item) { return item.name==theName; });
 
// Solution 3
var allItems = $a(document.getElementsByTagName('div')).where('name','==','menu');

14/04/2008, 17h36
SpaceFrog

Fremy,

Mille mercis pour ces propositions ;)

Par contre, je ne suis pas chaud pour inclure directement XHR dans ces fonctions, je tiens à rester 100% javascript dans un premier temps, quitte à prévoir un module complémentaire pour Ajax ...
16/04/2008, 17h01
grunk

si celà peut intéresser il existe une petite lib JS qui permet d'utiliser les fonction de php que vous affectionnez :
http://kevin.vanzonneveld.net/techbl...pjs_licensing/

Plus d'infos ici : http://www.webinventif.fr/phpjs-port...en-javascript/ , le site officiel semblant en rade pour le moment
16/04/2008, 17h28
SpaceFrog

Oui grink on est passés par là avant ...
Mais merci qaund même
29/04/2008, 10h58
SpaceFrog
Un prototype qui peut s'avérer utilse également:
Pour répéter N fois un catactère:
Code:

1 2 3 String.prototype.Repeat=function(Nr){ return new Array(Nr+1).join(this) }
utilisation:

Code:

alert('*'.Repeat(10))

Retour sur les tableaux, une petite contribution, la fonction shuffle :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
shuffle = function(obj) {
	var arr = new Array(obj.length);
	var dispo = new Array(obj.length);
	var item;
	for(var i=0;i<obj.length;i++){
		dispo[i] = i;
	}
	while(obj.length){
		with(Math){item=floor(random()*dispo.length)}
		arr[dispo[item]]=obj.pop();
		dispo.splice(item,1);
	}
	return arr;
}

ou en version prototype :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Array.prototype.Shuffle = function() {
	var arr = new Array(this.length);
	var dispo = new Array(this.length);
	var item;
	for(var i=0;i<this.length;i++){
		dispo[i] = i;
	}
	while(this.length){
		with(Math){item=floor(random()*dispo.length)}
		arr[dispo[item]]=this.pop();
		dispo.splice(item,1);
	}
	return arr;
}

Tiens, un classique auquel on avait pas encore pensé, la fonction include grâce à Ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function include(fichier,id){
	var monScript = document.getElementById('id');
	var xhr=null;
    if(window.XMLHttpRequest) {xhr = new XMLHttpRequest();}
    else if(window.ActiveXObject){xhr = new ActiveXObject("Microsoft.XMLHTTP");}
	else{
		var erreur = document.createElement('div');
		erreur.innerHTML='Une erreur s\'est produite,<br />La page n\'a pas pu être chargée...';
		monScript.parentNode.insertBefore(erreur,monScript);
	}
    xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200){
			monScript.insertBefore(xhr.responseText,monScript);
		}
	}
    xhr.open("GET", fichier, true);
    xhr.send(null);
}

Et dans le body, à l'endroit de l'include :

Code:

1
2
3
<script type="text/javascript" id="un_id">
include('newData.php','un_id');
</script>

Bon, pas vraiment testé, mais ça devrait marcher...
Sinon, désolé, la syntaxe est pas tout à fait identique qu'en php, mais l'id de la balise est important pour placer le contenu...

+1 pour cette fonction. Mais je ferait un petit changement.
Au lieu de faire un insertBefore mon script grâce à l'id envoyé en paramètre, j'utiliserai un id ou un noeud DOM cible pour le rendu.
De cette manière tu peux appeler ton script depuis un fichier externe et ca fonctionne aussi ; )
Code:

1 2 3 4 5 6 7 8 9 function include(fichier, renderNode){ renderNode = typeof renderNode == 'string' ? document.getElementById(renderNode ) : renderNode ; // Je ne termine pas, // je n'ai pas le temps je verrai cela plus tard, // ou si quelqu'un en à l'envie et le temps... // l'idée c'est d'importer le nouvel arbre // (ca c'est un peu galère) // et de l'insérer dans la renderNode }
Sinon il est bien ce thread ! +1 encore : p

a plus

24/10/2008, 12h27
Bovino

Oui, c'est effectivement mieux comme tu le présentes, cependant, j'avais opté pour la solution que j'ai postée car l'un des buts de ces scripts est de créer des fonctions similaires à celles de php, or en php, le include se place à l'emplacement où il doit être inséré !

Encore sur les tableaux : array_search() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function array_search(valeur, tableau, strict){
	if(tableau && typeof tableau === 'object' && typeof tableau.length === 'number' && typeof tableau.splice === 'function' && !(tableau.propertyIsEnumerable('length'))){
		var i =0,
		strict = strict || false;
		while(tableau[i]){
			if( strict && tableau[i] === valeur){return i}
			else if( !strict && tableau[i] == valeur){return i}
			i++;
		}
		return false;
	}
	else{throw new Error("Le deuxième paramètre n'est pas un tableau !")}
}

valeur ==> Valeur recherchée,
tableau ==> Le tableau sur lequel on recherche,
strict ==> booléen optionnel (false par défaut) pour savoir si l'on fait la recherche de type.
Notez la complexité pour vérifier que le type du 2e argument est bien un tableau ! JavaScript n'a pas prévu ce genre de vérification !

EDIT : Page pour tester :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
</style>
<script type="text/javascript"> 
<!--// [CDATA[ 
function array_search(valeur, tableau, strict){
	if(tableau && typeof tableau === 'object' && typeof tableau.length === 'number' && typeof tableau.splice === 'function' && !(tableau.propertyIsEnumerable('length'))){
		var i =0,
		strict = strict || false;
		while(tableau[i]){
			if( strict && tableau[i] === valeur){return i}
			else if( !strict && tableau[i] == valeur){return i}
			i++;
		}
		return false;
	}
	else{throw new Error("Le deuxième paramètre n'est pas un tableau !")}
}
function test(){alert(array_search('3', [1, 2, 3]))}
// ]] -->
</script> 
</head>
<body onload="test()">
<div id="container">
</div>
</body>
</html>

12/12/2008, 13h04
le_chomeur

Salut bovino :)

si je puis me permettre quelque remarque ^^

- ta methode renvoie l'index de l'objet pourquoi ne pas offrir la possibilité de paramètrer le retour : l'index, l'objet , true/false

- de plus il serait bon en terme de rapidité d'exécuter une boucle while inversé

- dernière remarque mais qui tient plus du fonctionnel j'aurais plutôt nommé la méthode IsInArray()

;-)
12/12/2008, 13h39
Bovino
Salut le_chomeur,

Citation:

ta methode renvoie l'index de l'objet pourquoi ne pas offrir la possibilité de paramètrer le retour : l'index, l'objet , true/false

Citation:

dernière remarque mais qui tient plus du fonctionnel j'aurais plutôt nommé la méthode IsInArray()

C'est pour respecter la règle de départ : reproduire les fonctions PHP en JavaScript, donc même nom, même syntaxe, mêmes valeurs de retour ;)
Pour info, j'ai eu cette idée ce matin car j'ai dû faire un truc similaire pour le boulot, mais du coup, mon code 'réel', c'est :
Code:

1 2 3 4 5 6 7 8 Array.prototype.in_array = function(indice){ var i =0; while(this[i]){ if(this[i] === indice){return i} i++; } return false; }
Citation:

de plus il serait bon en terme de rapidité d'exécuter une boucle while inversé

C'est-à-dire ??? avec i=this.length et i-- ?

Sinon, merci pour tes remarques !

EDIT :

Citation:

Envoyé par Spaffy

La première a destination des codeurs php javascript afin d'uniformiser un peu les syntaxes = > LibPHP.js

Voir 40 message(s) de cette discussion en une page