js常用设计模式4-发布-订阅模式

发布-订阅模式也叫观察者模式，它定义对象之间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在javaScript开发中，我们一般用事件模型来代替传统的发布-订阅模式。
DOM的addEventListener就是发布-订阅模式。

1，售楼消息订阅

现实生活中，发布-订阅的例子很多。比如买房，我们去售楼处留下微信，当楼房有新消息时，售楼小姐就把最新消息推送给我们。如果不用这种方式，我们就需要隔一段时间向售楼小姐发送消息询问，这么一来，售楼小姐每天都要回复上千人的信息轰炸，心态爆炸。
简单实现发布-订阅：

  • 首先确定谁是信息发布者（售楼处）
  • 给发布者一个消息缓存列表，用于存放订阅者的回调函数，以便通知订阅者（售楼处的花名册）
  • 发布消息的时候，发布者会遍历缓存列表，依次触发每个回调函数（遍历花名册，挨个发微信）
// js中的事件模型就是发布-订阅模式，也叫观察者模式，其实是1对p的问题，p指代对象，这就是个多p问题
var salesOffices = {}  //定义售楼处

salesOffices.clientList = []   //缓存列表，存放订阅者的回调函数
salesOffices.listen = function (fn) {  //增加订阅者
    this.clientList.push(fn)      //订阅者的消息添加进缓存列表
}
salesOffices.trigger = function () {
    for (var i = 0, fn; fn = this.clientList[i++];) {
        fn.apply(this, arguments)    //arguments是发布消息时带上的参数
    }
}
//小明订阅
salesOffices.listen(function (price, squareMeter) {
    console.log('价格：' + price)
    console.log('面积：' + squareMeter)
})
//小红订阅
salesOffices.listen(function (price, squareMeter) {
    console.log('价格：' + price)
    console.log('面积：' + squareMeter)
})

salesOffices.trigger(1000000, 100)
salesOffices.trigger(2000000, 90)

这是一个简单的售楼消息发布-订阅模式，但有一些问题，发布的时候小明和小红都可以接收到所有人订阅的消息，这很明显是不合理的

2，修改代码，让订阅者只收到自己的消息

增加一个用于标识的key，让订阅者只收到自己感兴趣的消息

// 刚才那个没有一一对应的关系，流程很不清晰，让人怀疑里面有py交易
var salesOffices = {}
salesOffices.clientList = {}
salesOffices.listen = function (key, fn) {
    if (!this.clientList[key]) {
        this.clientList[key] = []
    }
    this.clientList[key].push(fn)
}
salesOffices.trigger = function () {
    var key = Array.prototype.shift.call(arguments)
    //去除该消息队形的回调函数集合
    fns = this.clientList[key]
    //如果没有订阅该消息，则返回
    if (!fns || fns.length === 0) {
        return false
    }
    for (var i = 0, fn; fn = fns[i++];) {
        fn.apply(this, arguments)
    }
}
//squareMeter88就是我们添加的key
salesOffices.listen('squareMeter88', function (price) {
    console.log('价格：' + price)
})
salesOffices.listen('squareMeter140', function (price) {
    console.log('价格：' + price)
})

salesOffices.trigger('squareMeter88', 1000000)
salesOffices.trigger('squareMeter140', 2000000)

3，发布-订阅模式的通用实现

如果小明和小红换了一家售楼部，那么又需要重新订阅，这无疑是很麻烦的，我们需要实现一个通用的全局订阅。
我们先将发布-订阅的功能提取出来，放在一个单独的对象中：

// 现在小明怀疑小红还是有py交易，所以想换一个，做一个通用的观察者
var event = {
    clientList: {},
    listen: function (key, fn) {
        if (!this.clientList[key]) {
            this.clientList[key] = []
        }
        this.clientList[key].push(fn)
    },
    trigger: function () {
        var key = Array.prototype.shift.call(arguments)
        fns = this.clientList[key]

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

然后在定义一个installEvent函数，这个函数可以给所有对象都动态安装发布-订阅功能（实际就是做一个浅拷贝）：

var installEvent = function (obj) {
    for (var key in event) {
        obj[key] = event[key]
    }
}

现在我们来try一try刚才写好的功能：

var salesOffices = {}
installEvent(salesOffices)

// 小明订阅消息
salesOffices.listen('squareMeter88', function (price) {
    console.log('价格：' + price)
})
salesOffices.listen('squareMeter140', function (price) {
    console.log('价格：' + price)
})

//小红订阅消息
salesOffices.trigger('squareMeter88', 1000000)
salesOffices.trigger('squareMeter140', 2000000)

4，取消订阅

有一天，小明不想奋斗了，小明的阿姨送了小明一栋楼，小明需要取消和售楼小伙的py交易：

var event = {
    clientList: {},
    listen: function (key, fn) {
        if (!this.clientList[key]) {
            this.clientList[key] = []
        }
        this.clientList[key].push(fn)
    },
    trigger: function () {
        var key = Array.prototype.shift.call(arguments)
        fns = this.clientList[key]

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

event.remove = function (key, fn) {
    var fns = this.clientList[key]
    if (!fns) {
        return false
    }
    //不传就是撤销所有
    if (!fn) {
         fns && (fns.length=0)
    }
    else {
        for (var i = 0, _fn; _fn = fns[i++];) {
            if (_fn = fn) {
                fns.splice(i, 1)
            }
        }
    }
}

var installEvent = function (obj) {
    for (var key in event) {
        obj[key] = event[key]
    }
}

var salesOffices = {}
installEvent(salesOffices)

salesOffices.listen('squareMeter88', f1 = function (price) {
    console.log('价格：' + price)
})
salesOffices.listen('squareMeter140', function (price) {
    console.log('价格：' + price)
})

// salesOffices.trigger('squareMeter88', 1000000)
salesOffices.remove('squareMeter88', f1)

salesOffices.trigger('squareMeter140', 2000000)

5，全局的发布-订阅模式

之前实现的售楼消息订阅，还存在两点问题：
每个被做了浅拷贝的对象，都有所有的listen，trigger，和缓存列表clientList，这个有些浪费
小明和售楼处还有一些耦合。小明需要知道售楼小姐salesOffices才可以订阅，如果小明又想知道salesOffices2的信息，那么又需要订阅salesOffices2，这个操作比较麻烦。
我们可以使用一个中介，相当于卖方的中介公司，用来处理所有的订阅请求。售楼处通过中介来发布消息，客户通过中介来订阅消息。
我们创建一个全局的Event对象，作为中介者：

//全局订阅对象--中介统一管理
var Event = (function () {
    var clientList = {},
        listen,
        trigger,
        remove;

    listen = function (key, fn) {
        if (!clientList[key]) {
            clientList[key] = []
        }
        clientList[key].push(fn)
    }
    trigger = function () {
        var key = Array.prototype.shift.call(arguments)
        fns = clientList[key]

        if (!fns || fns.length === 0) {
            return false
        }
        for (var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    }
    remove = function (key, fn) {
        var fns = clientList[key]
        if (!fns) {
            return false
        }
        //不传就是撤销所有
        if (!fn) {
            fns && fns.length
        }
        else {
            for (var i = 0, _fn; _fn = fns[i++];) {
                if (_fn = fn) {
                    fns.splice(i, 1)
                }
            }
        }
    }
    return {
        listen,
        trigger,
        remove
    }
})()

Event.listen('squareMeter88', function (price) {
    console.log('价格：' + price)
})
Event.trigger('squareMeter88', 1000000)

6，总结

发布-订阅模式的有点很明显，一是时间上的解耦，二是对象上的解耦。发布-订阅模式的应用相当广泛，它和中介者模式有一些类似之处，可以帮助实现中介者模式。
个人认为，在处理的事情上，发布-订阅模式功能相对单一，主要就是收发消息，解决的是发布者和订阅者之间的多对多关系；中介者模式功能五花八门，怎么写都可以，解决的是对象与对象之间的多对多关系，将对象与对象的网状关系，解耦成中介者与对象之间的一对多关系。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容