JS Patron Observador

formstate.js

class FormState {
    constructor(){
        this.fields = {};
        this.subscribers = [];
    }

    subscribe(callback) {
        this.subscribers.push(callback)
    }

    notify() {
        this.subscribers.map((sub) => sub(this.fields))
    }

    updateField(params) {
        const {name, value} = params;
        this.fields[name] = value;
        this.notify()
    }
}

const formState = new FormState()
export default formState

index.js

import formState from './formstate.js';

const formValuesWrapper = document.querySelector('#formValues');

formState.subscribe((fields) => {
    formValuesWrapper.innerHTML = `<pre>${JSON.stringify(fields, null, 4)}</pre>`
});

const inputs = [...document.querySelectorAll('input')];

inputs.map((input) => {
    input.addEventListener('input', (e) => {
        formState.updateField({
            name: e.target.name,
            value: e.target.value
        });
    });
});