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

jQuery Discussion :

Factorisation de code


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2013
    Messages : 16
    Par défaut Factorisation de code
    Bonjour à tous,

    j'utilise Jquery.countdown pour effectuer plusieurs comptes à rebours dans une même page. Le code de base utilisé pour faire fonctionner le compte à rebours est celui-ci:
    (il s'affiche avec un <span>)

    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
    <script type="text/javascript">
     
     $('#clock01').countdown('2015/11/12 08:15:36')
        .on('update.countdown', function(event) {
             var format = '%H:%M:%S';
    		 if(event.offset.minutes = 2) {
                 alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
             }
             if(event.offset.days > 0) {
                 format = '%-dj%!d ' + format;
             }											
             if(event.offset.weeks > 0) {
                 format = '%-wsem%!w ' + format;
             }											
             $(this).html(event.strftime(format));
         })
         .on('finish.countdown', function(event) {
             $(this).parent()
                 .addClass('disabled')
                 .html('<strong>Terminé</strong>');
         });
    </script>
    Problème:
    Pour afficher une dizaine de comptes à rebours, je copie un tas de fois ce code répétitif en modifiant #clock01 par #clock02, #clock03, #clock04, etc., comme ceci:

    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
    <script type="text/javascript">
     
     $('#clock01').countdown('2035/11/12 08:15:36')
        .on('update.countdown', function(event) {
             var format = '%H:%M:%S';
    		 if(event.offset.minutes = 2) {
                 alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
             }
             if(event.offset.days > 0) {
                 format = '%-dj%!d ' + format;
             }											
             if(event.offset.weeks > 0) {
                 format = '%-wsem%!w ' + format;
             }											
             $(this).html(event.strftime(format));
         })
         .on('finish.countdown', function(event) {
             $(this).parent()
                 .addClass('disabled')
                 .html('<strong>Terminé</strong>');
         });
     
     
     $('#clock02').countdown('2018/11/12 08:15:36')
        .on('update.countdown', function(event) {
             var format = '%H:%M:%S';
    		 if(event.offset.minutes = 2) {
                 alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
             }
             if(event.offset.days > 0) {
                 format = '%-dj%!d ' + format;
             }											
             if(event.offset.weeks > 0) {
                 format = '%-wsem%!w ' + format;
             }											
             $(this).html(event.strftime(format));
         })
         .on('finish.countdown', function(event) {
             $(this).parent()
                 .addClass('disabled')
                 .html('<strong>Terminé</strong>');
         });
     
     
     $('#clock04').countdown('2016/11/12 08:15:36')
        .on('update.countdown', function(event) {
             var format = '%H:%M:%S';
    		 if(event.offset.minutes = 2) {
                 alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
             }
             if(event.offset.days > 0) {
                 format = '%-dj%!d ' + format;
             }											
             if(event.offset.weeks > 0) {
                 format = '%-wsem%!w ' + format;
             }											
             $(this).html(event.strftime(format));
         })
         .on('finish.countdown', function(event) {
             $(this).parent()
                 .addClass('disabled')
                 .html('<strong>Terminé</strong>');
         });
     
     
     $('#clock05').countdown('2015/11/12 08:15:36')
        .on('update.countdown', function(event) {
             var format = '%H:%M:%S';
    		 if(event.offset.minutes = 2) {
                 alert('Le temps 1 est écoulé');  	/* Affiche l'alerte */
             }
             if(event.offset.days > 0) {
                 format = '%-dj%!d ' + format;
             }											
             if(event.offset.weeks > 0) {
                 format = '%-wsem%!w ' + format;
             }											
             $(this).html(event.strftime(format));
         })
         .on('finish.countdown', function(event) {
             $(this).parent()
                 .addClass('disabled')
                 .html('<strong>Terminé</strong>');
         });
    </script>
     
    // etc, etc...
    Ca fonctionne mais bon, il y a beaucoup de codes pour faire 50fois la même chose. ^^
    J'ai donc supposé qu'on pouvait réduire tout ça avec une function mais malgré de nombreux tests, mon faible niveau en JS fait que je n'y arrive pas.

    Question:
    Quelle fonction utiliser et comment l'appeler svp. Je suis certain que c'est un truc trop simple mais ça fait 2h que je suis dessus. ^^

    .

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonjour

    Une fonction de rappel (callback) peut être indépendante et lorsqu'on utilise plusieurs ID commençant par les mêmes caractères on peut aussi simplifier le code.

    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
    var updateCountdown = function( event ){
    	var format = '%H:%M:%S';
     
    	if ( event.offset.minutes = 2 ){
    		alert( 'Le temps 1 est écoulé' );  	/* Affiche l'alerte */
    	}
     
    	 if ( event.offset.days > 0 ){
    	 	format = '%-dj%!d ' + format;
    	}
     
    	 if ( event.offset.weeks > 0 ){
    	 	format = '%-wsem%!w ' + format;
    	}
     
    	$( this ).html( event.strftime( format ) );
    };
     
    var finishCountdown = function( event ){
    	$( event.target ).parent()
    		.addClass( 'disabled' )
    		.html( '<strong>Terminé</strong>' );
    };
     
    $( "[id^='clock']" ).countdown( '2015/11/12 08:15:36' )
        .on( 'update.countdown', updateCountdown )
    	.on( 'finish.countdown', finishCountdown );
    EDIT

    Ici, la simplification $( "[id^='clock']" ) n'est pas utilisable, car chaque ID doit être initialisé avec une date différente. Sauf en utilisant un attribut "data-countdown" qui contiendrait la date de départ. C'est l'idée mise en oeuvre dans cette démonstration.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre averti
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2013
    Messages : 16
    Par défaut
    J'avais effectivement déjà vu cette méthode pour afficher plusieurs comptes à rebours mais je suis + intéressé par le code que j'utilise car plus facile pour moi pour ajouter des options.

    Pour en revenir à nos moutons, mon erreur venait du fait que j'essayais d'englober tout le code dans une seule fonction (ce qui, maintenant que j'ai plus ou moins compris, me parait débile. lol), alors qu'il me fallait en faire 2. Tout de suite ça marche beaucoup mieux.

    Merci beaucoup, même 1000 fois merci !!!!
    Avec le temps que j'ai passé dessus sans voir la fin tu viens de me lever une super épine du pieds!

    Problème résolu.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. factorisation de code
    Par calagan99 dans le forum ASP.NET
    Réponses: 7
    Dernier message: 21/05/2007, 09h00
  2. [C++] Factorisation de code
    Par xterminhate dans le forum C++
    Réponses: 6
    Dernier message: 07/11/2006, 16h21
  3. factoriser du code
    Par grabriel dans le forum Langage
    Réponses: 3
    Dernier message: 26/10/2006, 15h00
  4. Réponses: 7
    Dernier message: 01/08/2006, 11h58
  5. Réponses: 4
    Dernier message: 06/11/2003, 10h37

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