Carnet Wiki

Exemple d’organisation des fonctions javacript Une structure pour JS

Version 9 — March 2016 placido

Placido : Voici une proposition d’organisation de vos fonctions js.
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 contient vos fonctions.
La seconde partie ( L63 ) les rassemble en séquence d’exécution d’éxé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.init() -> lancement initial
App.reboot() -> exécution “perdurante”, qui se relance lors d’un rechargement ajax de spip

//////////////
// App.js //
/////////////
@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@var @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@App@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@ =@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@ @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@function@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@() @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@{@@@SPIP_DIFF1@@@ 
 
 
@@@SPIP_DIFF14@@@var App = function () {@@@SPIP_DIFF1@@@
 
 
var fn1 = function() {
    //exemple de test conditionnel : 
    // fn1 s'applique uniquement sur la page sommaire
    if ($('.page_sommaire').length == ) return false;
    console.log('fn1');
  }
 
 
var fn2 = function() {
    console.log('fn2');
  }
 
 
var fn3 = function() {
    console.log('fn3');
  }
 
 
@@@SPIP_DIFF34@@@@@@SPIP_DIFF2@@@/////////////////////////////////// </code >
 
 
@@@SPIP_DIFF12@@@// Surveiller le scroll
  var spyScroll = function() {@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@var scrollticker;
    $(window).on('scroll', function() {@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@if (scrollticker) {
        window.clearTimeout(scrollticker);
        scrollticker = null;
      }
      scrollticker = window.setTimeout(function() {
        App.scroll();
      }, 2500); // Durée du timeout
    });@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@}@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@// Surveiller le resize
  var spyResize = function() {@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@var resizeticker;
    window.onresize = function() {
      window.clearTimeout(resizeticker);
      resizeticker = window.setTimeout(function() {
        App.resize();
      }, 200); // Durée du timeout
    };@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@}@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@// Surveiller le rechargement ajax SPIP
  var spySpipAjax = function() {@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF0@@@//  surveiller  le  rechargement  ajax
            @@@SPIP_DIFF1@@@ if (typeof onAjaxLoad@@@SPIP_DIFF2@@@ ==@@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@ ===@@@SPIP_DIFF1@@@  'function') {
      onAjaxLoad(App.reboot);
    }@@@SPIP_DIFF0@@@ 
        },@@@SPIP_DIFF1@@@ 
 
 
@@@SPIP_DIFF12@@@}@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@///////////////////////////////////
  return {@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF34@@@@@@SPIP_DIFF0@@@///////////////////////////////////
    @@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@return @@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@{
        @@@SPIP_DIFF1@@@ // l'ordre des fonctions importe
    init: function() @@@SPIP_DIFF0@@@ @@@SPIP_DIFF1@@@ {
      @@@SPIP_DIFF2@@@//fn1 fn1 ();
      @@@SPIP_DIFF2@@@//fn2 fn3 (); 
      @@@SPIP_DIFF2@@@//fn3 ();
      @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@//  les  fonctions  " espions " 
      @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@spySpipAjax@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@();
      @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@spyScroll@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@();
      @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@spyResize@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@();
    @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@},@@@SPIP_DIFF1@@@@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@// ici les fonctions "ajaxproof"
    reboot: function() {
      //fn1();
      //fn3();
    },
    // ici les fonctions qui reagissent au scroll
    scroll: function() {
      //fn1();
    },
    resize: function() {
      //fn3();
    }
  };@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF12@@@}();@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF14@@@// ici les fonctions à relancer à la suite d'un rechargement ajax de SPIP
        reboot: function () {
            fn2();
        }
    };
}();@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF2@@@////////////////////////////////  GO //GO  !
@@@SPIP_DIFF2@@@$(function@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@() @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@{
  @@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@App@@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@$(function(){App@@@SPIP_DIFF1@@@ .init@@@SPIP_DIFF2@@@()
@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@});@@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@()});@@@SPIP_DIFF1@@@ 
 
 
@@@SPIP_DIFF34@@@@@@SPIP_DIFF2@@@</code@@@SPIP_DIFF1@@@ @@@SPIP_DIFF2@@@>
@@@SPIP_DIFF1@@@ Les conditions de traitement @@@SPIP_DIFF0@@@des @@@SPIP_DIFF1@@@ @@@SPIP_DIFF0@@@éléments @@@SPIP_DIFF1@@@ se font dans les fonctions. @@@SPIP_DIFF2@@@( si tel élement n'est pas présent dans la page, alors ne fait rien,...voir  L9 )
 Vous pouvez remplacer les occurrences de 'App' par le prefix de votre plugin par exemple.
 
 
Insérer ce fichier, ainsi que son appel dans le <code>head

comme bon vous semble, par exemple via insert_head ainsi :

&lt;?php
function monplugin_insert_head($flux){
    // les js à inclure quelque soit la page
  $js = array(
    'App.js',
    //'pluginX.js',
    );@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF34@@@foreach( $js as $script ){
    if( $path = find_in_path("javascript/$script") )
      $flux .= '<script type="text/javascript" src="'. $path .'"></script>';
  }@@@SPIP_DIFF1@@@
 
 
@@@SPIP_DIFF34@@@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 ( comme fn2 dans notre exemple ) , pensez à limiter l’empilement de ces dits “binds”.
ex :
$.('a.click-to-action').unbind().click(function(e) {...});