Carnet Wiki

Exemple d’organisation des fonctions javacript

Il s’agit d’une approche globale, qui privilégie le chargement d’un seul fichier, quelque soit la page du site.

La première partie du fichier détaille les fonctions.
La seconde partie (L63) les rassemble en séquence d’exécution.

App.init() : rassemble les fonctions à lancer au chargement de la page
App.reboot() : rassemble les fonctions à relancer à la suite d’un rechargement ajax de SPIP
App.resize() : rassemble les fonctions à exécuter lorsque la fenêtre du navigateur change de taille, (avec un timer pour essayer de ne pas altérer les performances)
App.scroll()  : idem concernant l’événement défilement (« scroll ») de la fenêtre.
(à vous de compléter selon vos besoins...)

//////////////
// App.js //
/////////////
var App = function() {
 
  var fn1 = function() {
    //exemple de test conditionnel : 
    // fn1 s'applique uniquement sur la page sommaire
    if ($('.page_sommaire').length == 0) return false;
    console.log('fn1');
  }
 
  var fn2 = function() {
    console.log('fn2');
  }
 
  var fn3 = function() {
    console.log('fn3');
  }
 
  ///////////////////////////////////
 
  // Surveiller le scroll
  var spyScroll = function() {
 
    var scrollticker;
    $(window).on('scroll', function() {
 
      if (scrollticker) {
        window.clearTimeout(scrollticker);
        scrollticker = null;
      }
      scrollticker = window.setTimeout(function() {
        App.scroll();
      }, 2500); // Durée du timeout
    });
 
  }
 
  // Surveiller le resize
  var spyResize = function() {
 
    var resizeticker;
    window.onresize = function() {
      window.clearTimeout(resizeticker);
      resizeticker = window.setTimeout(function() {
        App.resize();
      }, 200); // Durée du timeout
    };
 
  }
 
  // Surveiller le rechargement ajax SPIP
  var spySpipAjax = function() {
 
    if (typeof onAjaxLoad == 'function') {
      onAjaxLoad(App.reboot);
    }
 
  }
 
  ///////////////////////////////////
  return {
 
    // l'ordre des fonctions importe
    init: function() {
      //fn1();
      //fn2(); 
      //fn3();
      // les fonctions "espions" 
      spySpipAjax();
      spyScroll();
      spyResize();
    },
 
    // ici les fonctions "ajaxproof"
    reboot: function() {
      //fn1();
      //fn3();
    },
    // ici les fonctions qui reagissent au scroll
    scroll: function() {
      //fn1();
    },
    resize: function() {
      //fn3();
    }
  };
 
}();
 
//////////////////////////////// GO !
$(function() {
  App.init()
});

Les conditions de traitement se font dans les fonctions. (ex : si tel élement n’est pas présent dans la page, alors ne fait rien,...voir L9)
Un des avantages de ce découpage, est la facilité avec laquelle on peut désactiver telle ou telle fonction
en commentant simplement son appel dans la seconde partie du script ; chose utile au moment des tests.
On peut également relancer un groupe de fonctions choisies, directement depuis la console JS du navigateur.

Comment mettre en place ce script ?

Sauvegarder votre fichier dans le dossier javascript/ de votre dossier squelette, ou de votre plugin.
Puis déclarer son chargement via le pipeline insert_head, dans le fichier mes_fonctions.php.

<?php
function monplugin_insert_head($flux){
  $js = array(
    'App.js',
    //'pluginX.js',
    );
 
  foreach( $js as $script ){
    if( $path = find_in_path("javascript/$script") )
      $flux .= '<script type="text/javascript" src="'. $path .'"></script>';
  }
 
  return $flux;
}
?>

NB :
Si vous avez recours à des fonctions qui ajoutent des écouteurs d’événements (« bind ») et qui doivent se relancer à rechargement ajax de SPIP, pensez à limiter l’empilement de ces dits « binds ».
ex :
$.('a.click-to-action').unbind().click(function(e) {...});

placido - Mise à jour :25 mars 2016 à 18h08min