Javascript 发布-订阅模式

Javascript 发布-订阅模式

本文内容搬运于：Javascript中理解发布-订阅模式，虽是搬运，但纯手打，如果错误，请多指正，如有侵权，请告知，立即删除！

发布-订阅模式介绍

发布-订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。

现实生活中的发布-订阅模式：

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

在上面的故事中，可以看出是一个典型的发布订阅模式，卖家是属于发布者，小红、小明等属于订阅者，订阅该店铺，卖家作为发布者，当鞋子到了的时候，会依次通知小明，小红等，依次使用旺旺等工具给他们发布消息；

发布订阅模式的优点

  1. 支持简单的广播通信，当对象状态发生变化时，会自动通知已经订阅过的对象。比如上面的例子，小明、小红不需要天天逛淘宝看鞋子到了没有，在合适的时间点，发布者（卖家）来货了的时候，会通知该订阅者（小红、小明等人）；
  2. 发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，他不管发布者如何改变；同理卖家（发布者）只需要将鞋子来货的这件事告诉订阅者（买家），他不管买家是买还是不买，还是买其他家的。只要鞋子到货了就通知订阅者即可。

对于第一点，我们日常工作中也经常使用到，比如我们的 ajax 请求，请求有成功(success)和失败(error)的回调函数，我们可以订阅ajax的success 和 error 事件，我们并不关心对象在异步运行的状态，我们只关心 success 的时候或者 error 的时候我们要做点我们自己做的事情就可以啦。

发布者订阅模式的缺点

  1. 创建订阅者需要消耗一定的时间和内存；
  2. 虽然可以弱化对象之间的联系，如果过度使用的话，反而使代码不好理解及代码不好维护等等。

如何实现发布-订阅模式？

  1. 首先要想好谁是发布者（比如上面的卖家）
  2. 然后给发布者添加一个缓存列表，用于存放回调函数来通知订阅者（比如上面的卖家收藏了卖家的店铺，卖家通过收藏了该店铺的一个列表名单）；
  3. 最后就是发布消息，发布者遍历这个缓存列表，依次触发里面存放的订阅者回调函数。

我们还可以在回调函数里面添加一些参数，比如鞋子的颜色，鞋子尺码等信息；

我们先来实现下简单的发布-订阅模式，代码如下：

// 定义发布者
let publisher = {}
// 缓存列表，存放订阅者回调函数
publisher.list = []

// 增加订阅者
publisher.listen = function (fn) {
    // 将订阅消息添加到缓存列表
    this.list.push(fn)
}

// 发布消息
publisher.trigger = function () {
    for (let i = 0, fn; fn = this.list[i++];) {
        fn.apply(this, arguments)
    }
}


// 小红订阅如下消息
publisher.listen(function (color, size) {
    console.log('颜色是：', color)
    console.log('尺码是：', size)
})

// 小华订阅如下消息
publisher.listen(function (color, size) {
    console.log('再次打印颜色是：', color)
    console.log('再次打印尺码是：', size)
})

publisher.trigger("红色", 44)
publisher.trigger("黑色", 42)

打印结果如下：

颜色是： 红色
尺码是： 44
再次打印颜色是： 红色
再次打印尺码是： 44
颜色是： 黑色
尺码是： 42
再次打印颜色是： 黑色
再次打印尺码是： 42

我们看到订阅者接受到发布者的每个消息，但是呢，对于小红来说，她只想接受颜色为红色的消息，不想接收颜色为黑色的消息，为此我们需要对代码进行如下改造，我们可以先增加一个 key，使订阅者只订阅自己感兴趣的消息。

// 定义发布者
let publisher = {}
// 缓存列表，存放订阅者回调函数
publisher.list = []

// 增加订阅者
publisher.listen = function (key, fn) {
    // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
    if (!this.list[key]) {
        this.list[key] = []
    }
    // 将订阅消息添加到缓存列表
    this.list[key].push(fn)
}

// 发布消息
publisher.trigger = function () {
    // 取出消息类型的名称
    let key = Array.prototype.shift.call(arguments)
    // 取出该消息对应的回调函数的集合
    let fns = this.list[key]

    // 如果没有订阅过该消息的话，则返回
    if (!fns || fns.length === 0) {
        return
    }
    for (let i = 0, fn; fn = fns[i++];) {
        // arguments 是发布消息时附送的参数
        fn.apply(this, arguments)
    }
}


// 小红订阅如下消息
publisher.listen('red', function (size) {
    console.log('尺码是：', size)
})

// 小华订阅如下消息
publisher.listen('black', function (size) {
    console.log('再次打印尺码是：', size)
})

publisher.trigger("red", 44)
publisher.trigger("black", 42)

打印结果如下：

尺码是： 44
再次打印尺码是： 42

可以看到，订阅者只订阅自己感兴趣的消息了。

发布-订阅模式的代码封装

我们知道，对于上面的代码，小红去买鞋对 publisher 进行订阅，但是如果以后我们需要对买房子或者其他的对象进行订阅呢，我们需要复制上面的代码，再重新改下里面的对象代码，为此我们需要进行代码封装：

const event = {
    list: [],
    listen: function (key, fn) {
        if (!this.list[key]) {
            this.list[key] = []
        }
        this.list[key].push(fn)
    },
    trigger: function () {
        let key = Array.prototype.shift.call(arguments)
        let fns = this.list[key]
        if (!fns || fns.length === 0) {
            return
        }
        for (let i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    }
}

我们再定义一个 initEvent 函数，这个函数使所有的普通对象都具有发布订阅功能，如下代码：

const initEvent = function (obj) {
    for (let i in event) {
        obj[i] = event[i]
    }
}

我们再来测试下，我们还是给 publisher 这个对象添加发布-订阅功能：

let publisher = {}
initEvent(publisher)

//  小红订阅如下消息
publisher.listen('red', function (size) {
    console.log('尺码是：', size)
})

// 小华订阅如下消息
publisher.listen('black', function (size) {
    console.log('再次打印尺码是：', size)
})

publisher.trigger('red', 44)
publisher.trigger('black', 42)

打印结果如下：

尺码是： 44
再次打印尺码是： 42

如何取消订阅事件？

比如上面的栗子，小红她突然不想买鞋子了，那么对于卖家的店铺他不想再接受该店铺的消息，那么小红怎么取消该店铺的订阅呢？

event.remove = function (key, fn) {
    let fns = this.list[key]
    // 如果 key 对应的消息没有订阅过的话，则返回
    if (!fns) {
        return false
    }

    // 如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
    if (!fn) {
        fns.length = 0
    } else {
        for (let i = fns.length - 1; i >= 0; i--) {
            let _fn = fns[i]
            if (_fn === fn) {
                // 删除订阅者的回调函数
                fns.splice(i, 1)
            }
        }
    }
}

测试代码如下：

publisher.listen('red', f1 = function (size) {
    console.log('尺码是：', size)
})

publisher.listen('red', f2 = function (size) {
    console.log('再次打印尺码是：', size)
})

publisher.remove('red', f1)

publisher.trigger('red', 42)

打印结果如下：

再次打印尺码是： 42

全局-发布订阅对象代码封装

我们再来看看我们传统的 ajax 请吧，比如我们传统的 ajax 请求，请求成功后需要做如下事情：

  1. 渲染数据；
  2. 使用数据来做一个动画

那么我们以前肯定是如下写代码：

$.ajax('http://127.0.0.1/index', function (data) {
    renderData(data) // 渲染数据
    doAnimate(data) // 实现动画
})

假如以后还需要做点事情的话，我们还需要在里面写调用的方法，这样代码就耦合度很高，那么我们现在使用发布-订阅模式来看如何重构上面的业务需求代码：

$.ajax('http://127.0.0.1/index', function (data) {
    // 发布请求成功的消息
    Obj.trigger('success', data)
})

// 下面我们来订阅此消息，比如我现在订阅渲染数据这个消息
Obj.listen('success', function (data) {
    renderData(data)
})

// 订阅动画这个消息
Obj.listen('success', function (data) {
    doAnimate(data)
})

为此，我们可以封装一个全局发布-订阅模式对象，如下代码：

const Event = (function () {
    let list = {}

    let listen = function (key, fn) {
        if (!list[key]) {
            list[key] = []
        }
        list[key].push(fn)
    }

    let trigger = function () {
        let key = Array.prototype.shift.call(arguments)
        let fns = list[key]

        if (!fns || fns.length === 0) {
            return false
        }

        for (let i = 0, fn; fn = fns[i++]) {
            fn.apply(this, arguments)
        }
    }

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

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

测试代码如下：

Event.listen('color', function (size) {
    console.log('尺码为：', size)
})

Event.trigger('color', 42)

理解模块间通信

我们使用上面封装的全局的发布-订阅对象来实现两个模块之间的通信问题；比如现在有一个页面有一个按钮，每次点击此按钮后，div 中会显示此按钮被点击的总次数，如下代码：

<button id="count">点击我</button>
<div id="showCount"></div>

我们中的 a.js 负责处理点击操作及发布消息，如下 js 代码：

let a = (function () {
    let count = 0
    let button = document.getElementById('count')
    button.onclick = function () {
        Event.trigger('add', count++)
    }
})()

b.js 负责监听 add 这个消息，并把点击的总次数显示到页面上来，如下代码：

let b = (function () {
    let div = document.getElementById('showCount')
    Event.listen('add', function (count) {
        div.innerHTML = count
    })
})()

下面是 html 的代码，js 做如下运用即可：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="count">点击我</button>
    <div id="showCount"></div>
    <script>
        window.Event = (function () {
            let list = {}

            let listen = function (key, fn) {
                if (!list[key]) {
                    list[key] = []
                }
                list[key].push(fn)
            }

            let trigger = function () {
                let key = Array.prototype.shift.call(arguments)
                let fns = list[key]

                if (!fns || fns.length === 0) {
                    return false
                }

                for (let i = 0, fn; fn = fns[i++];) {
                    fn.apply(this, arguments)
                }
            }

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

            return {
                listen,
                trigger,
                remove
            }
        })()
    </script>

    <script src="a.js"></script>
    <script src="b.js"></script>
</body>

</html>

如上代码，当点击一次按钮后，showcount 的 div 就会自动 +1 ,如上演示的就是两个模块之间如何使用发布-订阅模式来实现通信。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,546评论 6赞 507
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,224评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,911评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,737评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,753评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,598评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,338评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,249评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,696评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,731评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,348评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2赞 355