[SPIP] comment organiser ses fonctions javascript

1er juillet 2014

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 ...)

var App = function () {

	var fn1 =  function() {

	}

	var fn2 = function() {

	}

	var fn3 = function() {

	}

//##########################

	// Surveiller le scroll
	var spyScroll = function() {

		var scrollticker;
		$(window).on('scroll',function() {
			//Clear Timeout if one is pending
			if(scrollticker) { 
				window.clearTimeout(scrollticker); scrollticker = null;
			}
			scrollticker=window.setTimeout(function(){
				App.scroll();
			}, 2500); // timeout
		});
	}

	// Surveiller le resize
	var spyResize = function()  {

		var resizeticker;
		window.onresize = function() {
			// Clear Timeout if one is pending
			window.clearTimeout(resizeticker); 
			resizeticker=window.setTimeout(function(){
				App.resize();
			}, 2500); // timeout
		};
	}

	// suivre ajaxcallback de spip
	var spySpipAjax = function() {
		if (typeof onAjaxLoad == 'function') {
			onAjaxLoad(App.reboot);
		}
	}

//##########################
	return {
		//Attention à l'ordre d'appel des modules
		init: function () {
			fn1();
			fn2();
			fn3();
			// les fonctions "espions" 
			spySpipAjax();
			spyScroll();	
			spyResize();				
		},
		// ici les fonctions "ajaxcallback proof"
		reboot: function () {
			fn2();
		},
		// ici les fonctions qui réagissent au scroll
		scroll: function () {
			fn3();
		},  // ici les fonctions qui réagissent au resize screen  
		resize: function () {
			fn3();
		} 
	};

}();

//go !
$(function(){App.init();});