Presque comme JQuery Écrire son framework JS en <100 lignes

Se simplifier la vie (ma polyfill préférée)

La fonctionnalité la plus demandée de JQuery est la navigation du DOM (fonction $).

Mais :

JQuery est gros.
JQuery est lent
JQuery contient plein de code pour la compatibilité avec les vieux browsers (pas forcément un mal)

Dans un browser moderne, on peut avoir une fonctionnalité similaire à $ en quelques lignes .

On utilise

Il suffit de créer des alias pour querySelector et querySelectorAll (attention à la portée du this).

$ = document.querySelector.bind(document);
$$ = document.querySelectorAll.bind(document);

On étend les mêmes alias à tous les éléments, pour faire des sélections récursives.

HTMLElement.prototype.$ = HTMLElement.prototype.querySelector;
HTMLElement.prototype.$$ = HTMLElement.prototype.querySelectorAll;

On ajoute une façon simple d’itérer sur les listes d’éléments

Nodelist.prototype.forEach = Array.prototype.forEach;

$('table').$$('tr').foreach(function(row) {
	console.log(row);
});

Voici le polyfill complet utilisé par ces pages.

En <100 lignes, on a :

Les alias décrits précédemment.
Des méthodes on et once, pour attacher les évènements à la JQuery.
Un remplacement pour innerHTML inspiré par Pug (voir le CodePen).
Une méthode pour modifier plusieurs propriétés CSS d’un coup, récursivement (voir le CodePen).