方君の小窝 方君の小窝
首页
  • 原生js总结
  • 样式相关
  • vue
  • 其他必备知识
  • php
其他
GitHub

方君

迷糊小前端
首页
  • 原生js总结
  • 样式相关
  • vue
  • 其他必备知识
  • php
其他
GitHub
  • 原生js总结

    • js基础
    • ajax
    • 跨域,js同步异步
    • promise(待扩展,微队列及all,race案例)
    • 原型、原型链、继承
    • 闭包
    • 设计模式-单例、观察者
      • 单例模式Single mode
      • 观察者模式(订阅发布者模式)
    • jquery
    • json格式
    • class
    • 模块化
    • cookie
  • 样式相关

  • vue

  • 其他必备知识

  • 前端
  • 原生js总结
方君
2020-08-24

设计模式-单例、观察者

# 设计模式

代码设计经验总结(一般问题的解决方案)

这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

分类:

  1. 创建型

    创建对象的方式

  2. 结构型

    关注类与对象的组合,继承用来使组合对象获得新功能

  3. 行为型

    对象间的通信

# 单例模式Single mode

一个构造函数只实例化出一个实例对象。

function Singlemode(){
    if(Singlemode.key!=undefined)   //2当本构造函数的属性key有值时
    {
        return Singlemode.key;      //3返回绑定在本构造函数属性key中的实例
    }
    this.name="abc";
    Singlemode.key=this;            //1创造一个构造函数本身的属性key,存入这个构造函数实例化出的一个实例
}
var a=new Singlemode();
var b=new Singlemode();
console.log(a===b);
1
2
3
4
5
6
7
8
9
10
11

应用场景:只能运行一个情况下。(弹窗)

# 观察者模式(订阅发布者模式)

  1. 观察者(订阅者)
  2. 发布者

一对多的发布模式

var publish = {
    readerList:[], //订阅者名单
    sub:function(reader){//订阅功能
        this.readerList.push(reader);
    },
    unsub:function(reader){//退订功能
        var index=this.readerList.indexOf(reader);
        this.readerList.splice(index,1); //splice(位置,删除个数,增加内容)
         /*this.fensiList.forEach(function(element,index){
            if(element.name==qfensi)
            {
              console.log(zhubo.fensiList);
              zhubo.fensiList.splice(index,1);
            }
            
          })*/
    },
    pub:function(msg){      //发布功能
        this.readerList.forEach(function(reader){
            reader.response(msg);
        })
    }
}


function CreateReader(name)   //订阅者构造器
{
    this.name=name;
}

CreateReader.prototype.response=function(msg){      //利用原型  接受信息
    console.log(this.name+"收到信息"+msg);
}


var dongfang=new CreateReader("dongfang");     //实例化订阅者实例

publish.sub(dongfang);             //订阅者订阅
publish.pub("我是宝强,我绿了");            //发布者发布

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
编辑
#基础
闭包
jquery

← 闭包 jquery →

最近更新
01
vue自定义指令&生命周期
08-24
02
ajax
08-24
03
promise
08-24
更多文章>
Theme by Vdoing | Copyright © 2019-2020
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式