Performance : écoutez les changements de tous les éléments de formulaire pour synchroniser tous les attributs dynamiques avec les nouvelles données.

Question

Il existe un formulaire simple :

<form>
    <input type="checkbox" name="checkbox"> Checkbox
    <input type="email" name="email">
    <button>Submit</button>
</form>

La tâche est : e-mail Le champ doit être affiché uniquement si case à cocher est vérifié, et bouton ne doit être affiché que si e-mail rempli

J'ai donc décidé de l'implémenter comme ceci :

1. e-mail y bouton doit avoir data-visible attribut avec conditions d'affichage
2. case à cocher y e-mail les contributions doivent être écoutées les changements
3. Tout case à cocher y e-mail les modifications doivent être vérifiées pour afficher/masquer data-visible éléments basés sur des conditions

Le résultat est :

// inputs to listen based on id attr (temp solution)
let inputs = form.querySelectorAll('[id]');

// elements to set/unset visibility
let visibles = form.querySelectorAll('[data-visible]');

// Loop all data-visible elements to toggle display: block|none based on evaluated condition
function sync() {
    for (let v of visibles) {
        if(eval(v.getAttribute('data-visible'))) {
            v.style.display = 'block';
        } else {
            v.style.display = 'none';
        }
    }
}

// Listen to all inputs changes and sync with new data
for (let input of inputs) {
    input.addEventListener('change', function(e) {
        sync()
    });
}

sync() // Hide everything that must be hidden on init

<form id="form">
    <input type="checkbox" name="checkbox" id="checkbox"> Checkbox
    <input data-visible="checkbox.checked" type="email" name="email" id="email">
    <button data-visible="email.value">Submit</button>
</form>

Ou sur codepen

En fait, il ne s'agit que d'une approche, les attributs requis/désactivés/classés doivent également être basculés en fonction des modifications des données du formulaire.

En fait, ce que j'essaie de faire, c'est de mettre en œuvre une approche simple de type MVVM, mais en me basant sur les données du formulaire plutôt que sur le modèle JS.

Dans une tâche réelle, il s'avère que ~20 de tous les éléments de formulaire peuvent être écoutés pour toutes leurs modifications, et chaque modification évaluera toutes les ~20 conditions à la fois pour définir ou désactiver certains attributs.

Le problème est donc le suivant : cela pourrait-il causer de graves problèmes de mémoire et de processeur ? Ou bien tout va bien et les cadres MVVM font presque la même chose ? Puis-je le faire ?

Answer 1

J'ai fait quelque chose de similaire auparavant et je ne recommande pas le chemin que vous empruntez actuellement.

Les raisons :

• Vous utilisez eval -- il y a une expression : "eval est le mal" qui est en grande partie vrai et vous ne devriez utiliser eval que s'il n'y a pas d'autre choix.
• Vous passez en boucle sur toutes les entrées à chaque fois, même si rien n'a changé sur la plupart d'entre elles. Cela entraîne une charge inutile pour le navigateur, comme vous l'avez mentionné.

Pour la solution :

• Essayez de placer les champs dans des blocs codés en JSON à l'intérieur du HTML, par exemple :

<input data-visible="{ 'checkbox-id': { 'prop': 'checked', 'regex': true } }" ... >

• Ce qui précède permet plusieurs vérifications par élément (vous pouvez choisir de les ET/OU ensemble).
• analyser les données en utilisant JSON.Parse
• construire un objet de recherche inverse basé sur l'ID d'une entrée donnée - trouver tous ceux qui dépendent de l'entrée (si c'est dynamique, cette partie serait un petit problème)
• lors d'un changement d'entrée, boucle à travers tous les dépendants de manière récursive et les afficher/masquer.

Voici un bricolage mettant en œuvre quelque chose qui ressemble à ce que vous recherchez : js-fiddle

N'hésitez pas à me faire savoir si ce n'est pas ce que vous recherchez.