November 20, 2010tdebarochez  •  Comment

Prototype 1.7 new features

This blog post has not been translated, please find below the french version
Màj : Voici l'annonce officielle

Introduction

Alors que la version 1.7 de Prototype, le fameux framework JS, s'apprête à voir le jour. Nous allons, dans cet article, lister trois nouveautés majeures de cette version.

Element.Layout

Cette classe permet de fournir, avec un maximum de précision, tout un tas de mesures sur un élement. Il existe deux manières d'utiliser cette classe, voici la méthode du fainéant :

$('elt').measure('margin-top'); // -> retourne la marge haute en pixel de elt
$('elt').measure('height'); // -> retourne la hauteur en pixel de elt

Le fonctionnement de la deuxième ligne est similaire à l'utilisation de la méthode Element#getHeight(). Une utilisation plus minutieuse pourrait ressembler à ça ;

var layout = $('elt').getLayout(true);
layout.get('margin-top'); // retourne la même hauteur que précédemment.
layout.get('height'); // retourne la même hauteur que précédemment.

L'avantage de la seconde méthode est que les valeurs de base nécessaire au calcul des dimensions sont mises en cache dans la variable layout et donc un seul appel est fait au DOM (gourmand en ressource). Le paramètre "true" de Element#getLayout() permet de forcer la récupération de toutes les valeurs d'un seul coup. Si ce paramètre est homis, les valeurs seront récupérées une par une et conservées en cache. Pour des raisons d'optimisation, les anciennes méthodes Element#getWidth() et Element#getHeight() n'utilisent malheureusement pas cette méthode, mais utilisent l'ancienne méthode Element#getDimensions(). La liste des propriétés mesurables est disponible à cette adresse. Note 1 : Il faut bien garder à l'esprit que si les dimensions de l'élément, auquel votre layout fais référence, change, vous devrez créer un nouvelle instance de Element.Layout. Note 2 : Si votre élément est masqué avec style "diplay:none" il vous sera possible d'effectuer des mesures uniquement si l'élément parent est visible. Par ailleurs les mesures width, height, top, left, bottom et right auront toujours pour valeur 0.

Event.Handler

L'un des problèmes de la délégation d'évènement avec les anciennes méthodes d'observation d'évènement est le ciblage de l'élement qui nous intéresse. Considérons pour les exemples suivant l'arbre HTML ci-dessous :

<ul id="elt">
  <li class="foo" data-code="un"><a href="javascript:void(0);">un</a></li>
  <li class="foo" data-code="deux"><a href="javascript:void(0);">deux</a></li>
  <li class="foo" data-code="trois"><a href="javascript:void(0);">trois</a></li>
</ul>

Lorsque qu'un évènement est levé sur un élément il est levé sur tous ses parents récursivement, tant qu'il n'est pas arrêté explicitement ou qu'il a atteind la racine de l'arbre. On devait précédemment faire ce genre de chose :

var listener = function (evt) {
  var target = evt.findElement('.foo');
  if (!Object.isElement(target)) {
    return;
  }
  ... // traitement avec target, élement qui nous intéresse
}
$('elt').observe('click', listener);
... // et au besoin :
$('elt').stopObserving('click', listener);

Quand nous devions arrêter l'observation d'un évènement particulier il était fastidieux de devoir stocker la fonction assignée dans une variable bien précise afin de pouvoir la re-passer en paramètre à la méthode Element#stopObserving(). Heureusement les développeurs de Prototype nous ont simplifié la tache avec la méthode Element#on(). Cette nouvelle méthode prend en paramètre un nouveau paramètre (un selecteur CSS) permettant de cibler exactement la cible qui nous intéresse. De plus elle renvoie une instance de Element.Handler qui possède des méthodes stop() et start() qui permettent respectivement d'arrêter et de reprendre l'observation d'un évènement particulier. En voici un exemple d'utilisation :

var handler = $('elt').on('click', '.foo', function (evt, target) {
  ... // traitement avec target, élement qui nous intéresse
});
... // et au besoin :
handler.stop();
... // et de nouveau :
handler.start();

Pour compléter ces améliorations, une nouvelle méthode a été ajouté : Element#purge() permettant de nettoyer un élément de tous les listeners d'évenement qui lui sont attachés.

Sizzle

Sizzle est le nom du sélecteur CSS utilisé dans jQuery. Afin de pouvoir utiliser ce middleware partagé entre plusieurs frameworks, l'équipe de développement a fait un gros travail de modularité pour laisser le choix du moteur du traitement CSS. En effet, si vous souhaitez par exemple utiliser l'ancien moteur (présent depuis la version 1.5.1), il vous suffit de rapatrier le code source (via github par exemple) et compiler prototype de la manière suivante :

rake dist SELECTOR_ENGINE=legacy_selector

De la même manière vous pouvez écrire votre propre moteur en le plaçant dans le répertoire vendor/ du package.

Conclusion

Les trois améliorations de la nouvelle mouture énoncées ci-dessus peuvent-être complétées par une ribambelle d'ajustements (notamment lié à IE9). Cette nouvelle version confirme les prétentions de la librairie visant à palier les manquements de compatibilités inter-navigateurs et simplifier considérablement le développement d'applications javascript, tout en restant le plus léger possible.