js异步编程解决方案之事件发布订阅模式

前面那一篇Promise的就对异步编程做了一个很好的处理,但是还有另外一个处理异步事件的方式,就是大名鼎鼎的 观察者模式,也就是俗称发布订阅模式,这个用的就比较广泛了,也更加厉害,因为这是一种软件开发模式,而不像前面promise只是js里面的一个规范。例子超级多,比如socket.io的emit和on方法,js添加事件监听的addEventListener函数,都是基于观察者模式。当然,这个作为异步编程的解决方法也是一个非常好的选择,而且功能也更加强大。

而且这个的实现也是非常简单,和promise相比简直太容易了。当然我们就选一个第三方的库好了,eventproxy这个用的比较多。虽然说语法比较简单,官网文档也很好,但是还是举个例子吧。

先来感受一下回调之力

14192467-6AD8-400D-B09D-D04440982FDD

这个图前面也放过了,看的真是舒畅,因为代码缩进看的额太舒服了,整齐!

还是前面那个例子

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
var log = console.log.bind(console);
function first (cb) {
setTimeout(function () {
if (cb) cb("data 1111");
},1000)
}
function second (cb) {
setTimeout(function () {
if (cb) cb("data 22222");
},1000)
}
function third (cb) {
setTimeout(function () {
if (cb) cb("data 33333");
},1000)
}
first(function (data) {
log(data)
second(function (data) {
log(data)
third(function (data) {
log(data)
});
});
});

这个三层回调,如果使用eventproxy重写的话,就是这样的

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
var proxy = new EventProxy();
proxy.addListener("first", function(data){ // 如果接收到一个first的消息则执行函数
log(data);
second();
});
proxy.addListener("second", function(data){
log(data);
third();
});
proxy.addListener("third", function(data){
log(data);
});

function first () {
setTimeout(function () {
proxy.emit("first","data 1111"); // 如果first完成了,就发布一个名为first的消息 并传入参数
},1000)
}
function second () {
setTimeout(function () {
proxy.emit("second","data 222");
},1000)
}
function third () {
setTimeout(function () {
proxy.emit("third","data 3333");
},1000)
}

first(); // 执行第一个函数

这个是不是很像给元素添加事件那个 而且比promsie更具有可读性吧

而且如果first和second没有相互依赖 但是third依赖前两个 这样的实现用观察者模式也非常容易实现 如果是promise的话就可能有点麻烦了 因此这个用的人好像比较多 至于用那个 其实两个的目标是一样的 都是解决js回调的 功能上都差不多的 自己看情况选择吧