wescleymatos · October 20, 2017 16:37
diff --git a/observer.js b/observer.js
 <html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 </head>
 <body>
    <p></p>
    <button id="btn-1" type="button">observar</button>
    <button id="btn-2" type="button">desobservar</button>

    <form>
        <input type="text" name="texto" />
        <button type="submit">Salvar</button>
    </form>

    <button id="btn-3" type="button">notificar alerta</button>

    <script>
        // OO
        class Observable {
            // cada instância da classe Observer
            // começa com um array vazio de observadores/observers
            // que reagem a uma mudança de estado
            constructor() {
                this.observers = [];
            }

            // adicione a capacidade de inscrever um novo objeto / Elemento DOM
            // essencialmente, adicione algo ao array de observadores
            subscribe(f) {
                this.observers.push(f);
            }

            // adicione a capacidade de cancelar a inscrição de um objeto em particular
            // essencilamente, remove algum item do array de observadores
            unsubscribe(f) {
                this.observers = this.observers.filter(subscriber => subscriber !== f);
            }

            // atualiza todos os objetos inscritos / Elementos DOM
            // e passa alguns dados para cada um deles
            notify(data) {
                this.observers.forEach(observer => observer(data));
            }
        }

        // Funcional
        const Observer = () => {
            let observers = [];

            const subscribe = (func) => {
                observers.push(func);
            }

            const unsubscribe = (func) => {
                observers = observers.filter(subscriber => subscriber !== func);
            }

            const notify = (data) => {
                observers.forEach(observer => observer(data));
            }

            return {
                subscribe,
                unsubscribe,
                notify
            }
        }

        let p = document.querySelector('p');
        let btn1 = document.querySelector('#btn-1');
        let btn2 = document.querySelector('#btn-2');
        let btn3 = document.querySelector('#btn-3');
        let btn = document.querySelector('button');
        let form = document.querySelector('form');

        //ação de obs
        const obs = text => console.log(text);
        const obs2 = text => alert(text);

        //const observer = new Observable();
        const observer = Observer();

        btn1.addEventListener('click', function(e) {
            e.preventDefault();
            observer.subscribe(obs);
            observer.subscribe(obs2);
        });

        btn2.addEventListener('click', function(e) {
            e.preventDefault();
            observer.unsubscribe(obs);
        });

        btn3.addEventListener('click', function(e) {
            e.preventDefault();
            observer.notify('texto de notificação');
        });

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            observer.notify(form['texto'].value);
        });
    </script>
 </body>
 </html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<p></p>
	<button id="btn-1" type="button">observar</button>
	<button id="btn-2" type="button">desobservar</button>

	<form>
	<input type="text" name="texto" />
	<button type="submit">Salvar</button>
	</form>

	<button id="btn-3" type="button">notificar alerta</button>

	<script>
	// OO
	class Observable {
	// cada instância da classe Observer
	// começa com um array vazio de observadores/observers
	// que reagem a uma mudança de estado
	constructor() {
	this.observers = [];
	}

	// adicione a capacidade de inscrever um novo objeto / Elemento DOM
	// essencialmente, adicione algo ao array de observadores
	subscribe(f) {
	this.observers.push(f);
	}

	// adicione a capacidade de cancelar a inscrição de um objeto em particular
	// essencilamente, remove algum item do array de observadores
	unsubscribe(f) {
	this.observers = this.observers.filter(subscriber => subscriber !== f);
	}

	// atualiza todos os objetos inscritos / Elementos DOM
	// e passa alguns dados para cada um deles
	notify(data) {
	this.observers.forEach(observer => observer(data));
	}
	}

	// Funcional
	const Observer = () => {
	let observers = [];

	const subscribe = (func) => {
	observers.push(func);
	}

	const unsubscribe = (func) => {
	observers = observers.filter(subscriber => subscriber !== func);
	}

	const notify = (data) => {
	observers.forEach(observer => observer(data));
	}

	return {
	subscribe,
	unsubscribe,
	notify
	}
	}

	let p = document.querySelector('p');
	let btn1 = document.querySelector('#btn-1');
	let btn2 = document.querySelector('#btn-2');
	let btn3 = document.querySelector('#btn-3');
	let btn = document.querySelector('button');
	let form = document.querySelector('form');

	//ação de obs
	const obs = text => console.log(text);
	const obs2 = text => alert(text);

	//const observer = new Observable();
	const observer = Observer();

	btn1.addEventListener('click', function(e) {
	e.preventDefault();
	observer.subscribe(obs);
	observer.subscribe(obs2);
	});

	btn2.addEventListener('click', function(e) {
	e.preventDefault();
	observer.unsubscribe(obs);
	});

	btn3.addEventListener('click', function(e) {
	e.preventDefault();
	observer.notify('texto de notificação');
	});

	form.addEventListener('submit', function(e) {
	e.preventDefault();
	observer.notify(form['texto'].value);
	});
	</script>
	</body>
	</html>