Categoría: JavaScript

https://www.sitepoint.com/javascript-error-handling/

Básicamente cambiar el prototype para que internamente guarde un Symbol (id única) y nos permita eliminarlas:

(function()
{
    let target = EventTarget.prototype;
    let functionName = 'addEventListener';
    let func = target[functionName];

    let symbolHidden = Symbol('hidden');

    function hidden(instance)
    {
        if(instance[symbolHidden] === undefined)
        {
            let area = {};
            instance[symbolHidden] = area;
            return area;
        }

        return instance[symbolHidden];
    }

    function listenersFrom(instance)
    {
        let area = hidden(instance);
        if(!area.listeners) { area.listeners = []; }
        return area.listeners;
    }

    target[functionName] = function(type, listener)
    {
        let listeners = listenersFrom(this);

        listeners.push({ type, listener });

        func.apply(this, [type, listener]);
    };

    target['removeEventListeners'] = function(targetType)
    {
        let self = this;

        let listeners = listenersFrom(this);
        let removed = [];

        listeners.forEach(item =>
        {
            let type = item.type;
            let listener = item.listener;

            if(type == targetType)
            {
                self.removeEventListener(type, listener);
            }
        });
    };
})();

document.addEventListener("DOMContentLoaded", event => { console.log('event 1'); });
document.addEventListener("DOMContentLoaded", event => { console.log('event 2'); });
document.addEventListener("click", event => { console.log('click event'); });

document.dispatchEvent(new Event('DOMContentLoaded'));
document.removeEventListeners('DOMContentLoaded');
document.dispatchEvent(new Event('DOMContentLoaded'));

Con la web https://jsonplaceholder.typicode.com/guide/ vamos a mostrar un selector de usuarios (con sus nombres) cuando seleccionemos uno nos mostrarán todos los ‘todos’ que tiene, cada uno tendrá a su lado un botón de editar y otro de borrar. También tendremos un botón de añadir un ‘todo’ a ese usuario.

console.log("Inicio script");
		function benchmark() {
			return new Promise(function (resolve, reject) {
				let t=0;
				for (let i=0; i<10000; i++) {
					for (let j=0; j<100000; j++) {
						t++;
					}
				}
				console.log(t);
				resolve(t);
			});
		}
		console.log("Creo promesa");
		let test=benchmark();
		console.log("Suscripción");
		test.then((result) => {
			console.log("resuelto");
			console.log(result);
		})
		console.log("Fin script");

En el ejercicio de clicar números hemos generado un array aleatorio y para ello hemos visto diferentes formas:

1.- Generar un número aleatorio e introducirlo en el array si no está, si ya está buscar otro número aleatorio.
2.- Crear un array correlativo y ordenarlo (sort) con random
3.- Utilizar el algoritmo Fisher-Yates (https://dev.to/codebubb/how-to-shuffle-an-array-in-javascript-2ikj)
4.- Otros, como el Durstenfeld, que mejora el Fisher Yates (este y más aquí: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)

Nos gustaría saber cual es más rápido y vamos a realizar un benchmark de estas 4 (o más) funciones. Definiremos una función a la que le pasamos el tamaño del array y nos devolverá un array desordenado de ese tamaño.

Una vez tengamos las funciones mediremos el tiempo, para ello ejecutaremos 1000 veces cada función para tamaños de 100, 1000, 10000 y 100000 elementos. Miraremos cual es la función más rápida para cada uno de estos tamaños.

Con el conocimiento adquirido crear una clase benchmark que en el constructor le pasemos como parámetros la función a evaluar y un array con el número de elementos (por defecto los mismos que antes). También tendrá una propiedad ‘times’ que por defecto vale 1000 pero que tendrá getter y setter. Esta clase tendrá un método getDurations que nos devolverá el resultado de ejecutar ‘times’ veces la función para cada uno de los tamaños que le pasamos por el array.