Производительность: прослушивание всех изменений элементов формы для синхронизации всех динамических атрибутов с новыми данными - PullRequest
Новая
       43

Производительность: прослушивание всех изменений элементов формы для синхронизации всех динамических атрибутов с новыми данными

2 голосов
/ 11 июня 2019

Существует простая форма: 

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

Задача: email поле должно отображаться только в том случае, если установлен флажок checkbox и кнопка должен отображаться, только если электронная почта заполнена

Итак, я решил реализовать это следующим образом:

  1. электронная почта и кнопка должна иметь атрибут data-visible с условиями отображения
  2. флажок и электронная почта входы должны прослушиваться для изменений
  3. Любой checkbox и email изменения должны запускать проверки для отображения | скрытия data-visible элементов на основе условий

Результат: 

// 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>

Или на codepen

Так что, на самом деле, это только подход, обязательные / отключенные / атрибуты класса такжедолжно быть переключено на основе изменений данных формы

По сути, я пытаюсь достичь этого - реализовать простой MVVM-подобный подход, но полагаться на данные формы, а не на модель JS

В реальномоказывается, что ~ 20 всех элементов формы могут прослушиваться для всех их изменений, и каждое изменение будет оценивать все ~ 20 условий одновременно для установки / сброса некоторых атрибутов

Итак, проблемаэто может вызвать серьезные проблемы с памятью / процессором?Или все в порядке и MVVM-фреймворки делают почти то же самое?Могу ли я пойти с этим?

1 Ответ

1 голос
/ 11 июня 2019

Я делал нечто подобное раньше и не рекомендую путь, по которому вы сейчас путешествуете.

Причины:

  • Вы используете eval - есть выражение: "eval is evil", которое в основном верно, и вы должны использовать eval, только если другого выбора нет.
  • Вы просматриваете все входы каждый раз, хотя на большинстве из них ничего не изменилось. Это приведет к ненужной загрузке браузера, как вы упомянули

Для решения:

  • Попробуйте поместить поле в JSON-кодированные блоки внутри HTML - как:

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

  • Вышеприведенное допускает несколько проверок на элемент (вы можете выбрать И / ИЛИ их вместе)
  • анализ данных с помощью JSON.Parse
  • построить объект обратного просмотра на основе идентификатора любого заданного ввода - найти все, что полагается на ввод (если это динамическое, эта часть будет маленькой проблемой)
  • при входном цикле изменения всех зависимостей рекурсивно и показать / скрыть их

Вот скрипка, реализующая что-то вроде того, что вы ищете: js-fiddle

Пожалуйста, дайте мне знать, если это не то, что вы ищете.

...