/
01-pub-sub.html
105 lines (86 loc) · 2.45 KB
/
01-pub-sub.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pub/Sub</title>
<style>
.azul {
background-color: blue;
}
.verde {
background-color: green;
}
.rojo {
background-color: red;
}
</style>
</head>
<body>
<p id="primero">primero</p>
<p id="segundo">segundo</p>
<p id="tercero">tercero</p>
<button id="azul">azul</button>
<button id="verde">verde</button>
<button id="rojo">rojo</button>
<script>
var EventBus = {
topics: {},
subscribe: function(topic, listener) {
console.log("subscribe ->", topic);
if (!this.topics[topic]) this.topics[topic] = [];
this.topics[topic].push(listener);
},
publish: function(topic, data) {
console.log("publish ->", topic);
if (!this.topics[topic] || this.topics[topic].length < 1) return;
this.topics[topic].forEach(function(listener) {
listener(data || {});
});
}
};
EventBus.subscribe('hola', alert);
EventBus.publish('hola', 'Hola Mundo');
var Mailer = function() {
EventBus.subscribe('compra', this.sendPurchaseEmail);
};
Mailer.prototype = {
sendPurchaseEmail: function(userEmail) {
console.log("Sent email to " + userEmail);
}
};
var Order = function(params) {
this.params = params;
};
Order.prototype = {
saveOrder: function() {
EventBus.publish('compra', this.params.userEmail);
}
};
var mailer = new Mailer();
var order = new Order({userEmail: 'john@gmail.com'});
order.saveOrder();
var cambiarClase = function(elemento) {
return function(color) {
console.log(color);
console.log(elemento);
elemento.className=color;
};
}
EventBus.subscribe('azul', cambiarClase(document.getElementById('primero')));
EventBus.subscribe('verde', cambiarClase(document.getElementById('primero')));
EventBus.subscribe('rojo', cambiarClase(document.getElementById('primero')));
EventBus.subscribe('azul', cambiarClase(document.getElementById('segundo')));
EventBus.subscribe('verde', cambiarClase(document.getElementById('segundo')));
EventBus.subscribe('azul', cambiarClase(document.getElementById('tercero')));
document.getElementById('azul').onclick = function() {
EventBus.publish('azul', 'azul');
}
document.getElementById('verde').onclick = function() {
EventBus.publish('verde', 'verde');
}
document.getElementById('rojo').onclick = function() {
EventBus.publish('rojo', 'rojo');
}
</script>
</body>
</html>