Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

JavaScript: les espaces de noms

Poster un commentaire

Voici un exemple de code assez typique en JavaScript:

var message = ‘hello, le soleil brille’; // peut-être pas aujourd’hui, OK

function chanter() { alert(‘une chanson douce’);};

C’est du code qui fonctionne parfaitement et similaire à celui que nous avons tous écrit. Il souffre tout de même d’un défaut important appelé pollution du scope global.

Le problème est que je ne suis pas à l’abris que quelqu’un, quelque part redéfinisse ces variables et méthodes ce qui conduit à des bugs plus ou moins faciles à gérer.

Dans les langages auxquels nous sommes habitués, on résout le problème en créant des espaces de noms (namespaces). Le problème est que l’on a pas ce genre de notion en JavaScript.

Mais cela ne signifie pas que l’on est sans solution…

Pour lire la suite vous devrez absolument comprendre ce qu’est un scope et une closure, à défaut j’ai publié un article ici.

Vous avez lu l’article? Super, à ce stade vous êtes quasiment capable de deviner la suite autrement c’est que vous n’avez rien compris 😉

Si on place le code précédent dans une fonction, la closure assure qu’il ne pourra pas être accidentellement réécrit.

function () {
var message = ‘hello, le soleil brille’;
function chanter() { alert(‘une chanson douce’);};
};

Pour que ça marche on place ce code dans une fonction immédiatement invoquée. On a déjà vu comment on fait.

(function () {
     var message = ‘hello, le soleil brille’;
function chanter() { alert(‘une chanson douce’); }
})();

En l’état cela ne n’est pas suffisant car on ne dispose d’aucun moyen d’appeler chanter(), justement en raison de la closure.

On pourrait faire ceci:

(function (ns) {
ns.message = ‘hello, le soleil brille’;
ns.chanter = function () { alert(‘une chanson douce’); }
})(window);

window.chanter();

On a rattaché notre fonction au scope global. On tient là une idée, mais il faudrait s’arranger pour que le scope ne soit justement pas le scope global. Et bien créons le!

Regardez cet exemple où nous créons un espace de noms et un sous espace de noms:

var monNameSpace = monNameSpace || {};
monNameSpace.MesInterfaces = monNameSpace.MesInterfaces || {};

L’expression {} est un littéral d’objet que nous verrons dans un autre article. Il désigne un objet vide. Il sert à initialiser notre espace de noms. Par la suite, puisque monNameSpace est déjà créé, c’est lui qui sera renvoyé.

Il ne reste plus qu’à compléter le code précédent et vérifier que cela marche en le lançant:

var monNameSpace = monNameSpace || {};

(function (ns) {
ns.message = ‘hello, le soleil brille’;
ns.chanter = function () { alert(‘une chanson douce’);
} })(monNameSpace);

monNameSpace.chanter();
alert(monNameSpace.message);

Et voilà, on a protégé la variable message et la fonction chanter!

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s