【十月打卡】第72天 前端常用的7种设计模式(8)
2022/10/29 4:24:56
本文主要是介绍【十月打卡】第72天 前端常用的7种设计模式(8),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
发布订阅模式
什么是发布订阅模式?
发布订阅模式不属于23种设计模式,是从观察者模式中衍生出来的一种设计模式,由三部分组成:发布者,订阅者,还有中间的调度中心。
观察者模式和发布订阅模式的区别
观察者模式由两部分组成:主体和观察者们,是1对多的关系
发布订阅模式由三部分组成:发布者,订阅者,还有中间的调度中心。
观察者模式的缺点是:
- 主体和观察者直接引用,相互之间会产生依赖
- 观察者只能被动接收消息,无法主动触发
- 只要主体有消息就会告知所有的观察者,无法根据条件筛选观察者
由此衍生出来的发布订阅模式,在两者中间增加了一个Event调度中心,来解决观察者上面的问题
- 发布者和订阅者相互独立,没有依赖
- 可以通过调度中心进行有筛选性的通知
- 可以跨组件,跨页面间通信
- 可以主动触发Event
发布订阅的应用场景
- 自定义事件
- iframe之间的通信
- WebSocket
自定义事件
import mitt from 'mitt'; const event = mitt(); event.on('test', () => { console.log('测试1'); }); event.on('test', () => { console.log('测试2'); }); event.on('test', () => { console.log('测试3'); }); event.emit('test');
iframe跨页面通信
parent.html
<body> <div id="parent">父容器</div> <iframe id="frame" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./child.html"></iframe> </body> <script> // 父容器向子容器发送数据 const iframe = document.getElementById('frame').contentWindow; document.getElementById('parent').addEventListener('click', function(){ iframe.postMessage('我是父容器', '*') }) // 监听子容器发送过来的数据 window.addEventListener('message', function(event){ console.log(event.data) }) </script>
child.html
<body> <div id="child">子容器</div> </body> <script> // 子容器向父容器发送数据 document.getElementById('child').addEventListener('click', function(){ window.parent.postMessage('我是子容器', '*') }) // 监听父容器发送过来的数据 window.addEventListener('message', function(event){ console.log(event.data) }) </script>
这篇关于【十月打卡】第72天 前端常用的7种设计模式(8)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享