nodoj est une bibliothèque JavaScript pour manipuler le DOM.
Téléchargerimport nodoj from 'nodoj'
nodoj.before(els, node)
: insère des éléments avant un nœudnodoj.start(els, node)
: insère des éléments au début d’un nœudnodoj.end(els, node)
: insère des éléments à la fin d’un nœudnodoj.after(els, node)
: insère des éléments après un nœudnodoj.replace(els, node)
: remplace un nœud par des éléments
Les éléments se trouvent sous forme d’objets dans un tableau els
. Les clefs de ces objets peuvent être des noms compris par JavaScript comme className
, textContent
, href
et bien d’autres ou les noms réservés suivants.
tag
: définit le type de nœud (div
si omis)children
: ajoute des éléments (enfants) au nœudon_événement
: écoute des événements ayant lieu sur le nœuddata_attribut
: ajoute un attribut de données au nœudk
: permet de manipuler le nœud après génération, en y accedant avec l’objet_
sc
(shortcuts) : permet en une clef de renseigner rapidement le tag, l’id (préfixé de#
) et les classes (préfixées de.
)comment
: ajoute un commentaire dans le HTML
Voici un exemple qui met tout cela en œuvre :
nodoj.start([
{tag: 'h1', textContent: 'Liste de tâches'},
{sc: 'p.maClasse1.maClasse2#monId', innerHTML: '<b>Super</b>.'},
{tag: 'ul', children: [
{comment: 'Ceci est un commentaire'},
{tag: 'li', textContent: 'Dormir', data_pos: 1},
{tag: 'li', textContent: 'Manger', data_pos: 2}
]},
{textContent: 'Cliquer', on_click: () => alert('🐻')},
{k: 'ok'}
]), document.body)
// accés au noeud grâce à k :
_.ok.textContent = 'Ceci est une div.'
Dans le tableau els
, il est aussi possible d’insérer la valeur null
. Cela peut s’avérer utile avec les nœuds conditionnels :
const n = 12
nodoj.end([
{textContent: `Valeur de n : ${n}`},
(() => n > 3
? null // aucun nœud ne sera créé pour n > 3
: {textContent: `n <= 3`}
)()
], document.body)
Pourquoi nodoj ?
Chaque développeur a plusieurs choix en ce qui concerne le rafraîchissement de l’interface utilisateur :
- Rafraîchir tout le HTML à chaque action. Cela est envisageable pour une toute petite application. Le développement est grandement simplifié, mais le programme est très peu performant.
- Comparer le DOM virtuel à sa version modifiée pour ne rafraîchir que ce qui change. Le programme est un peu lourd. Il faut apprendre à se servir d’outils complexes. Les performances sont correctes. Pour le développement, on pense que ça va être simple, mais ça l’est rarement.
- Ne rafraîchir que ce qui change. Le développeur connait tous les effets de toutes les actions permises. Il peut donc effectuer les modifications lui-même sans laisser un algorithme comparer pour lui ce qui change. Cela nécessite de la rigueur, mais le programme reste léger et performant.
Cette dernière solution est la meilleure, mais le code peut devenir très complexe et surtout très long. De plus, il faut être bien organisé. nodoj conserve les bénéfices de cette approche et supprime ces inconvénients. De plus, la bibliothèque est très légère.
Télécharger