发布订阅模式

含义说明

发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。先订阅再发布

作用

1】支持简单的广播通信，当对象状态发生改变时，会自动通知已经订阅过的对象

2】可以应用在异步编程中，替代回调函数，可以订阅ajax之后的事件，只需要订阅自己需要的部分（那么ajax调用发布之后订阅的就可以拿到消息了）（不需要关心对象在异步运行时候的状态）

3】对象之间的松耦合，两个对象之间都互相不了解彼此。但是，不影响通信，当有新的订阅者出现的时候，发布的代码无需改变，同样发布的代码改变，只要之前约定的事件的名称没有改变，也不影响订阅

4】vue react 之间实现跨组件之间的传值

生活中的实例

比如小红最近在淘宝网看上一双鞋子，但是呢，联系到卖家后，才发现这双鞋卖光了，但是小红对这双鞋又非常喜欢，所以联系卖家，问卖家什么时候有货，卖家告诉她，要等一个星期后才有货，卖家告诉小红，要是你喜欢的话，可以收藏我们店铺，等有货的时候再通知你，所以小红收藏了此店铺，但与此同时，小明，小花等也喜欢这双鞋，也收藏了该店铺；等来货的时候就会依次通知他们。

如何实现发布——订阅模式

1、首先要想好谁是发布者（比如上面的卖家）

2、然后给发布者添加一个缓存列表，用于存放回调函数来通知订阅者（比如上面的买家收藏了卖家的店铺，卖家通过收藏了该店铺的一个列表名单）

3、最后就是发布消息，发布者遍历这个缓存列表，依次触发里面存放的订阅者回调函数

var shopObj = {} // 定义发布者
shopObj.list = [] // 缓存列表 存放的是订阅的函数

// 增加订阅者
shopObj.listen = function(key,fn) {
    if(!this.list[key]) {
        this.list[key] = []
    }
    this.list[key].push(fn)
}

// 发布消息
shopObj.trigger = function() {
    // 对应的key取出来
    var key = Array.prototype.shift.call(arguments)
    var fns = this.list[key]

    if(!fns || fns.length == 0) {
        return
    }
    for (var i = 0, fn; fn = fns[i++];) {
        fn.apply(this, arguments)
    }
}

shopObj.listen('red', function(size) {
    console.log(`尺码是${size}`)
})

shopObj.listen('black', function(size) {
    console.log(`尺码是${size}`)
})

// 小红
shopObj.trigger('red', 42)

// 小明
shopObj.trigger('black', 43)

封装

var event = {
    list: [],
    listen: function(key,fn) {
        if (!this.list[key]) {
            this.list[key] = []
        }
        this.list[key].push(fn)
    },
    trigger: function() {
        // 对应的key取出来
        var key = Array.prototype.shift.call(arguments)

        var fns = this.list[key]
        if(!fns || fns.length == 0) {
            return
        }
        for(var i = 0, fn; fn = fns[i++];) {
            fn(...arguments)
        }
    }
}

event.remove = function(key, fn) {
    var fns = this.list[key]
    if(!fns) {
        return false
    }
    if(!fn) {
        fn && (fns.length = 0)
    } else {
        for(var i = fns.length - 1; i >= 0; i--) {
            var _fn = fns[i]
            if(_fn == fn) {
                fns.splice(i, 1)
            }
        }
    }
}

再封装

var Event = (function() {
    var list = {},
        listen,
        trigger,
        remove;

    listen = function(key, fn) {
        if (!this.list[key]) {
            this.list[key] = []
        }
        this.list[key].push(fn)
    }
    trigger = function() {
        // 对应的key取出来
        var key = Array.prototype.shift.call(arguments)

        var fns = this.list[key]
        if(!fns || fns.length == 0) {
            return
        }
        for(var i = 0, fn; fn = fns[i++];) {
            fn(...arguments)
        }
    }

    remove = function(key, fn) {
        var fns = this.list[key]
        if(!fns) {
            return false
        }
        if(!fn) {
            fn && (fns.length = 0)
        } else {
            for(var i = fns.length - 1; i >= 0; i--) {
                var _fn = fns[i]
                if(_fn == fn) {
                    fns.splice(i, 1)
                }
            }
        }
    }

    return {
        listen,
        trigger,
        remove
    }
})()

发布订阅模式 实现低耦合

用发布-订阅模式重写之后，对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。当登录成功时，登录模块只需要发布登录成功的消息，而业务方接收到消息之后，就会开始进行各自的业务处理，登录模块并不关心业务方究竟要做什么，也不想去了解它们的内部细节。