关注前端 | 前端博客
当前位置: JavaScript > JavaScript设计模式之订阅发布者模式

JavaScript设计模式之订阅发布者模式

2018-07-15 分类:JavaScript 作者:管理员 阅读(143)

订阅发布者概念:

定义对象间的一种一对多的依赖关系,以便当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动刷新,也被称为是订阅发布者模式,它需要一种高级的抽象策略,以便订阅者能够彼此独立地发生改变,而发行方能够接受任何有消费意向的订阅者。

应用场景:

博客园里面有一个订阅的按钮,比如小A,小B,小C都订阅了我的博客,当我的博客一有更新时,就会统一发布邮件给他们这三个人,就会通知这些订阅者

发布订阅模式的流程如下:

1. 确定谁是发布者(比如我的博客)。

2. 然后给发布者添加一个缓存列表,用于存放回调函数来通知订阅者。

3. 发布消息,发布者需要遍历这个缓存列表,依次触发里面存放的订阅者回调函数。

4. 退订(比如不想再接收到这些订阅的信息了,就可以取消掉)

JS代码实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
var pubsub = {};   // 定义发布者  
 
(function (q) {  
 
    var list = [],  //回调函数存放的数组,也就是记录有多少人订阅了我们东西  
        subUid = -1;  
 
    // 发布消息,遍历订阅者  
    q.publish = function (type, content) {  
        // type 为文章类型,content为文章内容  
         
        // 如果没有人订阅,直接返回  
        if (!list[type]) {  
 
            return false;  
        }  
 
        setTimeout(function () {  
            var subscribers = list[type],  
                len = subscribers ? subscribers.length : 0;  
 
            while (len--) {  
                // 将内容注入到订阅者那里  
                subscribers[len].func(type, content);  
            }  
        }, 0);  
 
        return true;  
 
    };  
    //订阅方法,由订阅者来执行  
    q.subscribe = function (type, func) {  
        // 如果之前没有订阅过  
        if (!list[type]) {  
            list[type] = [];  
        }  
 
        // token相当于订阅者的id,这样的话如果退订,我们就可以针对它来知道是谁退订了。  
        var token = (++subUid).toString();  
        // 每订阅一个,就把它存入到我们的数组中去  
        list[type].push({  
            token: token,  
            func: func  
        });  
        return token;  
    };  
    //退订方法  
    q.unsubscribe = function (token) {  
        for (var m in list) {  
            if (list[m]) {  
                for (var i = 0, j = list[m].length; i < j; i++) {  
                    if (list[m][i].token === token) {  
                        list[m].splice(i, 1);  
                        return token;  
                    }  
                }  
            }  
        }  
        return false;  
    };  
 
} (pubsub));  
 
//将订阅赋值给一个变量,以便退订  
var girlA = pubsub.subscribe('js类的文章', function (type, content) {  
    console.log('girlA订阅的'+type + ": 内容内容为:" + content);  
});  
var girlB = pubsub.subscribe('js类的文章', function (type, content) {  
    console.log('girlB订阅的'+type + ": 内容内容为:" + content);  
});  
var girlC = pubsub.subscribe('js类的文章', function (type, content) {  
    console.log('girlC订阅的'+type + ": 内容内容为:" + content);  
});  
 
//发布通知  
pubsub.publish('js类的文章', '关于js的内容');    
// 输出:  
// girlC订阅的js类的文章: 内容内容为:关于js的内容  
// test3.html:78 girlB订阅的js类的文章: 内容内容为:关于js的内容  
// test3.html:75 girlA订阅的js类的文章: 内容内容为:关于js的内容  
 
 
//girlA退订了关于js类的文章  
setTimeout(function () {  
    pubsub.unsubscribe(girlA);  
}, 0);  
 
//再发布一次,验证一下是否还能够输出信息  
pubsub.publish('js类的文章', "关于js的第二篇文章");  
// 输出:  
// girlB订阅的js类的文章: 内容内容为:关于js的第二篇文章  
// girlC订阅的js类的文章: 内容内容为:关于js的第二篇文章

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - JavaScript设计模式之订阅发布者模式

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线