DOM Communicator
Esta lib usa o padrão Pub-Sub para registrar eventos Browser. O Communicator usa padrão singleton para instanciar um módulo de comunicação, em que é possível instanciar diferentes comunicadores a partir de chaves únicas.
Instalando
yarn add dom-communicator
Como usar
No exemplo abaixo, temos uma comunicação utilizando os métodos subscribe
, unsubscribe
e publish
:
import DOMCommunicator from "dom-communicator";
const isBrowser = typeof window !== "undefined";
function main() {
if (!isBrowser) return;
const communicator = DOMCommunicator.getInstance();
const unsubscribeEventFoo = communicator.subscribe("foo", (data) => {
console.log("foo", data);
});
communicator.publish("foo", "bar");
// console.log => "foo", "bar"
unsubscribeEventA();
communicator.publish("foo", "bar");
// nothing
}
main();
Criando e comunicando com uma outra instancia
Caso haja a necessidade de criar um comunicador em uma chave diferente, é possível usar o método getInstance
passando um valor para a key
, por padrão o método getInstance
adiciona o comunicador à chave __COMMUNICATOR__
:
const PERSONAL_KEY = "__PERSONAL_KEY__";
const personalCommunicator = DOMCommunicator.getInstance(PERSONAL_KEY);
export default personalCommunicator;
Dessa forma sempre que a comunicação for realizada dentro do contexto __PERSONAL_KEY__
, basta usar o getInstance
com essa chave.
unsubscribe
Outra forma de fazer o unsubscribe
é repassando a função de callback diretamente da seguinte forma:
...
const communicator = DOMCommunicator.getInstance();
const callback = () => null;
// Adiciona o método callback no evento "foo"
communicator.subscribe("foo", callback);
// Remove o método callback no evento "foo"
communicator.unsubscribe("foo", callback);
...