美文网首页
Javascript 发布-订阅模式

Javascript 发布-订阅模式

作者: 学习之道无异于百姓日用 | 来源:发表于2020-06-22 21:27 被阅读0次

    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 ,如上演示的就是两个模块之间如何使用发布-订阅模式来实现通信。

    相关文章

      网友评论

          本文标题：Javascript 发布-订阅模式

          本文链接：https://www.haomeiwen.com/subject/hxnffktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Javascript 发布-订阅模式|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！