L’API des sélécteurs est une API du navigateur permettant de rechercher des élé- ments HTML dans une page. Elle contient plusieurs fonctions, résumées dans la fi- gure 3.1. Les fonctionsquerySelectoretquerySelectorAllsont les plus générales : les
autres correspondent seulement à des cas particuliers de ces fonctions. Par exemple, la fonctiongetElementByIdpeut être implémentée comme ceci :
var getElementById = function ( id ) { return querySelector ( ’# ’ + id ) };
De façon similaire, les fonctionsgetElementsByClassNameetgetElementsByTagName
peuvent être implémentée avecquerySelectorAll.
Fonction Élément(s) recherché(s)
querySelector(s) Premier élément correspondant au sélecteur CSSs getElementById(i) Élément dont l’attributidvauti
querySelectorAll(s) Tous les éléments correspondant au sélecteur CSSs getElementsByTagName(n) Tous les éléments ayant pour nomn
getElementsByClassName(c) Tous les éléments dont l’attributclasscontientc
Figure3.1 – L’API standard des sélecteurs.
function getWords () {
var form = document . getElementById ( ’add - user ’); var sections =
form . getElementsByTagName ( ’ fieldset ’); var results = [];
for ( var i = 0 ; i < sections . length ; i ++) { var words = sections [i]
. getElementsByClassName ( ’ word ’); results [i] = words ;
}
return results }
Listing 3.1 – Utilisation de l’API native pour rechercher des éléments dans une page HTML
function getWords () {
var form = $( ’#add - user ’);
var sections = $( ’ fieldset ’, form ); return sections . map ( function () {
return $( ’. word ’, this ) })
}
Listing 3.2 – Utilisation de jQuery pour rechercher des éléments dans une page HTML
Ces fonctions plus spécifiques ont l’avantage d’avoir une implémentation plus performante par le navigateur, comparées aux fonctions générales querySelector et querySelectorAll. D’un autre côté, elles ajoutent de la complexité au code en augmen-
tant le nombre de fonctions à connaître pour manipuler l’API et en poussant l’utilisa- teur à penser à un bas niveau d’abstraction.
Le listing 3.1 illustre l’utilisation de cette API pour récupérer une liste de champs de formulaires. La fonctiongetWordscommence par rechercher l’élément ayant pour
idadd-user, puis collecte tous les sous-éléments de typefieldset, et, pour chacun,
retourne la liste de ses sous-éléments dont l’attribut class contientword.
Notons que le code utilise uniquement les trois fonctions bas niveau de l’API du navigateur. À titre de comparaison, la bibliothèque jQuery [BK08], largement utilisée par les sites Web [jQu], ne propose qu’une seule fonction pour rechercher des éléments dans une page HTML. Une version du programmegetWordsavec jQuery est donnée dans le listing 3.2.
Le code est à la fois plus court et plus simple, notamment grâce au fait que jQuery propose une API plus haut niveau que l’API du navigateur. Cependant, ce confort d’utilisation se paie par des performances d’exécution moindres (les benchmarks pré- sentés en section 3.4 montrent des temps d’exécution de l’ordre de 10 à 30 fois plus longs avec jQuery).
API des sélécteurs 45
def getWords () = {
val form = document . find ("#add - user ") val sections = form . findAll (" fieldset ") sections map (_. findAll (". word " ))
}
Listing 3.3 – Utilisation de DomOps pour rechercher des éléments dans une page HTML
def find ( selector : Rep [ String ]) = selector match { case ConstIdCss ( id ) if receiver == document =>
DocumentGetElementById ( Const ( id )) case _ =>
SelectorFind ( receiver , selector ) }
Listing 3.4 – Optimisation defind
En nous appuyant sur le mécanisme d’évaluation partielle de LMS, notre idée consiste à définir une API de haut niveau, fournissant un confort d’utilisation simi- laire à jQuery, mais dont l’évaluation produit un programme utilisant les APIs bas niveau du navigateur, bénéficiant des bonnes performances d’exécution.
Ainsi, nous proposons une API de haut niveau,DomOps, comprenant deux fonc- tions :findetfindAll, permettant de chercher un élément ou plusieurs éléments, res-
pectivement. Ces fonctions sont directement équivalentes aux fonctionsquerySelector
etquerySelectorAllde l’API native. Elles prennent en paramètre un sélecteur CSS et
retournent le premier élément ou tous les éléments correspondant.
Le listing 3.3 montre code de la fonctiongetWordsavec notre API. Ce code est, lui
aussi, simple et concis, comparé au listing 3.1 utilisant l’API native du navigateur. L’implémentation des fonctionsfindetfindAllanalyse les sélecteurs qui leur sont
passés en paramètre pour détecter une opportunité d’utilisation d’une fonction spé- cialisée plutôt que de toujours utiliserquerySelectoretquerySelectorAll, respective-
ment. L’analyse consiste à détecter un motif particulier dans la chaîne de caractères représentant le sélecteur.
Ainsi, l’implémentation de findvérifie si le sélecteur correspond à un sélecteur
d’id et si l’objet sur lequel est appelée la méthode est document, et, le cas échéant,
retourne un nœud de typeDocumentGetElementById. Sinon, elle retourne un nœud de typeSelectorFind. Ces nœud sont traduits, par le générateur de code JavaScript, en
code utilisantgetElementByIdetquerySelector, respectivement. Le listing 3.4 montre
l’implémentation de la fonctionfind.
Du point de vue de l’utilisateur, la fonction s’utilise toujours de la même façon mais elle produit un code différent en fonction de la valeur des paramètres qui lui sont passés. Par exemple, l’évaluation de l’expressiondocument.find("#add-user button")
Figure 3.2 – Représentations abstraites de code retournées par l’évaluation des ex- pressions (a)document.find("#add-user button")et (b)document.find("#add-user") def findAll ( selector : Rep [ String ]) = selector match {
case ConstClassName ( name ) =>
GetElementsByClassName ( receiver , name ) case ConstTagName ( name ) =>
GetElementsByTagName ( receiver , name ) case _ =>
SelectorFindAll ( receiver , selector ) }
Listing 3.5 – Optimisation de findAll
teur d’id (c’est un sélecteur composite sélectionnant les éléments de typebuttonà l’in-
térieur de l’élément ayant pour idadd-user). D’un autre côté, l’expressiondocument.find("#add-user")
retourne un nœud de typeDocumentGetElementById. La figure 3.2
L’implémentation de la fonctionfindAll, donnée dans le listing 3.5, est similaire :
le sélecteur passé en paramètre est analysé pour détecter s’il s’agit d’un sélecteur de
classe ou de nom d’élément, et, le cas échéant, retourne un nœud de typeGetElementsByClassName
ouGetElementsByTagName, respectivement. Sinon, elle retourne un nœud de typeSelectorFindAll.
Notre solution offre donc à l’utilisateur une API de haut niveau dont le surcoût n’existe que lors de la première évaluation du programme : le programme final généré s’appuie, lorsque cela est possible, directement sur les APIs bas niveau performantes. En fait, le listing 3.3 produit exactement le code bas niveau du listing 3.1.