javascript中的设计模式&发布订阅模式

77 阅读 0 评论 51 点赞

我是靠谱客的博主腼腆可乐，这篇文章主要介绍javascript中的设计模式&发布订阅模式，现在分享给大家，希望可以做个参考。

设计模式:

在已有js语法的基础上, 进行语法整合(设计), 形成一个固定模式(用法), 每个设计模式都是为了解决某种问题.

其他设计模式: 工厂模式, 目的是为了批量创建对象.

设计模式一: 单例模式 , 为了实现只创建一个对象.

发布订阅模式：

复制代码

//创建一个匿名函数,因为没有变量名，会报错，所以用括号将他括起来
    (function () {
        //在内部再创建一个observe函数
        function observe() {
            //创建一个订阅者函数，传递两个参数
            //第一个参数是传递的是接收的消息类型,即是谁发布的消息，是一个字符串
            //第二个参数是接受消息的函数
            //创建一个对象obj,用来接收订阅者的消息类型，以及content的回调函数
            this.obj = {
                // 'tianli':[function content(){},function content(){},...]
            }
            this.subscribe = function (message, accept) {
                //该对象(obj)用来保存消息类型以及接受消息的函数
                //先进行判断obj中的数组是否为空，为空，让他的值等于它本身，不为空，给它赋值为空
                if(this.obj[message]){
                    this.obj[message].push(accept)
                }
                else{
                    this.obj[message]=[accept]
                }
                // this.obj[message]=this.obj[message] ? this.obj[message] : []
                // //往数组中添加数据
                // this.obj[message].push(accept)
            }
            //创建一个发布者函数
            this.emit = function (message,content) {
                //将保存的消息类型进行遍历
                if(this.obj[message]){
                    this.obj[message].forEach((item)=>{
                     item(content)
                })
                }   
            }
        }
        //将这个函数暴露出来，这样我们就可以调用它;
        window.observe = observe
    })()
    //创建一个实例对象
    var o = new observe
    //订阅消息者与发布者是多对一的关系，发布者发布一条消息，可能有多个订阅者接收
    //订阅消息,可以有多个接收者
    //subscribe的第二个参数是用来接收消息内容的
    o.subscribe('天理', function (content) {
        console.log('天理:' + content);
    })
    o.subscribe('天理', function (content) {
        console.log('天理:' + content);
    })
    o.subscribe('天理', function (content) {
        console.log('天理:' + content);
    })
    o.subscribe('钟离', function (content) {
        console.log('钟离：' + content);
    })
    // console.log(o);xioan
    //发布消息
    o.emit('天理','不买桂花不喝酒')
    o.emit('钟离','天动万象，天理尝蛆！')

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
//创建一个匿名函数,因为没有变量名，会报错，所以用括号将他括起来
    (function () {
        //在内部再创建一个observe函数
        function observe() {
            //创建一个订阅者函数，传递两个参数
            //第一个参数是传递的是接收的消息类型,即是谁发布的消息，是一个字符串
            //第二个参数是接受消息的函数
            //创建一个对象obj,用来接收订阅者的消息类型，以及content的回调函数
            this.obj = {
                // 'tianli':[function content(){},function content(){},...]
            }
            this.subscribe = function (message, accept) {
                //该对象(obj)用来保存消息类型以及接受消息的函数
                //先进行判断obj中的数组是否为空，为空，让他的值等于它本身，不为空，给它赋值为空
                if(this.obj[message]){
                    this.obj[message].push(accept)
                }
                else{
                    this.obj[message]=[accept]
                }
                // this.obj[message]=this.obj[message] ? this.obj[message] : []
                // //往数组中添加数据
                // this.obj[message].push(accept)
            }
            //创建一个发布者函数
            this.emit = function (message,content) {
                //将保存的消息类型进行遍历
                if(this.obj[message]){
                    this.obj[message].forEach((item)=>{
                     item(content)
                })
                }   
            }
        }
        //将这个函数暴露出来，这样我们就可以调用它;
        window.observe = observe
    })()
    //创建一个实例对象
    var o = new observe
    //订阅消息者与发布者是多对一的关系，发布者发布一条消息，可能有多个订阅者接收
    //订阅消息,可以有多个接收者
    //subscribe的第二个参数是用来接收消息内容的
    o.subscribe('天理', function (content) {
        console.log('天理:' + content);
    })
    o.subscribe('天理', function (content) {
        console.log('天理:' + content);
    })
    o.subscribe('天理', function (content) {
        console.log('天理:' + content);
    })
    o.subscribe('钟离', function (content) {
        console.log('钟离：' + content);
    })
    // console.log(o);xioan
    //发布消息
    o.emit('天理','不买桂花不喝酒')
    o.emit('钟离','天动万象，天理尝蛆！')