Builder Patter in Action

builder-pattern.js

/*
* Below is an example of using a builder pattern to distill a declerative function to add/remove event listeners
*/
function callback (event) {
    console.log(event);
}

function addEventListeners1 () {
    this.element.addEventListener('click', callback);
}

function removeEventListeners1 () {
    this.element.removeEventListeners('click', callback);
}

function addRemoveEventListeners1 (add = true) {
    const action = add ? 'addEventListener' : 'removeEventListeners';
    this.element[action]('click', callback);
}

function addRemoveEventListeners2 (listeners = [
    {
        target: element,
        callback: callback,
        event: 'click',
        add: true
    }
]) {
    listeners.forEach((listener) => {
        const action = listener.add ? 'addEventListener' : 'removeEventListeners';
        listener.target[action](listener.event, listener.callback);
    });
}

function addEventListeners1 (listeners = [
    {
        target: element,
        callback: callback,
        event: 'click',
    }
]) {
    const removeFunctions = [];
    listeners.forEach((listener) => {
        listener.target.addEventListener(listener.event, listener.callback);
        removeFunctions.push({
            target: element,
            callback: callback,
            event: 'click',
            remove: () => {
                listener.target.removeEventListeners(listener.event, listener.callback);
            }
        });
    });
    return removeFunctions;
}

function addEventListeners (listeners = [
    {
        target: element,
        callback: callback,
        event: 'click',
    }
]) {
    const removeFunctions = [];
    listeners.forEach((listener) => {
        listener.target.addEventListener(listener.event, listener.callback);
        removeFunctions.push({
            target: element,
            callback: callback,
            event: 'click',
            remove: () => {
                listener.target.removeEventListeners(listener.event, listener.callback);
            }
        });
    });
    return {
        remove: () => {
            removeFunctions.forEach((listener) => {
                listener.remove();
            });
        },
        listeners: removeFunctions
    };
}