Skip to content

Instantly share code, notes, and snippets.

@dlucidone

dlucidone/Observer-Pattern.html

Last active January 15, 2019 04:54
Show Gist options
  • Save dlucidone/bf30367a3c3e9c063648162086244234 to your computer and use it in GitHub Desktop.
Save dlucidone/bf30367a3c3e9c063648162086244234 to your computer and use it in GitHub Desktop.
Download ZIP
JS BinObserver-Pattern// source https://jsbin.com/ferarux
Raw
jsbin.ferarux.js
let observers = [];
let data;
const subscribe = f=> observers.push(f);
const unsubscribe = f=> observers = observers.filter(o=> o!==f );
const notify = ()=>observers.forEach(o=>o(data))
for(let i=1; i <= document.getElementsByClassName('js-paragraph').length;i++){
let update = text => document.querySelector(`.text-p${i}`).textContent = text;
subscribe(update);
document.querySelector(`.subscribe-b${i}`).addEventListener('click',
function(){
subscribe(update)
notify();
})
document.querySelector(`.unsubscribe-b${i}`).addEventListener('click',
function(){
unsubscribe(update)
})
}
document.querySelector('.js-input').addEventListener('keyup', function(e) {
data = e.target.value;
notify();
})
Raw
Observer-Pattern.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Observer-Pattern">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input class="js-input" type="text" placeholder="type something "/>
<br/>
<br/>
<button class="subscribe-b1">subscribe</button>
<button class="unsubscribe-b1">unsubscribe</button>
<p class="js-paragraph text-p1"></p>
<br/>
<button class="subscribe-b2">subscribe</button>
<button class="unsubscribe-b2">unsubscribe</button>
<p class="js-paragraph text-p2"></p>
<br/>
<button class="subscribe-b3">subscribe</button>
<button class="unsubscribe-b3">unsubscribe</button>
<p class="js-paragraph text-p3"></p>
<script id="jsbin-javascript">
let observers = [];
let data;
const subscribe = f=> observers.push(f);
const unsubscribe = f=> observers = observers.filter(o=> o!==f );
const notify = ()=>observers.forEach(o=>o(data))
for(let i=1; i <= document.getElementsByClassName('js-paragraph').length;i++){
let update = text => document.querySelector(`.text-p${i}`).textContent = text;
subscribe(update);
document.querySelector(`.subscribe-b${i}`).addEventListener('click',
function(){
subscribe(update)
notify();
})
document.querySelector(`.unsubscribe-b${i}`).addEventListener('click',
function(){
unsubscribe(update)
})
}
document.querySelector('.js-input').addEventListener('keyup', function(e) {
data = e.target.value;
notify();
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">let observers = [];
let data;
const subscribe = f=> observers.push(f);
const unsubscribe = f=> observers = observers.filter(o=> o!==f );
const notify = ()=>observers.forEach(o=>o(data))
for(let i=1; i <= document.getElementsByClassName('js-paragraph').length;i++){
let update = text => document.querySelector(`.text-p${i}`).textContent = text;
subscribe(update);
document.querySelector(`.subscribe-b${i}`).addEventListener('click',
function(){
subscribe(update)
notify();
})
document.querySelector(`.unsubscribe-b${i}`).addEventListener('click',
function(){
unsubscribe(update)
})
}
document.querySelector('.js-input').addEventListener('keyup', function(e) {
data = e.target.value;
notify();
})</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment