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

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

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

先来感受一下回调之力

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

还是前面那个例子

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重写的话，就是这样的

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回调的 功能上都差不多的 自己看情况选择吧