[SPIP] comment organiser ses fonctions javascript

un snippet qui propose une structure de départ pour organiser ses fonctions javascript, et gérer facilement certains événements (ex. : scroll, resize, callback de spip ...)

  1. var App = function () {
  2.  
  3.         var fn1 =  function() {
  4.  
  5.         }
  6.  
  7.         var fn2 = function() {
  8.  
  9.         }
  10.  
  11.         var fn3 = function() {
  12.  
  13.         }
  14.  
  15. //##########################
  16.  
  17.         // Surveiller le scroll
  18.         var spyScroll = function() {
  19.  
  20.                 var scrollticker;
  21.                 $(window).on('scroll',function() {
  22.                         //Clear Timeout if one is pending
  23.                         if(scrollticker) {
  24.                                 window.clearTimeout(scrollticker); scrollticker = null;
  25.                         }
  26.                         scrollticker=window.setTimeout(function(){
  27.                                 App.scroll();
  28.                         }, 2500); // timeout
  29.                 });
  30.         }
  31.  
  32.         // Surveiller le resize
  33.         var spyResize = function()  {
  34.  
  35.                 var resizeticker;
  36.                 window.onresize = function() {
  37.                         // Clear Timeout if one is pending
  38.                         window.clearTimeout(resizeticker);
  39.                         resizeticker=window.setTimeout(function(){
  40.                                 App.resize();
  41.                         }, 2500); // timeout
  42.                 };
  43.         }
  44.  
  45.         // suivre ajaxcallback de spip
  46.         var spySpipAjax = function() {
  47.                 if (typeof onAjaxLoad == 'function') {
  48.                         onAjaxLoad(App.reboot);
  49.                 }
  50.         }
  51.  
  52. //##########################
  53.         return {
  54.                 //Attention à l'ordre d'appel des modules
  55.                 init: function () {
  56.                         fn1();
  57.                         fn2();
  58.                         fn3();
  59.                         // les fonctions "espions"
  60.                         spySpipAjax();
  61.                         spyScroll();   
  62.                         spyResize();                           
  63.                 },
  64.                 // ici les fonctions "ajaxcallback proof"
  65.                 reboot: function () {
  66.                         fn2();
  67.                 },
  68.                 // ici les fonctions qui réagissent au scroll
  69.                 scroll: function () {
  70.                         fn3();
  71.                 },  // ici les fonctions qui réagissent au resize screen  
  72.                 resize: function () {
  73.                         fn3();
  74.                 }
  75.         };
  76.  
  77. }();
  78.  
  79. //go !
  80. $(function(){App.init();});

Télécharger


placido

P.-S.

mis à jour le 21 février 2016