[Article] Espaces de noms (ou namespace) en JavaScript

**bigboomshakala** · 24/03/2009, 02h18

Bonjour,

Cet article va vous expliquer comment créer des espaces de noms en JavaScript et par la même occasion comment créer une bibliothèque JavaScript.

N'hésitez pas à me faire part de vos remarques/questions
Bonne lecture!

jnore · 26/03/2009, 19h33

Salut

Merci pour ce tuto. Il se trouve que je suis en plein dedans en ce moment.
Il est compréhensible et concis.

Parfois plus que certains livres...

**Bovino** · 26/03/2009, 20h04

Entièrement d'accord, très clair, très agréable à lire et très instructif.
Merci !

**emmanuel.remy** · 26/03/2009, 20h54

Sincèrement il n'y manque rien.

C'est très clair, bien écrit - j'insiste sur ce point, et les exemples sont simples, fonctionnels et compréhensibles.

Une seule petite remarque

cela aurait été intéressant d'avoir une note de renvoi vers les annexes dans le texte (par exemple un renvoi vers l'annexe de la fonction anonyme à l'endroit où tu écris:

Que réalise la fonction anonyme dont la définition représente tout notre fichier d'extension

); je sais que la table des matières y fait référence, mais il arrive qu'on la parcoure un peu vite, pressé qu'on est de lire l'article !

Encore félicitations,

ERE

**senta** · 28/03/2009, 14h29

Eh bien merci pour ce tuto qui éclaire pas mal de chose dans ce trou béant situé juste entre mes deux oreilles

**bigboomshakala** · 29/03/2009, 16h47

merci pour ces retours tres positifs, ca m'encourage a continuer!

pour info je publierais un nouvel article dans les prochaines semaines. le premier d'une longue serie (j'espere) sur le developpement de controles web. le premier portera sur la creation d'une table avec cellules editables et dont on peut recuperer les donnes sous forme d'array (et peut etre plus). ce sera la premiere etape pour l'elaboration d'un controle plus complexe qui prendra forme au fil des articles (5 ou 6 prevus pour ce controle).

emmanuel.remy > je prend note de ta remarque, je vais essayer de rajouter un renvoi (ou peut etre plusieurs judicieusement places). c'est vrai que ca dynamise pas mal et aide le lecteur a s'y retrouver

**bigboomshakala** · 22/04/2009, 22h10

MAJ tuto : ajout de renvois sur les annexes

Invité · 27/05/2009, 13h19

le tuto est pas mal j'ai compris pas mal de chose mais le probleme vient du fait que je n'arrive pas a mettre en oeuvre tous ca car les exemple se cantones a une alerte

j'ai l'abitude d'appeler une fonction a partir du html dans le genre <img src 'blabla.bla' onclick='mafonction(mes parametres)'> et la j'ai du mal a retranscrire tous ca car les exemples se cantones au script ou a la rigueur a un onclick sans addition d'evenement ( addEvent...,attachevent)

ce qu'il manque vraiment c'est un exemple complet et simple (javascript et html)

je tient a preciser que tous les exemples trouve sur le net se limites toujour au javascript et donnes l'impression qu'il faut avoir fait des etudes en informatique pour avoir accès a ces choses la laissant de cote l'autodidacte
++

**bigboomshakala** · 27/05/2009, 20h41

hello,

je vais voir ce que je peux faire

**bigboomshakala** · 31/05/2009, 18h00

Envoyé par mekal

j'ai l'abitude d'appeler une fonction a partir du html dans le genre <img src 'blabla.bla' onclick='mafonction(mes parametres)'> et la j'ai du mal a retranscrire tous ca car les exemples se cantones au script ou a la rigueur a un onclick sans addition d'evenement ( addEvent...,attachevent)

ce qu'il manque vraiment c'est un exemple complet et simple (javascript et html)

je viens de me remettre un peu dedans et j'ai du mal à voir le problème (désolé).

Certes l'exemple final utilise des alertes. Mais les fonctions utilisées dans le cadre d'une bibliothèque s'utilisent comme les fonctions que tu peux écrire directement dans la balise script de ta page. Si tu as l'habitude d'écrire :

Code :

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

<img src='blabla.bla' onclick='mafonction(mes parametres)'>

et bien avec une bibliothèque de fonctions tu écris :

Code :

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

<img src='blabla.bla' onclick='uneBibliotheque.uneFonction(mes parametres)'>

C'est strictement la même chose d'où les exemples bateau que tu trouves sur le net, ils servent à tester très rapidement les appels.

En tout cas je prends en compte ta remarque. Je penserais à l'avenir à exhiber un exemple concret pour illustrer le tutoriel. Je ferais éventuellement une mise à jour de celui-ci dès que possible. En attendant voilà un petit exemple :

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
<html>
  <head>
<script type="text/javascript" src="myOwnJSLibrary.js"></script>
<script type="text/javascript" src="myOwnJSLibrary.Math.js"></script>
<script type="text/javascript">
  function Circonference(rayon){
    return 2*myOwnJSLibrary.Math.PI*rayon;
  }
 
  function Aire(rayon){
    return myOwnJSLibrary.Math.PI*Math.pow(rayon, 2);
  }
 
  function Calcul(){
    try{
      var rayon = parseFloat(document.getElementById("rayon").value);
      document.getElementById("rayon").innerHTML = "Circonférence : " + Circonference(rayon) + "</br>Aire : " + Aire(rayon);
    }
    catch(ex){
       alert(ex);
    }
  }
</script>
  </head>
  <body>
  	rayon : <input type="text" id="rayon" />
  	<input type="button" value="Calcul" onclick="calcul();" />
  	<span id="reponse"></span>
  </body>
</html>
]]>

je tient a preciser que tous les exemples trouve sur le net se limites toujour au javascript et donnes l'impression qu'il faut avoir fait des etudes en informatique pour avoir accès a ces choses la laissant de cote l'autodidacte

Je ne peux pas parler pour les autres tutoriels, mais le mien est destiné à des développeurs familiers avec le javascript (autodidactes ou non). Donc des personnes qui savent mettre en application un script dans leur développement. Évidemment il faut aussi des tutoriels pour débutants ou faux-débutants, mais le sujet que j'ai abordé dans ce tutoriel n'est clairement pas adapté aux débutants, donc le sujet est certes abordé pas-à-pas, mais pas les bases du langage et de son utilisation.

**danielhagnoul** · 02/06/2009, 09h52

Bonjour.

Je suis occupé à appliquer votre très bon tutoriel en jQuery.
J'en suis à la page 13, petite correction :

Code :

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

1
2
3
4
5
6
 
fact: function(n) {
...
      return n*this.fact(n-1);
...
}

**bigboomshakala** · 02/06/2009, 11h39

merci bien vu. je corrige dès que possible.
hmm tous mes scripts sont testés, mais j'ai malheureusement de temps en temps modifié des noms de variables ou de fonctions après coup... j'espère que c'est la seule coquille.

NOTE : il n'y a pas de jQuery dans ce tutoriel

**bigben89** · 10/06/2009, 17h58

Bien sympa, ton tuto. Je m'amuse pas mal avec le javascript en ce moment, et c'est toujours intéressant de voir quelques bonnes pratiques.

Par contre, il y a une petite coquille dans la partie IV : Le mot clé "this", où tu utilises la notation json alors qu'il s'agit du corps de la fonction :

Code :

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

1
2
3
4
5
6
function MyClass(){
  name : "instance of MyClass",
  who : function(){
    alert(this.name);
  }
}

**bigboomshakala** · 10/06/2009, 18h07

Envoyé par bigben89

Bien sympa, ton tuto. Je m'amuse pas mal avec le javascript en ce moment, et c'est toujours intéressant de voir quelques bonnes pratiques.

Par contre, il y a une petite coquille dans la partie IV : Le mot clé "this", où tu utilises la notation json alors qu'il s'agit du corps de la fonction :

Code :

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

1
2
3
4
5
6
function MyClass(){
  name : "instance of MyClass",
  who : function(){
    alert(this.name);
  }
}

Envoyé par Homer Simpson

Doh!

bien vu !!

je corrige ASAP. merci
j'ai du à un moment donné vouloir faire quelque chose puis j'ai zappé l'ajustement du bout de code... pas vu malgré une relecture attentive

EDIT : corrigé !