Digital Fashion

Dans un accès de désespoir vu l'activité débordante de ce blog en ce moment, je me lance et je vous propose cette petite librairie javascript qui va vous permettre d'éviter les appels de fonction en double:

var Defer = {
	config: {
		defaultTimeout: 1000
	},
	stack: {},
	schedule: function(id, fn, timeout) {
		if (typeof(timeout) == 'undefined') {
			timeout = Defer.config.defaultTimeout;
		}
		if (typeof(Defer.stack[id]) == 'undefined') {
			Defer.stack[id] = {defer: false, fn: fn, timeout: timeout };
			window.setTimeout('Defer.execute(\'' + id + '\')', timeout);
		} else {
			Defer.stack[id].defer = true;
		}
	},
	execute: function(id) {
		if (typeof(Defer.stack[id]) != 'undefined' && !Defer.stack[id].defer) {
			Defer.stack[id].fn();
			Defer.stack[id] = undefined;
		} else {
			Defer.stack[id].defer = false;
			window.setTimeout('Defer.execute(\'' + id + '\')', Defer.stack[id].timeout);
		}
	},
};

On peut l'utiliser ainsi par exemple (jquery requis):

$(document).ready(function() {
	$('#nickname').keyup(function() {
		Defer.schedule('chknickname', function() {
			$.get('/account/check_nickname.php', { nickname: $('#nickname').val() }, function(data) {
				data = eval(data);
				$('#nickname_availability').html(data ? 'Pseudo disponible' : 'Pseudo indisponible');
			});
		}, 2000);
	});
});

Concrétement, ce bout de code attache à un input un événement qui ne sera executé que s'il n'est pas répété avant une certaine période (2 secondes ici). C'est à dire qu'on évite de faire une requête xmlhttp à chaque keyup, on attend plutot que l'utilisateur arrête de taper un moment avant de balancer la sauce. A noter que de par la méthode utiliser, l'espace de nommage d'execution de la fonction change (par exemple ici, on ne peut pas utiliser this pour accéder a l'input).

Voila voila.

Liens en vrac:

• MySQL DBA, le blog d'un DBA de chez flickr.
• Serving Javascript Fast, par un développeur de chez flickr (décidément...) A noter que cet article parle des méthodes de cache d'une manière assez généraliste pour être appliquée à autre chose que du JavaScript, et n'oubliez pas non plus de lire les commentaires, il y en a de très interressants.
• AJAX & Protoype: A Primer, explication simple et claire sur l'utilisation d'AJAX et des Classes avec Prototype.
• Akra's Devnotes: Zend Framework, la catégorie Zend Framework du blog de Rob Allen, très interressante.

Un petit exemple vaut mieux qu'un grand discours :-)

var recognizePattern = 'autoselect-';
 
var inputCollection = document.getElementsByTagName('input');
var collectionLength = inputCollection.length;
 
for (var j = 0; j < collectionLength; j++) {
 
	var myInput = inputCollection[j];
 
	if (myInput.getAttribute('type') == 'checkbox' && myInput.getAttribute('id').indexOf(recognizePattern) == 0) {
 
		myInput.addEventListener('change', function() {
 
			var mySelect = document.getElementById('slt');
			var optLength = mySelect.options.length;
 
			var re = new RegExp(this.getAttribute('id').substr(recognizePattern.length));
 
			for (var i = 0; i < optLength; i++) {
 
				if (re.exec(mySelect.options[i].text)) {
 
					mySelect.options[i].selected = this.checked;
 
				}
 
			}
 
		}, false);
 
	}
 
}

Behaviour.register({
 
	'#checkall': function(el) {
	
		el.style.display = 'block';
		el.onclick = function() {
		
			$$('input.delete').each(function(element) { element.checked = $F('checkall'); });
		
		}
	
	}
	
});

Franchement, j'aime.

EDIT: A la demande générale, un exemple :-) A savoir: la version que j'utilise de prototype est partiellement tirée du SVN. Et oui, $$ n'est pas encore disponible dans prototype release (ainsi que String.strip(), nécessaire à $$).

Pour ceux que ça interresse, une sélection de quelques outils pour développer des sites web2.0 enabled^[1] .

• Le framework Prototype, avec sa documentation
• La librairie script.aculo.us, basée sur prototype
• La fonction cssQuery, pour sélectionner des éléments via des sélecteurs CSS
• Behavior, pour du javascript non-obtrusif
• Le blog de Dean Edwards en général, et en particulier ses billets sur la gestion de window.onload

J'en profite pour noter ça sur mon wiki.