18041 sujets
var obj1 ={
'propriete1' : 1,
'propriete2' : "Salut tout le monde !",
'methode1' : function () { alert(this.propriete1); },
'methode2' : function () { alert(this.propriete2); }
}
var obj1 =function () {
function methode1 () { alert(this.propriete1); },
function methode2 () { alert(this.propriete2); }
return {
'propriete1' : 1,
'propriete2' : "Salut tout le monde !",
'methode1' : methode1,
'methode2' : methode2
};}
obj1.methode1();obj1().methode1();
function classeObj1 () {
this.propriete1 = 1;
this.propriete2 = "Salut tout le monde !";
this.methode1 = function () { alert(this.propriete1); }
this.methode2 = fonction () { alert(this.propriete2); }
}
obj1.methode1();function methode1() {
alert(propriete1);
}
function methode2() {
alert(propriete2);
}
var propriete1 = 1;
var propriete2 = "Salut tout le monde";var obj1 ={
"propriete1": 1,
"propriete2": "Salut tout le monde !",
"methode1" : function () { alert(this.propriete1); },
"methode2" : function () { alert(this.propriete2); }
};var obj1 = function() {
function methode1() {
alert(propriete1);
}
function methode2() {
alert(propriete2);
}
var propriete1 = 1;
var propriete2 = "Salut tout le monde";
return {
"propriete1": propriete1,
"propriete2": propriete2,
"methode1": methode1,
"methode2": methode2
};
}();
a écrit :
ma solution permet d'exécuter du code statique au sein de l'espace de nommage (comme dans mon exemple d'espace de nommage anonyme).
var oO =
{
_Method : function()
{
var oO =
{
_Alert : function()
{
alert('coucou!');
}
};
oO._Alert();
}
};
oO._Method();
obj1 = function () { /* ... */ }();
obj1.propriete1 = 1234.5678;
obj1.methode1();
koala64 a écrit :Merci !
Personnellement, je trouve ton tuto bien fait, clair et concis et cette notion est bien expliquée. Néanmoins, pour moi, aucune des deux méthodes n'a l'avantage...
koala64 a écrit :Certes. Par contre je dois t'avouer que je ne comprends pas trop l'utilité du second objet oO dans _Method.
Dans les deux cas, nous pouvons faire la même chose. Je peux aussi exécuter un code au sein même de chaque méthode et ce, sans interface publique.var oO = { _Method : function() { var oO = { _Alert : function() { alert('coucou!'); } }; oO._Alert(); } }; oO._Method();
QuentinC a écrit :En effet, tu as raison.
Mais dans l'exemple que tu me donnes, je ne suis pas certain que :M'affiche bien 1234.5678... j'aurais tendance à dire que le 1 est conservé à cause de l'absence du this dans ta version. Ca peut être rapidement un piège... ne pas oublier le this donc.obj1 = function () { /* ... */ }(); obj1.propriete1 = 1234.5678; obj1.methode1();
var obj1 = function() {
function methode1() {
alert(this.propriete1);
}
return {
"methode1": methode1,
"propriete1": 1
};
}();
window.onload = obj1.methode1;var obj1 = function() {
function methode1() {
alert(ns.propriete1);
alert(priv1);
}
var priv1 = 1234;
var ns = {
"methode1": methode1,
"propriete1": 4321
};
return ns;
}();a écrit :
En fait, je dois avouer que je n'avais pas vraiment envisagé dans mon tutoriel la possibilité de mettre des propriétés dans l'interface publique (voilà
encore une chose à modifier).
a écrit :
window.onload = obj1.methode1;
En effet, dans ce cas-là, on obtiendra on joli "undefined".
window.onload = function () { obj1.methode1(); }QuentinC a écrit :C'est en effet une solution, mais il faut bien avoir conscience qu'en faisant cela tu crées une closure (fermeture ?), ce que l'on préfère en général éviter si l'on n'en a pas réellement besoin.
Pour ce cas précis, il aurait fallu écrire :
window.onload = function () { obj1.methode1(); }
QuentinC a écrit :Je te conseille de lire ça (par contre, c'est en anglais et assez long)
Une closure ? C'est quoi ça ? jamais entendu parler...
QuentinC a écrit :Certes.
Sinon, tu pourrais parfaitement remplacer le this par obj1, en fait. Ce qui lève le problème.
QuentinC a écrit :Le surplus de code à ajouter est vraiment insignifiant, et en plus tu peux choisir un nom court comme "ns", ce qui t'évitera d'avoir à répéter pas mal de fois ton nom d'espace de nommage dans ton code (surtout si, comme tu le dis, tu l'as bien choisi et qu'il fait donc plus de trois lettres).
Bah, le rechercher-remplacer, ça existe, non ?
ET c'est vraiment parano de penser que l'utilisateur va écraser obj1. En choisissant bien le nom, à mon avis, il n'y a pas de risques.
(function() {
function init()
{
document.body.className = jsClassName;
}
var jsClassName = "jsActif";
window.onload = init;
})();
function init()
{
alert('coucou');
}
window.onload = init;<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<script type="text/javascript">//<![CDATA[
// Biblio 1
( function() {
var fConnect = function(oElem, sEvType, fn, bCapture)
{
oElem.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
oElem['on' + sEvType] = fn;
};
var fLink = function()
{
var oBouton = document.createElement('a');
oBouton.setAttribute('href','#clic');
var oTxt = document.createTextNode('clique');
oBouton.appendChild(oTxt);
fConnect(oBouton, 'click', fAlert, false);
var oBody = document.getElementsByTagName('body')[0];
oBody.appendChild(oBouton);
var oA = document.getElementById('test');
fConnect(oA, 'click', function(e)
{
alert('çà va ?');
return fCancelClick(e);
}, false);
};
var fCancelClick = function(e)
{
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
return false; // Pour Safari
}
else if(window.event && window.event.cancelBubble && window.event.returnValue)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}
else return false;
};
var fAlert = function(e)
{
alert('coucou');
return fCancelClick(e);
};
fConnect(window, 'load', fLink, false);
} )();
//Biblio 2
function fLink()
{
var oA = document.getElementById('test');
oA.onclick = function()
{
alert('bien ?');
return false;
};
alert('salut');
}
window.onload = fLink;
//]]></script>
</head>
<body>
<p>Test des fonctions associées au clic :</p>
<a href="#" id="test">test</a>
<p>Insertion d'un lien qui fait coucou avec la fonction anonyme :</p>
</body>
</html>
) qu'est la biblio2... Le risque d'interaction avec d'autres scripts est bien réduit à néant. 
). Est-ce que tu as quelques exemples à me donner s'il te plait ? Je manque malheureusement de pédagogie...for (var i in obj) {}a écrit :Le titre du tuto est bien "les espaces de nommage en javascript" mais l'ensemble de ton article est fondé sur les interactions que peuvent avoir deux bibliothèques. Lorsque tu dis :
Ca peut en effet être intéressant d'évoquer cette solution, même si ce n'est pas le sujet principal du tutoriel. Ceci dit, c'est vrai que ça permet d'illustrer l'intérêt de l'espace de nommage anonyme.
a écrit :En quoi ce n'est pas satisfaisant ? C'est justement le but recherché. Le plus gros risque provient surtout du code que tu ne maîtrises pas, c'est à dire, de celui des autres... Tu peux, pour toi, définir une interface accessible mais uniquement au sein de ta fonction anonyme car tu n'as aucun intérêt à rendre ton script accessible de l'extérieur.
Ce n’est cependant pas satisfaisant puisque, contrairement à la première solution, la bibliothèque devient inaccessible de l’extérieur : on a créé un espace de nommage anonyme.
a écrit :Cette phrase n'est pas juste. Comme dit précédemment, il existe encore des interactions à cause des gestionnaires d'événement onbidule... d'où l'intérêt d'apporter des précisions à ce sujet. Si tu as montré comment te protéger au mieux des autres, tu ne précises pas comment ne pas empiéter sur leur terrain alors que c'est tout aussi important... Si si, je t'assure, faut vivre en symbiose avec ses petits copains...
Cela peut s’avérer utile dans le cas d’une bibliothèque anonyme (dans le sens où aucun code extérieur n’en dépend) comme la suivante (elle aussi simpliste)
a écrit :euh ben par exemple, la phrase suivante fait un peu mal à la tête...
Tu dis que la nouvelle version est moins accessible aux débutants. Je suppose que ça doit être au niveau du contenu que j'ai ajouté (oui je sais, je suis logique
a écrit :On a vite les bigoudis qui poussent.
Ce n’est d’ailleurs pas étonnant si l’on sait que function f() {} est équivalent à var f = function() {}; (placé au début de la portée ou du fichier), et donc que la définition d’une fonction n’est qu’un raccourci pour la définition d’une variable faisant référence à cette fonction.
Je pense que tu peux simplifier.a écrit :Oui par exemple mais tu peux aussi expliquer :
Quant aux parenthèses, tu parles de la différence entre function() {} et function() {}() ?
a écrit :C'est à dire ? As-tu un exemple moins simpliste ? ça m'intéresse...
Pour ce qui est de mon exemple de fonction anonyme, comme je l'ai précisé, il est simpliste. Pour ma part, j'utilise quelque chose de similaire à ce que tu as proposé, qui permet en effet d'isoler totalement le code et donc de ne pas craindre le code "tout pourri récupéré d'on ne sait où".
Eldebaran a écrit :Oui mais ce n'est pas de ton fait. C'est uniquement Prototype qui est en cause... et puis, tu peux reprendre la main en le redéfinissant toi aussi, non ? (Je dis peut-être une bêtise) Enfin... mieux vaut virer Prototype, c'est plus simple...
Pour ce qui est du risque de collision avec d'autres bibliothèques, il n'est malheureusement jamais totalement nul avec Javascript, preuve en est l'exemple de l'une des versions de Prototype qui modifiait le prototype d'Object et faisait ainsi planter le code basé sur les boucles du type :Je te rejoins cependant sur le fait que, moins le risque d'interaction est grand, moins on court de risques.for (var i in obj) {}
koala64 a écrit :Ce n'est pas satisfaisant dans le cas de l'exemple que j'utilise, c'est à dire dans celui d'une bibliothèque qui expose un certain nombre de fonctions à l'extérieur (ce qui reste quand même assez fréquent). Ceci dit, cette phrase est assez mal tournée, puisque ce sera en effet dans pas mal de cas au contraire très satisfaisant.
En quoi ce n'est pas satisfaisant ? C'est justement le but recherché. Le plus gros risque provient surtout du code que tu ne maîtrises pas, c'est à dire, de celui des autres... Tu peux, pour toi, définir une interface accessible mais uniquement au sein de ta fonction anonyme car tu n'as aucun intérêt à rendre ton script accessible de l'extérieur.
koala64 a écrit :Cette phrase n'est pas juste. Comme dit précédemment, il existe encore des interactions à cause des gestionnaires d'événement onbidule... d'où l'intérêt d'apporter des précisions à ce sujet. Si tu as montré comment te protéger au mieux des autres, tu ne précises pas comment ne pas empiéter sur leur terrain alors que c'est tout aussi important... Si si, je t'assure, faut vivre en symbiose avec ses petits copains...
Cela peut s’avérer utile dans le cas d’une bibliothèque anonyme (dans le sens où aucun code extérieur n’en dépend) comme la suivante (elle aussi simpliste)
Certes, tu as raison. Ce que je voulais dire, c'est qu'aucun code extérieur n'en dépend au sens où aucun code extérieur n'a besoin d'accéder à une variable ou fonction de la bibliothèque. En fait, je pense que j'ai très mal choisi mon exemple. koala64 a écrit :C'est vrai.
Certes, ça va étendre un peu plus le champ d'action du tuto mais vu que le but principal est bien cette notion d'interaction, autant s'attacher à cette dernière plutôt qu'à décrire la technique hors contexte. Ca n'en sera que plus convaincant.
koala64 a écrit :On a vite les bigoudis qui poussent.
euh ben par exemple, la phrase suivante fait un peu mal à la tête...
Je pense que tu peux simplifier.Oui, en effet... 
koala64 a écrit :OK... Décidément, tu me donnes du boulot !
Oui par exemple mais tu peux aussi expliquer :
- pourquoi on doit écrire ( function() { ... } )(); et pas ( ... )();
- pourquoi on doit écrire oElem.onclick = func; et pas oElem.onclick = func();
ou que sais-je encore... Disons qu'il faut rendre ta syntaxe la plus limpide possible.
koala64 a écrit :Comme je te l'ai dit, c'est assez similaire à ce que tu as proposé. Voici un template de ce que j'utilise :
C'est à dire ? As-tu un exemple moins simpliste ? ça m'intéresse...
<!--[if !IE]>--><script type="text/javascript" src="script.js"></script><!--<![[#0000]endif[/#]]-->
<!--[if IE]><script defer src="script.js"></script><![[#0000]endif[/#]]-->if (document.getElementById && document.createTextNode) {
(function() {
function init() {
if (document.body && !init.done) {
init.done = true;
// Le code d'initialisation...
}
}
function addLoadEvent(f) {
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", f, false);
}
if (window.addEventListener) {
window.addEventListener("load", f, false);
} else if (document.addEventListener) {
document.addEventListener("load", f, false);
} else if (window.attachEvent) {
window.attachEvent("onload", f);
}
}
/*@cc_on init();@*/
addLoadEvent(init);
})();
}
Le lundi au soleil...
(Cloud François)