IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[DOM] Bonnes pratiques pour garder le code propre


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Inscrit en
    Mai 2002
    Messages
    19
    Détails du profil
    Informations forums :
    Inscription : Mai 2002
    Messages : 19
    Points : 14
    Points
    14
    Par défaut [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

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 664
    Points
    66 664
    Billets dans le blog
    1
    Par défaut
    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 ...

  3. #3
    Membre à l'essai
    Inscrit en
    Mai 2002
    Messages
    19
    Détails du profil
    Informations forums :
    Inscription : Mai 2002
    Messages : 19
    Points : 14
    Points
    14
    Par défaut
    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.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 664
    Points
    66 664
    Billets dans le blog
    1
    Par défaut
    regarde de ce coté là
    http://jsdoctoolkit.org/

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Tu peux aussi soumettre ton script à JSLint
    et je te garanti que si il passe, c'est que ton code est propre !

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 664
    Points
    66 664
    Billets dans le blog
    1
    Par défaut
    sauf que je ne suis pas d'accord avec leur analyse ...

    dire que la notatton

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.myform.myelement.value
    est préférable à

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  7. #7
    Membre expérimenté Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Points : 1 388
    Points
    1 388
    Par défaut
    Citation Envoyé par JSLint
    Problem at line 290 character 39: eval is evil.
    AHAHAHAH

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 664
    Points
    66 664
    Billets dans le blog
    1
    Par défaut
    oui

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

    vraiment moyen cet analyseur

  9. #9
    Membre régulier
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    95
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 95
    Points : 72
    Points
    72
    Par défaut
    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

  10. #10
    Membre émérite Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Points : 2 953
    Points
    2 953
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    sauf que je ne suis pas d'accord avec leur analyse ...

    dire que la notatton

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.myform.myelement.value
    est préférable à

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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)

  11. #11
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 664
    Points
    66 664
    Billets dans le blog
    1
    Par défaut
    Donc tu préfères avoir moins de caractères à taper mais un code qui ne fonctionne pas

  12. #12
    Membre émérite Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Points : 2 953
    Points
    2 953
    Par défaut
    Non, j'aime les codes clairs et concis. C'est pas censé fonctionner?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  13. #13
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Points : 2 351
    Points
    2 351
    Par défaut
    @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"

  14. #14
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 664
    Points
    66 664
    Billets dans le blog
    1
    Par défaut
    d'autant plus que la notation
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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à

  15. #15
    Membre expérimenté Avatar de DoubleU
    Profil pro
    Inscrit en
    Janvier 2006
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 106
    Points : 1 388
    Points
    1 388
    Par défaut
    Ou alors, sélectionner les éléments par leur id... au moins, ya pas de suspens sur le résultat ^^

  16. #16
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 664
    Points
    66 664
    Billets dans le blog
    1
    Par défaut
    ce qui t'oblige à generer des id differents pour des names identiques ...
    mais au moins pas de confusion possible par la suite

  17. #17
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    +1 avec spaffy

    ps : un bon code n'est pas forcément un code parfait , mais un code bien documenté !!

  18. #18
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Points : 2 351
    Points
    2 351
    Par défaut
    @The Vandals

    Peut-être pourrai-tu poster un exemple de code pour qu'on ne s'éloigne pas trop
    du sujet.

  19. #19
    Membre à l'essai
    Inscrit en
    Mai 2002
    Messages
    19
    Détails du profil
    Informations forums :
    Inscription : Mai 2002
    Messages : 19
    Points : 14
    Points
    14
    Par défaut
    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

  20. #20
    Membre à l'essai
    Inscrit en
    Mai 2002
    Messages
    19
    Détails du profil
    Informations forums :
    Inscription : Mai 2002
    Messages : 19
    Points : 14
    Points
    14
    Par défaut
    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 : 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
    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>

Discussions similaires

  1. Réponses: 4
    Dernier message: 02/02/2010, 23h49
  2. Bonne pratique pour inclure source de projet open source ?
    Par joseph_p dans le forum Eclipse Java
    Réponses: 3
    Dernier message: 05/07/2007, 21h51
  3. Réponses: 5
    Dernier message: 12/09/2006, 18h06
  4. Tutoriel SEO : Introduction et bonnes pratiques pour l'optimisation de pages Web
    Par Community Management dans le forum Référencement
    Réponses: 0
    Dernier message: 06/07/2006, 00h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo