En programación orientada a eventos un signal permite guardar un valor y reaccionar a cambios ejecutando funciones mediante subscripciones.
Un signal en JavaScript es un concepto usado para representar un valor que cambia en el tiempo y cuando cambia ejecuta código automáticamente definido. Aunque es un término que ha ganado popularidad últimamente con frameworks como SolidJS, Preact o Angular, el concepto se puede aplicar en JavaScript puro.
La implementación es muy sencilla. Podemos crear una clase Signal
que siga la estructura de un Getter/Setter, modificándo el método set
ligeramente para que además de asignar el valor que se le pasa por parámetro, también ejecute las funciones que se han suscrito. La subscripción se hace con el método subscribe
que simplemente es un Array
de funciones.
class Signal { constructor(initialValue) { this.value = initialValue; this.subscribers = []; }
get() { return this.value; }
set(newValue) { this.value = newValue; this.subscribers.forEach(fn => fn(newValue)); }
subscribe(callback) { this.subscribers.push(callback); }}
const count = new Signal(0);
count.subscribe(newValue => { console.log(`Count updated to: ${newValue}`);});
count.set(1);count.set(2);
console.log(`Current count: ${count.get()}`);
En este ejemplo se crea un nuevo Signal
de valor 0 y luego se añade una subscripción con una función que indica con qué valor se ha actualizado el Signal
. Luego se llama dos veces set
haciendo que por cada uno se ejecute la función suscrita.
Hemos visto qué es un Signal
y cómo funciona y hemos implementado un ejemplo simple. Los Signals pueden tener mucha utilidad, desde actualizar automáticamente la interfaz de usuario cuando cambian los datos, como un contador de likes, notificaciones en tiempo real, o el estado de un formulario hasta para mantener sincronizados diferentes componentes de una aplicación.