Q.lib.js : Création d'une bibliothèque jQuery like, plus efficiente - Part.01

Pourquoi créer une nouvelle lib?

Comme nous l'avons vu dans les précédents articles, jQuery souffre d'un handicap majeur dans le cadre des applications mobiles/sites mobiles, à savoir une vitesse d’exécution très faible en regard des performances natives de Javascript, associée à sa lourdeur.

Pour autant, jQuery est largement utilisé par les web-designers, il est incontournable dans beaucoup de frameworks. L'idée est donc de concevoir une librairie dont l'utilisation mime au mieux dans sa syntaxe celle de jQuery tout en étant conçue pour être entre 4 et 20 fois plus rapide et beaucoup moins lourde (jQuery 2.1.1: 247Ko et 84Ko minimifiée).

Entrons dans les entrailles de Q.lib.js

A propos des sélecteurs

jQuery utilise uniformément la syntaxe $("selector") pour sélectionner n'importe quel type d'éléments du DOM. Et c'est principalement à cause de cette syntaxe uniforme qu'il se trouve pénalisé en temps d'exécution. Mais par ailleurs cette syntaxe est beaucoup plus compacte par exemple qu'un document.getElementById classique.

L'idée dans Q.lib.js est donc d'encapsuler ces méthodes natives par une fonction.

La syntaxe des sélecteurs de Q.lib.js est de la forme: $_.selectorfunction("string")

Q.lib.js propose 5 fonctions de sélection :

• $_.id("myid") équivalent à
  • $("#myid")
  ou
  • document.getElementById("myid")
• $_.tn("p") équivalent à
  • $("p")
  ou
  • document.getElementsByTagName("p")
• $_.cn("myclass") équivalent à
  • $(".myclass")
  ou
  • document.getElementsByClassName("myclass")
• $_.qs("p:first-child") équivalent à
  • $("p:first")
  ou
  • document.querySelector("p:first-child")
• $_.qa("[data-sample]") équivalent à
  • $("[data-sample]")
  ou
  • document.querySelectorAll("[data-sample]")

Code

$_ = new Object;

// ====================================================
// SELECTORS WRAPPERS
// ====================================================

$_.id = function(id) {
 return document.getElementById(id);
};

$_.tn = function(tn) {
 return document.getElementsByTagName(tn);
};

$_.cn = function(cn) {
 return document.getElementsByClassName(cn);
};

$_.qs = function(q) {
 return document.querySelector(q);
};

$_.qa = function(q) {
 return document.querySelectorAll(q);
};

Les cas de querySelector et querySelectorAll

querySelector peut ètre utilisé à partir d'un élément (ce qui réduit le champ de recherche). Un prototype .qs a donc été ajouté aux objets de type Node.
Il en va de même pour querySelectorAll. Un prototype .qa a donc été ajouté aux objets de type Node.

Code

Node.prototype.qs = function(q) {
 return this.querySelector(q);
}

Node.prototype.qa = function(q) {
 return document.querySelectorAll(q, this);
}

Résumé

Dans cette première partie nous avons vu la syntaxe des sélecteurs optimisés de Q.lib.js. Les développeurs étant censés savoir quel est la sélection à effectuer, mémoriser ces sélecteurs là ne devraient pas être difficile, pas plus que de les écrire vu leur longueur.

Dans la 2ème partie nous verrons comment Q.lib.js gère les classes CSS.