关于设计模式:JavaScript发布订阅模式与观察者模式

32次阅读

共计 5260 个字符，预计需要花费 14 分钟才能阅读完成。

公布 - 订阅模式与观察者模式

  • 公布 - 订阅模式与观察者模式
  • 1. 什么是公布 - 订阅模式

  • 2. 举例

    • 1. 创立一个公布 - 订阅管理器
    • 2. 页面
    • 3. 业务代码
  • 3. 公布 - 订阅模式与观察者模式有什么区别
  • 参考文献
  • 源码查看

1. 什么是公布 - 订阅模式

公布订阅模式罕用于异步编程，在浏览器中，咱们调用 document.body.addEventListener('click', function(){}) 就是一种这种模式的实现，这段代码是在订阅一个 body 上的点击事件，当用户点击 body 后，dom 就会公布一个类型为 click 的音讯，并且执行咱们注册的回调事件，这时咱们就能监听到用户点击行为了。

举一个企业招聘的例子，X 公司的 HR 在智联在智联招聘网站上公布一条招聘前端工程师的信息，当你登陆该网站后订阅前端招聘告诉，只有有企业公布起那段招聘信息，你都会收到音讯。

那么，你的订阅行为就是subscribe,HR 公布音讯行为就是publish, 网站就是一个音讯中介，负责将 HR 公布的信息发送到每个订阅人的手机上。

咱们总结一下订阅模式三要素

  • 1. 订阅者 -subscriber
  • 2. 公布音讯者 -publisher
  • 3. 中介公司

2. 举例

上面咱们举一个购物网站的例子，设计一个页面，蕴含告诉栏 / 购物栏 / 订单列表三个局部

当购买意见商品后，刷新告诉栏和订单列表。

在这个例子中，触发按钮 购买 公布一条音讯将商品数量增加到订单中，订阅者在收到新商品后刷新告诉栏和订单列表.

1. 创立一个公布 - 订阅管理器

蕴含三个办法

  • 1.create(): 创立实例
  • 2.publish(): 公布一条音讯
  • 3.subscribe(): 订阅音讯
/**
 * 创立订阅 - 公布模式实例
 * create()办法创立出的实例是单例模式，每个命名空间都有一个独立的单例对象。*/
const PSManager = (function () {var namespacesCache = {}
    var listenerMap = new Map();// key 为音讯类型
    /**
     * 公布音讯
     * @param {string} type   音讯类型
     * @param  {...any} args 音讯内容
     */
    var publish = function(type, ...args){if (listenerMap.get(type)) {var listeners = listenerMap.get(type);
            listeners.forEach(callback => {// 订阅池里的所有事件全副触发
                callback && callback.apply(null, args)
            });
        }
    }
    /**
     * 订阅音讯
     * @param {string} type     音讯类型
     * @param {*} callback      收到音讯后执行回调函数
     */
    var subscribe = function(type, callback){if (listenerMap.get(type)) {var listeners = listenerMap.get(type);
            listeners.push(callback)// 增加新的订阅
        } else {listenerMap.set(type, [callback])
        }
    }
    /**
     * 创立一个公布 - 订阅模式的实例
     * @param {*} namespace     命名空间，解决多个模块调用呈现抵触, 不传默认 '_default'
     * @returns 实例
     */
    var create = function(namespace = '_default'){return namespacesCache[namespace] ? namespacesCache[namespace] : {publish, subscribe}
    }
    return {publish, subscribe, create}
})()

2. 页面

<!DOCTYPE html>
<html>
<style>
    button {margin-right: 16px;}
    div {margin-bottom: 20px;}
</style>
<head>
    <meta charset="utf-8">
    <title> 公布 - 订阅模式 </title>
</head>
<body>
    <div>
        <span> 商品数：0</span>
        <span style="margin-left: 16px;"> 您刚购买了 0 个手机 </span>
    </div>
    <div>
        <span> 手机 8000 元 / 部 </span> <button> 购买 </button>
        <span> 玩具 200 元 / 个 </span> <button> 购买 </button> 
        <span> 鞋子 400 元 / 双 </span> <button> 购买 </button> 
    </div>
    <ul>
        <li> 手机 0 部，总计 0 元 </li>
        <li> 玩具 0 个，总计 0 元 </li>
        <li> 鞋子 0 双，总计 0 元 </li>
    </ul>
</body>
<script src="./index.js"></script>
</html>

3. 业务代码

// 状态管理器，存储商品数量、单价，总生产价格等信息
var State = function(){
    var state = {phone: [8000,0,0], toy: [200,0,0], shoes: [400,0,0]
    }
    return {add:function(key,count){// 增加一个商品
            state[key] === undefined ? state[key][1] = 0 : state[key][1] += count;
            return this;
        },
        getCount: function(key){// 某类商品数量
            return state[key] === undefined ? 0 : state[key][1]
        },
        getPrice: function(key){// 商品总价 = 数量 * 单价
            return state[key] === undefined ? 0 : state[key][1] * state[key][0];
        },
        sum: function(){// 总商品数
            return Object.keys(state).reduce((ret, key) => ret += state[key][1], 0);
        },
        getTip: function(key){// 提醒语
            switch(key){
                case 'phone':
                    return [` 手机 ${this.getCount(key)}部，总计 ${this.getPrice(key)}元 `, '您刚购买了 1 部手机'];
                case 'toy':
                    return [` 玩具 ${this.getCount(key)}个，总计 ${this.getPrice(key)}元 `, '您刚购买了 1 个玩具']
                case 'shoes':
                    return [` 鞋子 ${this.getCount(key)}双，总计 ${this.getPrice(key)}元 `, '您刚购买了 1 双鞋子']
                default:
                    return [];}
        }
    }
}()
// 具体业务代码
window.onload = function () {var btns = document.getElementsByTagName('button')
    var spans = document.getElementsByTagName('span')
    var lies = document.getElementsByTagName('li')
    // 公布音讯
    btns[0].onclick = function () {// 购买手机
        PSManager.create('order_list').publish('phone',1)
    }
    btns[1].onclick = function () {// 购买玩具
        PSManager.create('order_list').publish('toy',1)
    }
    btns[2].onclick = function () {// 购买鞋子
        PSManager.create('order_list').publish('shoes',1)
    }
    // 订阅音讯
    PSManager.create('order_list').subscribe('phone',function(count){lies[0].innerText = State.add('phone', count).getTip('phone')[0];// 刷新告诉栏
        spans[0].innerText = ` 总商品数：${State.sum()}`;// 刷新告诉栏
        spans[1].innerText = State.getTip('phone')[1]// 刷新订单列表
    })
    PSManager.create('order_list').subscribe('toy',function(count){lies[1].innerText = State.add('toy', count).getTip('toy')[0];
        spans[0].innerText = ` 总商品数：${State.sum()}`;
        spans[1].innerText = State.getTip('toy')[1]
    })
    PSManager.create('order_list').subscribe('shoes',function(count){lies[2].innerText = State.add('shoes', count).getTip('shoes')[0];
        spans[0].innerText = ` 总商品数：${State.sum()}`;
        spans[1].innerText = State.getTip('shoes')[1]
    })
}

3. 公布 - 订阅模式与观察者模式有什么区别

咱们把下面的 发布者 （publisher）改为 主题 （Subject）, 订阅者 (Subsriber) 改为察看着者 Observer 就能够变为观察者模式了。

// 主题
var Subject = (function () {var namespacesCache = {};// 命名空间
    var observerMap = new Map();// 观察者汇合
    var registObserver = function (type, func) {observerMap.get(type) ? observerMap.get(type).push(func) : observerMap.set(type, [func])
    }
    /**
     * 勾销观察者
     * @param {string} type 
     * @param {Function} func 观察者
     */
    var removeObserver = function (type, func) {if (removeObserver.get(type)) {removeObserver.get(type) = removeObserver.get(type).filter(fn => fn !== func)
        } 
    }
    /**
     * 告诉观察者
     * @param {string} type 
     */
    var notifyObservers = function (type, ...args) {if (observerMap.get(type)) {Array.prototype.forEach.apply(observerMap.get(type), [function(callback,i,ary){callback && callback.apply(null,args);// 执行回调
            }])
        }
    }
    /**
     * 创立主题
     * @param {string} namespace 
     * @returns 
     */
    var create = function(namespace = '_default'){return namespacesCache[namespace] ? namespacesCache[namespace] : namespacesCache[namespace] = {registObserver, removeObserver,notifyObservers}
    }
    return {create}

})()

调用形式与公布 - 订阅模式一样

    btns[0].onclick = function () {// 购买手机
        Subject.create('order_list').notifyObservers('phone',1)
    }
    Subject.create('order_list').registObserver('toy',function(count){lies[1].innerText = State.add('toy', count).getTip('toy')[0];
        spans[0].innerText = ` 总商品数：${State.sum()}`;
        spans[1].innerText = State.getTip('toy')[1]
    })

因而我认为 观察者模式 === 公布 - 订阅模式，

如果非要说出他们之间的区别，我认为公布 - 订阅模式比观察者模式解耦能力更强。

参考文献

  • JavaScript 设计模式与开发实际. 曾探. [D]
  • Head First 设计模式. Freeman. [D]

源码查看

  • 代码实现都放在了 github 上

正文完
javascript
发表至： javascript
2021-03-22
 0
在iOS设备下，h5的input框失焦后页面被顶起来一部分bug解决
npm-stop-全方位解读
关于javascript:浏览器-DOM-元素的事件代理指的是什么
理解 JavaScript this