danielhagnoul

2014-11-27 : Création d'un objet à partir d'un fragment du DOM

Il n'est pas rare de voir une débauche de nom de classes et d'ID dans un code HTML, particulièrement lorsqu'il s'agit des éléments d'un formulaire. On constatera souvent un usage partiel de cette panoplie de sélecteurs, mais on vous répondra qu'il faut prévoir les usages futurs.

En pratiquant de cette manière on alourdit le code HTML et en JS on grève les performances en multipliant les constructions de sélecteurs. Chaque construction exigeant un parcours, plus ou moins rapide, de l'arbre du DOM.

Certes, il existe pléthore de méthodes pour parcourir les nœuds d'un arbre DOM à partir d'un nœud parent. On peut donc construire tous nos sélecteurs à partir d'un seul ID. Mais on n'améliorera pas les performances en déplaçant le problème.

Nous allons voir comment, à partir d'un seul ID, on peut disposer de notre panoplie de sélecteurs en parcourant une seule fois l'arbre d'un fragment du DOM.

Fonction kCreateDOMObject().

2018-05-20

Je n'ai jamais cessé d'utiliser cette fonction, mais à l'usage il est apparu qu'elle était perfectible pour gérer un formulaire (FORM). Le point d'achoppement de cette fonction est le besoin de fournir des noms pour le paramètre keys ou de se satisfaire de nom peu explicite (dom_2, dom_3, etc.).

Pour traiter un FORM, l'idée est de remplacer le paramètre keys par les attributs name. À première vue il n'y a pas de problème puisque chaque attribut name d'un FORM doit être unique si l'on veut transmettre les paramètres au serveur. Mais les attributs name d'un ensemble de boutons radio doivent être identiques et les attributs name d'une série de boutons checkbox peuvent être identiques. Pour créer un objet à partir d'un FORM, il fallait mettre au point le moyen de s'assurer de l'unicité du nom pris en compte pour chaque propriété de l'objet.

Il manquait aussi une fonction permettant de transmettre les informations du formulaire au serveur exclusivement sous forme JSON. La fonction kFromToDatas voulait répondre à ce besoin, mais elle était perfectible.

Aujourd'hui, les fonctions kFormNameUnique, kCreateFormDOMObject et la fonction modifiée kFromDatas font leur entrée dans le fichier dvjhUtilities-1.8.0.js

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
kFormNameUnique(elemForm = kRequiredParamVerbose({
  param: "elemForm",
  type: "htmlFormElement",
  info: "un élément Form"
}))

Elle s'assure de l'unicité de la valeur des attributs name et data-name pris en considération, en tenant compte du problème posé par les boutons radio et les checkbox.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
kCreateFormDOMObject(elemForm = kRequiredParamVerbose({
    param: "elemForm",
    type: "htmlFormElement",
    info: "un élément FORM"
  }),
  boolChildren = true
)

Elle crée un objet DOM avec un lien vers chaque élément composant le formulaire. Le lien est nommé comme les attributs name et data-name pris en compte ou il porte un numéro d'index. Les numéros d'index manquants sont relatifs aux éléments du FORM nommés ou non pris en compte, exemple : BR.

kFromToDatas() : cette fonction convertit toutes (inclus les boutons radio et les checkbox) les informations du formulaire en un objet JSON. Il est alors facile d'examiner la cohérence des données (la validation finale doit toujours se faire côté serveur). On peut ajouter toutes les propriétés nécessaires avant l'envoi au serveur.

Ces fonctions ont mijoté plus de trois mois avant que je vous les propose, de nombreuses modifications et corrections ont été apportées au fil des tests et de l'expérience d'utilisation.

Les prochains billets seront appelés Form 2, et Form 3. Ils contiendront des exercices montrant l'utilisation de ces fonctions.