[DOM] Bonnes pratiques pour garder le code propre

Version imprimable

25/11/2008, 16h36
The Vandals

[DOM] Bonnes pratiques pour garder le code propre

Bonjour,

Je m'intéroge sur les bonnes pratiques que vous utilisez pour garder votre code Javascript / JQuery / CSS propre.

Dans la boite ou je travail, il n'y a pas vraiment de standard pour le code javascript et JQuery et souvent il est très difficile de s'y retrouver.

Nous utilisons Monorail avec Brail (Boo on Rail).

Pour l'instant, le seul standard que nous avons, c'est de diminuer le plus possible les structures conditionnels dans les brail et l'utilisation des subviews pour éviter les répétitions.

J'aimerais bien connaitre vos pratique de développement et/ou standard que vous avez mis en place pour conservez une bonne lisibilité et que le code soit facile à modifier et ouvert aux changements.

Merci
25/11/2008, 16h38
SpaceFrog

il est vrai que JQuery ne facilite pas la lisibilité du code pour un non JQueryste ...
Pour moi la seule vraie ouverture consiste à commenter un maximum ...
25/11/2008, 16h49
The Vandals

Le problème avec les commentaire, c'est qu'on ne sait jamais s'il sont a jour.
L'équipe doit être vraiment discipliné pour que cette pratique soit fiable.
25/11/2008, 16h56
SpaceFrog

regarde de ce coté là
http://jsdoctoolkit.org/
25/11/2008, 23h01
Bovino

Tu peux aussi soumettre ton script à JSLint
et je te garanti que si il passe, c'est que ton code est propre !
26/11/2008, 09h55
SpaceFrog

sauf que je ne suis pas d'accord avec leur analyse ...

dire que la notatton

Code:

document.myform.myelement.value

est préférable à

Code:

document.forms['myform'].elements['myelement'].value

Je me demande bien selon quel critère ???

de plus si l'on suit leur conseils pour les echappements de caractères dans certaines expressions regulières elle n'est plus valable...

seraient ils à la solde de microsoft ?

Un code propre peut être ... mais plus crossbrowser :(
26/11/2008, 10h17
DoubleU

Citation:

Envoyé par JSLint

Problem at line 290 character 39: eval is evil.

AHAHAHAH
26/11/2008, 10h28
SpaceFrog

oui :roll:

eval ne doit pas être utilisé n'importe comment c'est clair ...
mais de la à coller ça systématiquement ...

vraiment moyen cet analyseur :(
26/11/2008, 11h26
Spir

Moi je comment pas mal et j'utilise des nom de div, class ou fonction pertinent ca aide deja pas mal.

Mais généralement mon code jQuery ne fait que quelques lignes. Ca sert a ca un framework: coder moins :)
26/11/2008, 11h41
franculo_caoulene

Citation:

Envoyé par SpaceFrog

sauf que je ne suis pas d'accord avec leur analyse ...

dire que la notatton

Code:

document.myform.myelement.value

est préférable à

Code:

document.forms['myform'].elements['myelement'].value

Je me demande bien selon quel critère ???

moins de caractères à taper? (et je dis ça sérieusement)
26/11/2008, 11h55
SpaceFrog

Donc tu préfères avoir moins de caractères à taper mais un code qui ne fonctionne pas :king:

Non, j'aime les codes clairs et concis. C'est pas censé fonctionner?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title></head> <body> <form name="form1"> <input id="champ" type="text" value="test" /> </form> <script type="text/javascript"> alert(document.form1.champ.value); </script> </body> </html>
Personnellement, ce qui m'a aidé à faire du code (un peu) plus propre est le guide javascript se trouvant sur le centre des développeurs de mozilla : https://developer.mozilla.org/En/Cor...ript_1.5_Guide
Surtout les parties traitant des objets. Ce n'est pas explicitement dit, mais ça pousse un peu à la réflexion.

26/11/2008, 12h22
marcha

@franculo_caoulene moi aussi j'aime éviter de trop taper de caractères, mais
dans ce cas précis il faut savoir que cette notation n'est pas standard, mais
largement supportée tout de même, un article sur le sujet ici (en anglais malheureusement)

Shortcut accessors

Si on regarde la notation: document.myform.myelement cela sous-entends
que myform est une propriété de l'élément document et que myelement est
une propriété de l'élément Form. Hors on devrait se limiter à utiliser des
propriétés qui sont définies dans l'interface DOM standardisée par le w3c
par exemple pour l'élément Form L'interface HTMLFormElement

Imaginons qu'on aie un élément <input name='method' ... /> que pourrait
bien signifier la notation: document.myform.method :-)

Je suis d'accord avec SpaceFrog, cet analyseur m'a l'air bien "léger"
26/11/2008, 12h34
SpaceFrog

d'autant plus que la notation

Code:

document.myform.myelement

est basée sur le name si je ne m'abuse

[list][*]que deviennent les radios de groupe (même name)[*]pour code en strict on passe à l'id ...
[list]

au moins la notation [] est universelle à ce niveau là
26/11/2008, 12h45
DoubleU

Ou alors, sélectionner les éléments par leur id... au moins, ya pas de suspens sur le résultat ^^
26/11/2008, 12h50
SpaceFrog

ce qui t'oblige à generer des id differents pour des names identiques ...
mais au moins pas de confusion possible par la suite
26/11/2008, 13h02
le_chomeur

+1 avec spaffy :)

ps : un bon code n'est pas forcément un code parfait , mais un code bien documenté !!
26/11/2008, 13h15
marcha

@The Vandals

Peut-être pourrai-tu poster un exemple de code pour qu'on ne s'éloigne pas trop
du sujet.
26/11/2008, 16h25
The Vandals

Ce n'est pas un bout de code précis que je veux améliorer, mais plutot avoir une idée des bonnes pratiques et de ce que vous metez en place ou que vous utilisez pour que le code reste propre.

Je crois que la discution prend une bonne direction. Je vous remercie pour tous vos commentaires. Je vais aller lire la doc de mozilla ;)

Je vais quand même poster un exemple de code, sa peux surement aider a amener d'autres idées

voici donc mon default layout que j'utilise dans chacun de mes controller.
Nous utilisons Monorail pour le MVC (Model View Controller) avec Brail (Boo on Rail) pour les views.

Le code spécifique au controller est ajouter dans la section ChildOutput

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Fit Test</title>
    <link rel="stylesheet" type="text/css" href="/Content/css/application.css" />
    <script src="/Content/javascript/jquery-1.2.6.js" type="text/javascript" ></script>
    <script src="/Content/javascript/jquery.form.js" type="text/javascript" ></script>
    <script src="/Content/javascript/application.js" type="text/javascript" ></script>
 
    ${?contentToRegister}
 
    <script language="javascript">
    	$(document).ready(function(){
 
    		$("#javascript-not-enabled").hide();
    		$(".rounded").corner("5px");
    		setSectionItemsMaxLength(30);
    		setLeftContentSectionMinWidth();
    		setMainContentWidth();
    		setSearchSectionHeight();
    		$(window).resize(setMainContentWidth);    		    		
    		$(".section-title").click(function(){
				$(this).next(".section-body").toggle(600);
			}); 						
 
			$("#alert-section div.content").vAlign();	
			$("#alert-section").click(function(){
				$("#alert-section").toggle(600);							
			});
 
			${?layout}
 
			${?javascript}
		});
 
    	function setSectionItemsMaxLength(maxCharacters){
    		$(".section-item a").each(
    			function(){
    				if( $(this).text().length > maxCharacters){
    					var temp = $(this).text();
    					$(this).text(temp.substring(0, maxCharacters - 3) + "...")
    					$(this).attr("title", temp);
    				}
    			}
    		);
    	}
 
    	function setSearchSectionHeight(){
    		var minHeight = $("#logo-section").height();
    		$("#search-section").css("min-height", (minHeight - 25) / 2);
    		$("#search-section").css("margin-top", (minHeight - 25) / 2);    		    		
    	}
 
    	function setLeftContentSectionMinWidth(){
    		var maxWidth = 0;
    		$(".section-item").each(
    			function(){
    				if($(this).outerWidth() > maxWidth){
    					maxWidth = $(this).parent().outerWidth();
    				}
    			}
    		);
    		$("#left-content-section").css("min-width", maxWidth);	
    		$("#logo-section").css("min-width", maxWidth + 15);	    		
    	}
 
    	function setMainContentWidth(){ 
    		var windowsWidth = $(window).width();
    		$("#right-content-section").width(windowsWidth - $("#left-content-section").width() - 40);    		
    	}
 
    	${?javascriptFunctions}
 
 
    </script>
</head>
<body>
 
<div id="header-section">
		<div id="logo-section"><img src="/content/images/logo_pcms.gif" alt="FitTest Logo" /></div>
		<div id="profile-section">Philippe | <a href="#">Profile</a> | <a href="#">Déconnexion</a></div>
	</div>
 
	<div id="search-section">
		${Form.DisableValidation()}
		${Form.FormTag({@action: "Rechercher" })} 		
		${Form.TextField("searchString")} 
		${Form.Submit("Rechercher")}				
		${Form.EndFormTag()}
	</div>			
 
 
 
	<div id="main-content-section">
 
		<div class="alert-spacer">
			<% if IsDefined("message"): %>						
				${OutputSubView("/SubViews/AlertMessage")}							
			<% end %>
		</div>	
 
		<div id="javascript-not-enabled">
			Pour accéder à ce site, vous devez activer Javascript. Consultez la documentation de votre navigateur pour obtenir les instructions de modification de ce paramètre.
		</div>
 
		<div id="left-content-section">
			<div  id="fittings-section" class="rounded fittingLight2">
				<div class="section-title rounded fittingLight1">Fittings</div>
				<div class="section-body fittingLight2">
					<div class="section-item">${UrlHelper.Link("Tous (383)",{@action:"Index", @controller:"Fittings"})}</div>
					<div class="section-item"><a href"#">Échus dans 30 jours suivant la date courante (24)</a></div>
					<div class="section-item"><a href"#">Échus (3)</a></div>
					<div class="section-item"><a href"#">Valide (356)</a></div>
					<div class="section-item">${UrlHelper.Link("Non saisie (5)",{@action:"ListWithoutFitting", @controller:"Fittings"})}</div>
				</div>
			</div>
			<br />
			<div  id="personnel-section" class="rounded personnelLight2">
				<div class="section-title rounded personnelLight1" >Personnel</div>
				<div class="section-body personnelLight2"> 
					<div class="section-item">${UrlHelper.Link("Tous (515)",{@action:"Index", @controller:"Personnel"})}</div>
					<br />
					<div class="section-item">${UrlHelper.Link("Synchronisation",{@action:"Index", @controller:"Synchronisation"})}</div>
				</div>
			</div>
 
		</div>
		<div id="right-content-section">			
			<div id="child-output-section" class="rounded">			
				${ChildOutput}
			</div>
		</div>
		<div class="copyright-section">Tous droits réservés </div>	
	</div>
</div>
</body>
</html>

26/11/2008, 16h38
le_chomeur

hormis le manque totale de commentaires et le fait que tu utilises un framework le code est propre :aie:
26/11/2008, 16h49
The Vandals

Il y a un truc que je me demande:
est ce qu'il est mieux d'utiliser beaucoup de subview afin de respecter le SRP (Single Responsability Principle) ou d'utiliser les subview seulement pour la réutilisation et éviter les répétition?