Bonnes pratiques JavaScript

Version imprimable

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

04/02/2012, 18h28
sekaijin
Bonjour pourquoi utiliser un texte l� ou une r�f�rence fonctionne

Code:

window.setTimeout(function () {alert("toto")}, 300)

ou
Code:

1 2 toto = function () {alert("toto")}; window.setTimeout(toto, 300)
la derni�re version compress�e donne la m�me chose ou avec obfuscator

Code:

eval(function(p,a,c,k,e,r){e=String;if(!''.replace(/^/,String)){while(c--)r[c]=k[c]||c;k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0=1(){2("0")};3.4(0,5);',6,6,'toto|function|alert|window|setTimeout|300'.split('|'),0,{}))

ce qui fonctionne toujours tr�s bien.

de fa�on g�n�rale mieux vaut utiliser une r�f�rence qu'un texte qui interpr�t� donnera un appel � la r�f�rence.

par exemple ne pas faire

Code:

function toto() {alert("toto")};

Code:

<a id='truc' onClick='toto()'>...

qui sera �valu� pour cr�er dynamiquement une fonction qui sera plac� comme membre de l'�l�ment truc
le navigateur va g�n�rer ceci:
Code:

1 2 function toto() {alert("toto")}; document.getElementById('truc').onclick= function() {toto();};
mais

Code:

document.getElementById('truc').onclick=function() {alert("toto")};

ou encore
Code:

1 2 function toto() {alert("toto")}; document.getElementById('truc').onclick=toto;
en conclusion pensez aux r�f�rences
A+JYT

1 pi�ce(s) jointe(s)

Je constate souvent dans des code JS d'�tudiant une erreur assez courante

Code:

document.getElementById("truc").onclick=function()....

C'est une erreur, en fait il ne faut pas affecter une fonction � un �v�nement, mais l'associer.

Je vous sugg�re l'impl�mentation d'un objet : "eventObserver"

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
EventObserver={
	/**
	* Ajoute un événement à un élément du DOM
	* @param DOMELement HTMLElement élément du DOM sur lequel l'évenement sera ajouté
	* @param evtName string Nom de l'élément auquel l'évenement sera associé
	* @param fn function fonction à associer à l'évenement
	* @author Sébastien DAMART
	* @author Cécil Cordheley
	*/
	addEvent:function(DOMElement,evtName,fn){
	///<summary>Ajoute un événement à un élément du DOM</summary>
	///<param type="HTMLElement">DOMElement</param>
	///<param type="string">evtName</param>
	///<param type="fonction">fn</param>
	//On associe l'événement
		if(DOMElement.attachEvent)
			DOMElement.attachEvent("on"+evtName,fn,false);
 
		else
			DOMElement.addEventListener(evtName,fn);
 
	//On stock l'événement dans un tableau associer au HTMLElement passer en paramètre
	if(DOMElement.Events==undefined)
		DOMElement.Events=new Array();
	if(DOMElement.Events[evtName]==undefined)
		DOMElement.Events[evtName]=new Array();
	DOMElement.Events[evtName].push(fn);
 
	},
	detachEvent:function(DOMElement,evtName,fn){
		if(typeof fn =="integer")//si le troisième paramètre correspond à un entier
		{
			//recuperer la fonction à l'index passer en paramètre
			var handler=DOMElement.Events[evtName][fn];
		}else{
			var i=0;
			var t=false;
			while(i<DOMElement.Events[evtName].length&&!t)
			{
				if(DOMElement.Events[evtName][i]==fn){
					t=true;
				}else
					i++;
			}
			var handler=(t)?fn:null;
		}
		if(handler){
			if(DOMElement.removeEventListener)
				DOMElement.removeEventLister(evtName,handler);
		}
	}
 
}

Au cas ou je laisse un Zip pour expliquer comment �a marche

21/01/2013, 12h12
hefeust

point de vue sur les rich internet applications

bonjour � tous !

mon point de vue sur les javascript est qu'avant, on se contentait de coller ("scotcher") des petits bouts de script sur la page HTML, tels des post-its sur un paperboard. Dor�navant, la bonne approche est de consid�rer le JS comme formant une application � part enti�re et qui utilise la page et le DOM comme son entr�e/sortie (ou du moins son effet de bord) principal.

Bien s�r me direz vous elle �change �galement avec le clavier et la souris, avec divers �v�nements, et avec le serveur via XHR, mais pensez app toute faite comme le sont certains clients de mail bien connus, ou les jeux vid�o qui fleurissent un peu partout.

Ainsi on peut appliquer des principes comme le MVC ou le MVR pour faire son d�veloppement.

Voil� pour la th�orie . Pour la pratique cela se complique un peu. Ca manque cruellement de tutoriels bien faits et en ligne (sur d�veloppez peut �tre ?) et j'ai l'impression que toutes mes recherches en direction d'une doc construite me renvoient syst�matiquement sur la page de tel ou tel �diteur anglophone qui vend un bouquin...

Donc j'attends avec impatience un ou des tutos sur ce site mais il faudra y trouver :
- bootstrap de l'appli et structure de fichiers sous jacent
- module pattern, include/import de fichiers
- utiliser correctement les closures
- les donn�es comment les g�rer et les d�coupler au maximumu de la manip de DOM pour la Vue
- concevoir des widgets en interactions les uns avec les autres et/ou avec le serveur

Voil�, � vos stylos et claviers , les auteurs, je ne manquerai pas de vous lire...

PS : J'ai remarqu� quand m�me depuis quelques temps des biblioth�ques qui sortent du lot (exemple : CraftyJS, Quintus... pour les jeux) qui ne cherchent plus syst�matiquement � �crire des classes (Java, PHP, C++) pour faire de l'h�ritage, mais qui fonctionnent plutot en "share" (partage) de composants. Cela me semble plus proche de la philosophie de JavaScript (partage de prototype)

on a donc une approche 'partage' (has-A) de javascript (== horizontal) qui oblige � se changer l'esprit par rapport � l'h�ritage (de qualit�s mais aussi de d�fauts...) "is-A" (== vertical) qu'on pratiquait avant ... tiens c'estr �tonnant, c'est ce qu'on fait dans les r�seaux sociaux, le partage...

en attendant les tutoriels (bis) merci et bonne journ�e !
04/02/2013, 12h44
Lcf.vs
Moi, �a me frappe, de voir des choses comme ceci :
Citation:
Envoy� par Lideln75

[*]Tol�rance z�ro sur les globales : utiliser pour �a un objet statique, c'est plus propre et plus s�curis� (et quand je dis globales, je ne parle pas que des variables : les fonctions aussi !)

...

Code:

1 2 3 4 function displayWindow(sWindowName) { }
Pour moi, la seule fa�on de d�clarer proprement une fonction dans le scope courant, c'est :
Code:

1 2 3 4 5 var fct; fct = function fct() { // ce que vous voulez... };
1. On d�clare d'abord la variable
2. On assigne une valeur � cette variable (en l�occurrence, une fonction)
3. Dans cette d�claration, on nomme la fonction
Pourquoi nommer cette fonction? simple...

Imaginons que cette fonction soit un constructeur et que l'on en r�cup�re une instance... faites un console.log(instance), avec ou sans avoir nomm� votre fonction, vous verrez... ;)

Edit : Pour en savoir plus, http://www.developpez.net/forums/d13...n/#post7107219

Je ne vois pas l'int�r�t de nommer la fonction

c'est m�me source d'erreur

Code:

1
2
3
4
5
6
7
8
9
var fct = function ftc() {};
var a = new fct();
 
a.__proto__; //retourne ftc
a.__proto__.constructor; //retourne  function ftc() {}
ftc; // retourne undefined  <==== gasp c'est pourtant le nom retourné au dessus
a.__proto__.constructor.name; //retourne  "ftc"
 
a.__proto__.constructor == fct; // retourne true fct est bien le constructeur de a alors que ftc qui est le nom que porte le constructeur est un constructeur qui n'existe pas.

il y a pire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var A = function C1() {this.a = 45};
var B = function C1() {};
...
a = new A();
b = new B();
 
// a et b sont-il des objets de même type (même constructeur) ?
a.__proto__.constructor == b.__proto__.constructor;
//reponse non le test retourne false pourtant a et b sont vu comme des objets de type C1
 
//on refait le test sous une autre forme
a.__proto__.constructor.name == b.__proto__.constructor.name;
//reponse oui le test retourne true a et b sont vu comme des objets de type C1

en clair renseigner le nom du constructeur n'est valable qu'a titre informatif et il ne faut surtout pas en tenir compte
je pr�f�re encore

Code:

1
2
3
4
5
6
7
8
9
var fct = function () {};
var a = new fct();
 
a.__proto__; //retourne object
a.__proto__.constructor; //retourne  function () {}
fct; // retourne //retourne  function () {} la même chose qu'au dessus
a.__proto__.constructor.name; //retourne  ""
 
a.__proto__.constructor == fct; // retourne true fct est bien le constructeur de a.

tout cela est bien plus homog�ne

A+JYT

04/02/2013, 15h17
Lcf.vs

Sekaijin> J'attendais ta r�action, tiens... j'�tais s�r qu'elle serait int�ressante... :D

Pour ton premier exemple, il est tout � fait normal que ftc retourne undefined.

Il faut bien comprendre que la d�claration du nom d'une fonction n'est pas li�e � la variable dans laquelle cette fonction est affect�e (sauf dans le cas d'une globale, car l'interpr�teur d�clare implicitement une variable de ce nom).

Dans ton 2�me exemple, tu red�clares une fonction du m�me nom, donc les r�sultats obtenus sont logiques...

Une fonction, une fois d�clar�e, ne devrait pas (selon moi) �tre red�clar�e, cela ne peut qu'amener des probl�mes...

En gros, c'est � chacun de faire attention � ce qu'il fait...

Cette fa�on de faire a un avantage ind�niable, une plus grande aisance pour la correction de bugs. D'ailleurs, les objets natifs sont tous nomm�s...

Ta solution, via __proto__ fonctionne, c'est vrai... mais elle n'est pas standard.
04/02/2013, 15h38
Lcf.vs

De plus, ta m�hode via __proto__ n�cessite de d�j� avoir cr�� une instance de ton constructeur...
04/02/2013, 15h46
sekaijin
mon propos est que le nom n'est qu'un nom et qu'il ne doit surtout pas �tre exploite.

�a peut effectivement aider � y voir clair lors du debug mais ce n'est pas avec le nom qu'il faut travailler.

mon premier exemple montre qu'une simple petite erreur ftc � la place de fct et le code bas� sur le nom ne fonctionne plus alors que celui qui ne s'int�resse qu'aux objet continu de fonctionner.

mon deuxi�me exemple ne montre pas le red�finition d'une fonction mais bien qu'on meut d�finir deux fonctions qui ont le m�me nom. du coup si on base la manipulation des objet en se basant sur le nom du constructeur on vas dans le mur.

quant � la red�finition de fonction c'est tr�s utile.
exemple j'ai un bouton et je veux que lorsqu'on clique dessus la premi�re fois il me cr�e un objet
et les fois suivante il utilise la m�thode test() de l'objet.

la m�thode simple consiste � �crire
Code:

1 2 3 4 5 6 7 onclick = function() { if (undefined == typeof this.myObject) { this.myObject = new Constructor(); } else { this.myObject.test(); } }
on a bien la cr�ation au premier appel et l'utilisation de la m�thode test les autres fois. mais on a aussi � chaque passage l'ex�cution du test.
Code:

1 2 3 4 5 6 onclick = function() { this.myObject = new Constructor(); this.onclick = function() { this.myObject.test(); } }
Cette fois on ne fait aucun test. au premier appel on cr�e l'objet et on red�finit la m�thode
les coups suivant on ne fait qu'appeler test. c'est simple et c'est efficace.

la mutabilit� des objets en javascript est un gros atout par rapport au langage � base de classe. il suffit de l'utiliser � bon escient.

bien pratique un fonction getUser() qui affiche un formulaire tant que l'utilisateur n'est pas logg� et qui est red�finie pour retourner l'identit� du user lorsqu'il est logg� pas de test pas de code inutile juste la bonne d�finition de la fonction en fonction du contexte.

A+JYT
04/02/2013, 15h55
Lcf.vs

Hum, oui... mais je n'ai jamais pr�tendu qu'il faille utiliser le nom d'un constructeur en guise de r�f�rence de contr�le, ce serait en effet une lourde erreur, de par la mutabilit� du JS.

S�rieusement, pour moi, il serait pr�f�rable d'attacher une autre fonction � ton bouton, si celui-ci n'a plus le m�me r�le...

Perso, le syst�me (orient� classes) que je d�veloppe actuellement est justement plus strict sur ce point... j'esp�re vraiment que quelqu'un saura me diriger pour l'optimisation de mon parser, que je puisse vous le pr�senter... :)
08/02/2013, 18h51
Watilin
Lcf, je pense que tu en as d�j� entendu parler, mais je le dis au cas o� : il existe en JavaScript une directive "use strict";. John Resig, le cr�ateur de jQuery, a �crit un billet dessus ;)

Personnellement, je pr�f�re d�clarer mes fonctions avec function plut�t que var car je sais que de toute fa�on elles seront dans le scope local. �a fait, � mon go�t, un code plus lisible pour le m�me r�sultat. Ensuite, je leur donne toujours un nom, apr�s le mot-cl� function, car comme vous l'avez dit, ce nom appara�t dans la pile lors du d�bogage.

Ce qui se passe est plut�t simple : le d�bogueur utilise la propri�t� name qu'ont toutes les fonctions. Quand la fonction a �t� d�clar�e sans nom, sa propri�t� name est une cha�ne vide "".
Code:

1 2 3 4 5 6 7 8 >>> var x = function fun( ){} undefined >>> x.name "fun" >>> var y = function( ){} undefined >>> y.name ""
Pour changer de sujet, j'ai d�couvert il y a pas plus de 3 jours l'outil JSLint, qui est une sorte de � relecteur � JavaScript, � d�faut d'�tre un correcteur. Il met en �vidence certaines erreurs et mauvaises pratiques.
J'ai aussi d�couvert que Douglas Crockford a �crit des conventions de codage pour JavaScript. Cela dit, j'ai adopt� les miennes et je les aime bien et, apr�s tout, ce n'est pas tr�s diff�rent :aie:
20/02/2013, 07h59
Lcf.vs

Watilin :

Comme je le dis ici, le but est d'avoir un code propre et uniforme, avec de chouettes petits avantages. ;)

Citation:

Envoy� par Lcf.vs

S�rieusement, pour moi, il serait pr�f�rable d'attacher une autre fonction � ton bouton, si celui-ci n'a plus le m�me r�le...

attache signify d'avoir d�fini cette fonction.
Code:

1 2 3 4 5 6 onclick = function() { this.myObject = new Constructor(); this.onclick = function() { this.myObject.test(); }// après l'exéution de cette ligne la méthode d'origine est déchargée de la ram }
devient
Code:

1 2 3 4 5 6 7 8 9 fonction A() { this.myObject = new Constructor(); this.onclick = B; //on attache une autre fonction } fonction B() { this.myObject.test(); } onclick = A
que l'on utilse des �vent listener ou directement le onclick il faut avoir d�fini les fonctions. outre que le code n'en est pas plus lisible (c'est marginal) les fonctions A et B sont d�fini et le restent. apr�s le premier appel A reste une fonction d�fini donc en m�moire mais elle n'est plus utilis�e. un code mort inutile dans la m�moire.

je pr�fere les fonction annonyme directement d�finie sur le handler. ainsi lorsqu'on attache une nouvelle fonction annonyme l'anciene n'�tant plus r�f�renc� (attach� � une closure) le moteur js la d�charge de la ram.

A+JYT

21/02/2013, 00h49
Lcf.vs

Je comprends ton point de vue, n�anmoins je pr�f�re le c�t� r�utilisable des �l�ments d�clar�s.

Je pense, notamment, � mon premier chat multi-comptes, en JS, o� on pouvait se connecter depuis plusieurs comptes dans la m�me page, switcher de l'un � l'autre, changer de discussion, ..., le tout, sans avoir � recharger les messages et param�tres d�j� calcul�s.

Tu me diras qu'il suffit de d�clarer une seule fonction (la tienne) et de l'attacher au onclick, afin qu'elle puisse resservir... mais cela signifierait qu'� chaque fois ta fonction �quivalente � B est recr��e...

Bref, ce que tu as gagn� en ressources, tu le reperds � chaque r�utilisation...

Apr�s, �videmment, �a d�pend de l'utilisation que l'on en fait...

Ce n'est pas vraiment une bonne pratique mais plus une astuce sympa.
Uniquement dans Chrome � priori, pour afficher un tableau d'objets dans un format plus lisible, sous forme de tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var monTableauDobjet = [ { "id": 58, "value": "héhé" }, { "id": 59, "value": "hoho" }, { "id": 60, "value": "huhu" } ]; console.table(monTableauDobjet);
Test� sous Chrome Version 30.0.1599.101 m / dans un nouvel onglet (chrome://newtab)

non �a ne marche pas avec chrome

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
> var monTableauDobjet = [
  {
    "id": 58,
    "value": "héhé"
  },
  {
    "id": 59,
    "value": "hoho"
  },
  {
    "id": 60,
    "value": "huhu"
  }
];
> console.table(monTableauDobjet);
TypeError: Object #<Object> has no method 'table'

voici le m�thode d�finies en standard par chrome pour l'objet console

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
console
Object {log: function, debug: function, info: function, warn: function, error: function…}
assert: function (){}
count: function (){}
debug: function (){}
dir: function (){}
dirxml: function (){}
error: function (){}
group: function (){}
groupEnd: function (){}
info: function (){}
log: function (){}
profile: function (){}
profileEnd: function (){}
time: function (){}
timeEnd: function (){}
trace: function (){}
warn: function (){}
__proto__: Object

A+JYT

J'aurais d� mentionner la version de Chrome avec laquelle j'ai test� : Version 30.0.1599.101 m

J'ai bien table dedans :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
assert: function assert() { [native code] }
clear: function clear() { [native code] }
constructor: function Console() { [native code] }
count: function count() { [native code] }
debug: function debug() { [native code] }
dir: function dir() { [native code] }
dirxml: function dirxml() { [native code] }
error: function error() { [native code] }
group: function group() { [native code] }
groupCollapsed: function groupCollapsed() { [native code] }
groupEnd: function groupEnd() { [native code] }
info: function info() { [native code] }
log: function log() { [native code] }
markTimeline: function markTimeline() { [native code] }
profile: function profile() { [native code] }
profileEnd: function profileEnd() { [native code] }
table: function table() { [native code] }
time: function time() { [native code] }
timeEnd: function timeEnd() { [native code] }
timeStamp: function timeStamp() { [native code] }
trace: function trace() { [native code] }
warn: function warn() { [native code] }

Voici ma source : Chrome Dev Tools / Annonce d'Addy Osmani
Le ticket webkit
L'�quivalent Firebug

ce n'est pas pr�sent dans la version
Version 31.0.1650.57 m
qui pourtant � un n� supp�rieur �
Version 30.0.1599.101 m

je pense que la page que tu site modifie le proto de la console
si je me mets sur le forum et que j'ouvre la console j'obtiens

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
>console
Object {log: function, debug: function, info: function, warn: function, error: function…}
assert: function (){}
count: function (){}
debug: function (){}
dir: function (){}
dirxml: function (){}
error: function (){}
group: function (){}
groupEnd: function (){}
info: function (){}
log: function (){}
profile: function (){}
profileEnd: function (){}
time: function (){}
timeEnd: function (){}
trace: function (){}
warn: function (){}
__proto__: Object

si j'ouvre le lien https://developers.google.com/chrome...#console-table er que je fais la m�me op�ratio j'ai

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
>console
Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}
memory: MemoryInfo
__proto__: Console
constructor: function Console() { [native code] }
__proto__: ConsoleBase
assert: function assert() { [native code] }
clear: function clear() { [native code] }
constructor: function ConsoleBase() { [native code] }
count: function count() { [native code] }
debug: function debug() { [native code] }
dir: function dir() { [native code] }
dirxml: function dirxml() { [native code] }
error: function error() { [native code] }
group: function group() { [native code] }
groupCollapsed: function groupCollapsed() { [native code] }
groupEnd: function groupEnd() { [native code] }
info: function info() { [native code] }
log: function log() { [native code] }
markTimeline: function markTimeline() { [native code] }
profile: function profile() { [native code] }
profileEnd: function profileEnd() { [native code] }
table: function table() { [native code] }
time: function time() { [native code] }
timeEnd: function timeEnd() { [native code] }
timeStamp: function timeStamp() { [native code] }
timeline: function timeline() { [native code] }
timelineEnd: function timelineEnd() { [native code] }
trace: function trace() { [native code] }
warn: function warn() { [native code] }
__proto__: Object

je dirais que c'est le script https://developers.google.com/_stati...script_foot.js qui fais �a.

A+JYT

18/11/2013, 14h03
Kaamo

Bien vu ! J'avais test� dans un nouvel onglet Chrome qui doit embarquer aussi une console am�lior�e. Quoiqu'il en soit, c'est � surveiller car le rendu est pas mal pour d�bugger
20/11/2013, 14h54
NoSmoking

1 pi�ce(s) jointe(s)

Bonjour,

Citation:

Envoy� par Kaamo

Uniquement dans Chrome � priori

cela existe sous FireFox mais pas de souvenir depuis quand, avec la pr�sentation suivante
http://www.developpez.net/forums/att...1&d=1384955567
20/11/2013, 15h38
Kaamo

Je crois que c'est gr�ce � Firebug. D'ailleurs Chrome s'en est inspir� apparemment.

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