danielhagnoul

JS : 4 simplifications et 3 améliorations.

Noter ce billet

par

, 15/08/2016 à 22h58 (1102 Affichages)

Je vous propose uniquement les modifications que j'utilise tous les jours depuis quelques semaines.

Quatre simplifications (taper moins de code) :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const
  k$ = selector => document.querySelector( selector ),
  k$all = selector => Array.from( document.querySelectorAll( selector ) ),
  klog = ( ...args ) => { console.log( args.join(" ") ) },
  kerror = ( ...args ) => { console.error( args.join(" ") ) };

Depuis bien des années (je crois me souvenir que cela date de l'apparition du C++), toutes mes constantes commencent toujours par la lettre k, c'est une habitude qui m'a évité bien des déboires.

Les deux premières simplifications (k$ et k$all) sont évidentes.
Les deux suivantes (klog et kerror) sont inutiles si vous disposez d'un outil muni d'une autocomplétion très rapide. J'en ai eu assez de taper le mot "console" plusieurs fois par jour.

Trois améliorations (on tape autant de code, mais on l'organise différemment).

Code JavaScript :

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
const
  kAddListener = arrayOfArrays => {
    for( let ar of arrayOfArrays ){
      ar[0].addEventListener( ar[1], ar[2], false );
    }
  },
  kSetAttribute = arrayOfArrays => {
    for( let ar of arrayOfArrays ){
      ar[0].setAttribute( ar[1], ar[2] );
    }
  },
  kSetStyle = arrayOfArrays => {
    for( let ar of arrayOfArrays ){
      ar[0].style[ ar[1] ] = ar[2];
    }
  };

kAddListener crée des gestionnaires d'événement.
kSetAttribute crée des attributs.
kSetStyle crée des styles.

Ces améliorations sont surtout utiles lorsqu'on doit apporter plusieurs modifications sur un ou plusieurs éléments du DOM.
Elles bouleversent les habitudes, mais on s'y fait très vite.
Je trouve qu'elles facilitent la compréhension, la modification et la maintenance des codes.

Exemples

Changement du style de listes dans le code JS :

Code HTML :

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
<body>
  <main>
    <ul>
      <li>Un</li>
      <li>Deux</li>
      <li>Trois</li>
      <li>Quatre</li>
      <li>Cinq</li>
    </ul>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </main>
  <script>
    // sur tous les éléments "li"
    
    for ( let elemLi of k$all( "li" ) ){
      kSetStyle( [
        [ elemLi, "margin", "0.6rem" ],
        [ elemLi, "color", "gray" ]
      ] );
    }
    
    // sur tous les éléments "li" de la première liste
    
    for( let elemLi of k$all( "ul:first-child > li" ) ){
      kSetStyle( [
        [ elemLi, "font-family", "cursive" ],
        [ elemLi, "font-size", "1.4rem" ]
      ] );
    }
  </script>
</body>

Le cas précédent, plus la modification de la couleur du fond au passage du pointeur :

Code HTML :

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
<body>
  <main>
    <ul>
      <li>Un</li>
      <li>Deux</li>
      <li>Trois</li>
      <li>Quatre</li>
      <li>Cinq</li>
    </ul>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </main>
  <script>
    'use strict';
    
    // sur tous les éléments "li"
    
    for ( let elemLi of k$all( "li" ) ){
      kSetStyle( [
        [ elemLi, "margin", "0.6rem" ],
        [ elemLi, "color", "gray" ]
      ] );
    }
    
    // sur tous les éléments "li" de la première liste
    
    for( let elemLi of k$all( "ul:first-child > li" ) ){
      kSetStyle( [
        [ elemLi, "font-family", "cursive" ],
        [ elemLi, "font-size", "1.4rem" ],
        [ elemLi, "width", "10rem" ]
      ] );
      
      kAddListener( [
        [ elemLi, "mouseenter", ev => { ev.target.style.backgroundColor = "yellow" } ],
        [ elemLi, "mouseleave", ev => { ev.target.style.backgroundColor = "white" } ]
      ] );
      
      /*
       * Notation Arrow au lieu de function, ev.target est l'élément du DOM.
       * Pour simplifier, en cas d'usage multiple dans la fonction,
       * vous pouvez écrire : let elem = ev.target;
       */
      
    }
  </script>
</body>

Création de plusieurs gestionnaires d'événements : deux sur le tag "main" et deux sur le tag "input".

Code HTML :

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
<body>
  <main>
    <p>Hello</p>
    <input id="nomInput" type="text" value="default">
  </main>
  <script>
    'use strict';
 
    let
      elemMain = k$( "main" ),
      elemNom = k$( "#nomInput" ),
      mainClickHandler = ev => {
        klog( "mainClickHandler : ", ev.type, ev.timeStamp );
        /*
         * Notation Arrow au lieu de function, ev.target est l'élément du DOM.
         * Pour simplifier, en cas d'usage multiple dans la fonction,
         * vous pouvez écrire : let elem = ev.target;
         */
        klog( "ev.target : ", ev.target );
        klog( "ev.currentTarget : ", ev.currentTarget );
        klog( "this : ", this );
      },
      mainMouseEnterHandler = ev => {
        klog( "mainMouseEnterHandler : ", ev.type, ev.timeStamp );
      },
      elemNomClickHandler = ev => {
        ev.stopPropagation();
        klog( "elemNomInputClickHandler : ", ev.type, ev.timeStamp );
      },
      elemNomInputHandler = ev => {
        ev.stopPropagation();
        klog( "elemNomInputHandler : ", ev.type, ev.timeStamp );
      };
      
    kAddListener( [
      [ elemMain, "click", mainClickHandler ],
      [ elemMain, "mouseenter", mainMouseEnterHandler ],
      [ elemNom, "click", elemNomClickHandler ],
      [ elemNom, "input", elemNomInputHandler ]
    ] );
  </script>
</body>

L'exemple précédent dans le HEAD :

Code HTML :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
  
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.0.js"></script>
  <script>
    'use strict';
 
    let
      domLoadedHandler= ev => {
        klog( `DOM ready   : ${ new kDvjhDate() }` );
        
      },
      windowLoadHandler = ev => {
        klog( `Window load : ${ new kDvjhDate() }` );
 
        let
          elemMain = k$( "main" ),
          elemNom = k$( "#nomInput" ),
          mainClickHandler = ev => {
            klog( "mainClickHandler : ", ev.type, ev.timeStamp );
            /*
             * Notation Arrow au lieu de function, ev.target est l'élément du DOM.
             * Pour simplifier, en cas d'usage multiple dans la fonction,
             * vous pouvez écrire : let elem = ev.target;
             */
            klog( "ev.target : ", ev.target );
            klog( "ev.currentTarget : ", ev.currentTarget );
            klog( "this : ", this );
          },
          mainMouseEnterHandler = ev => {
            klog( "mainMouseEnterHandler : ", ev.type, ev.timeStamp );
          },
          elemNomClickHandler = ev => {
            ev.stopPropagation();
            klog( "elemNomInputClickHandler : ", ev.type, ev.timeStamp );
          },
          elemNomInputHandler = ev => {
            ev.stopPropagation();
            klog( "elemNomInputHandler : ", ev.type, ev.timeStamp );
          };
          
        kAddListener( [
          [ elemMain, "click", mainClickHandler ],
          [ elemMain, "mouseenter", mainMouseEnterHandler ],
          [ elemNom, "click", elemNomClickHandler ],
          [ elemNom, "input", elemNomInputHandler ]
        ] );
        
      };
      
    kAddListener( [
      [ document, "DOMContentLoaded", domLoadedHandler],
      [ window, "load", windowLoadHandler ]
    ] );    
  </script>
</head>
<body>
  <main>
    <p>Hello</p>
    <input id="nomInput" type="text" value="default">
  </main>
</body>
</html>