前端设计模式——发布订阅模式

墨生

JavaScript中的发布/订阅模式（Pub/Sub）是一种常用的设计模式。它允许在应用程序中定义对象之间的一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都会被通知和更新。
在发布/订阅模式中，有两种类型的对象：发布者和订阅者。发布者是事件的发出者，它通常维护一个事件列表，并且可以向列表中添加或删除事件。当某个事件发生时，它会将这个事件通知给所有订阅者。订阅者则是事件的接收者，它们订阅感兴趣的事件，并且在事件发生时接收通知。。
发布订阅模式可以帮助我们实现松耦合的设计，让对象之间的依赖关系变得更加灵活。它在前端开发中的应用非常广泛，例如 Vue.js 中的事件总线、Redux 中的 store 等。
以下是一个简单的实现发布/订阅模式的示例代码：

1. // 定义一个发布者对象
2. var publisher = {
3.   // 定义一个事件列表
4.   events: {},
6.   // 添加事件到列表中
7.   addEvent: function(event, callback) {
8.     if (!this.events[event]) {
9.       this.events[event] = [];
10.     }
11.     this.events[event].push(callback);
12.   },
14.   // 从事件列表中删除事件
15.   removeEvent: function(event, callback) {
16.     if (this.events[event]) {
17.       for (var i = 0; i < this.events[event].length; i++) {
18.         if (this.events[event][i] === callback) {
19.           this.events[event].splice(i, 1);
20.           break;
21.         }
22.       }
23.     }
24.   },
26.   // 发布事件
27.   publishEvent: function(event, data) {
28.     if (this.events[event]) {
29.       for (var i = 0; i < this.events[event].length; i++) {
30.         this.events[event][i](data);
31.       }
32.     }
33.   }
34. };
36. // 定义一个订阅者对象
37. var subscriber = {
38.   // 处理事件的回调函数
39.   handleEvent: function(data) {
40.     console.log(data);
41.   }
42. };
44. // 订阅一个事件
45. publisher.addEvent('event1', subscriber.handleEvent);
47. // 发布一个事件
48. publisher.publishEvent('event1', 'Hello, world!');
50. // 取消订阅一个事件
51. publisher.removeEvent('event1', subscriber.handleEvent);

复制代码

 
在这个例子中，发布者对象维护了一个事件列表（events），并且提供了添加、删除和发布事件的方法。订阅者对象则提供了一个处理事件的回调函数（handleEvent），它可以被添加到发布者对象的事件列表中。当发布者发布一个事件时，所有订阅了这个事件的订阅者都会收到通知，并执行相应的处理函数。

来源:https://www.cnblogs.com/ronaldo9ph/p/17190986.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！