Librairies javascript, personnalisation de syntaxe

**SpaceFrog** · 09/04/2008, 17h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var chaine="lkjhkl.dsfsq.qdsfsfd.sdqffs";
var TabChaine=explode(chaine,'.');

Pour des raccoucis de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var ArrInf=Math.floor;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 09/04/2008, 17h13

mes premières recherches dasn le domaine:

Des shorts ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

non destructif

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

l'explode (corrigé merci marts)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**marts** · 09/04/2008, 17h54

Juste pour faire mon emmerdeur : la syntaxe de explode php c'est explode(separateur,chaine) (tu as inversé les 2 paramètres).

**SpaceFrog** · 10/04/2008, 09h46

emmerdeur ? non bien au contraire j'apprécie que cela intéresse au moins quelqu'un ... Merci Mart

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function isPair(chiffre){
return (parseInt(chiffre) & 1)=='0')?true:false;
}

**le_chomeur** · 10/04/2008, 11h08

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 ?

**SpaceFrog** · 10/04/2008, 12h23

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 !

**FremyCompany** · 12/04/2008, 16h37

Si on met un explode, faut mettre un implode

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Aussi, en vrac :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**FremyCompany** · 12/04/2008, 16h45

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

**FremyCompany** · 13/04/2008, 16h42

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 14/04/2008, 17h36

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 ...

**grunk** · 16/04/2008, 17h01

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

**SpaceFrog** · 16/04/2008, 17h28

Oui grink on est passés par là avant ...
Mais merci qaund même

**SpaceFrog** · 29/04/2008, 10h58

Un prototype qui peut s'avérer utilse également:
Pour répéter N fois un catactère:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

utilisation:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert('*'.Repeat(10))

**Bovino** · 08/10/2008, 17h58

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**Bovino** · 22/10/2008, 12h55

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**kaymak** · 24/10/2008, 11h55

+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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 24/10/2008, 12h27

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é !

**Bovino** · 12/12/2008, 10h52

Encore sur les tableaux : array_search() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**le_chomeur** · 12/12/2008, 13h04

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()

;-)

**Bovino** · 12/12/2008, 13h39

Salut le_chomeur,

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}