js设计模式 单例/观察者

//今天复习js设计模式里的两种:单例/观察者
//据说js有26种设计模式,全学会的人可以晋级前端高级工程师行列。

一、设计模式的概念

针对 特定问题, 给出的简洁而优化的处理方案。

二、设计模式分析

• 单例模式(单子模式/单体模式)
  该模式常用于 整个系统为了协调整体的行为,只需要一个全局对象(页面弹窗)

//首先构建父类
	 function Person() {
      this.name = 'Jack'
    }
    
//其次新建变量用来判断该对象是否已经被创建过
	var instance = null
	 
//在构建函数内判断instance
  function singleton() {
      if (instance === null) {
        instance = new Person()//不存在就实例化对象
      }
      return instance//存在就返回instance
    }

• 观察者模式(发布/订阅模式)
  //观察者模式需要两个参与者 即 发布者和订阅者

  发布者需要实现的的功能 :
  – 添加订阅者
  – 删除订阅者
  – 设置消息
  – 发布消息(消息是一个私有属性，订阅者只能被动等待接收)

  订阅者需要实现的功能 :
  –被动接受消息

// 发布者
    class Publisher{
        constructor(){
            // 订阅者名单
            this.observers = [];
            // 准备发布的消息，私有属性，外部不能直接访问
            this.info = '';
        }
        // 设置消息
        setInfo(val){
            this.info = val;
            return this;
        }
        // 获取消息
        getInfo(){
            return this.info;
        }
        // 添加订阅者
        addObserver(obr){
            // 默认状态：允许添加
            let flag = true;
            // 遍历观察者名单
            for( let key in this.observers ){
                // 当以前的订阅者名单中已经有了当前对象
                if(obr === this.observers[key]){
                    // 设置状态不允许添加
                    flag = false;
                }
            }
            // 当状态为true才会被添加
            if( flag ){
                this.observers.push(obr);
            }
            // 返回发布者
            return this
        }
        // 删除订阅者
        removeObserver(obr){
            for( let index in this.observers ){
                // 找出订阅者名单中的对象，删除
                if(this.observers[index] === obr){
                    this.observers.splice(index,1);
                }
            }
            // 返回发布者
            return this
        }

        // 发布消息
        publish(){
            // 遍历订阅者
            for( let obr of this.observers ){
                obr.updateInfo(this.getInfo());
            }
        }
    }

    // 订阅者
    class Observer{
        constructor(name){
            this.name = name;
        }
        // 被动接收消息。(更新消息)
        updateInfo(info){
            console.log(`我是${this.name}，我现在接收的消息是：${info}`);
        }
    }

以上代码为观察者的两个参与者的功能实现,下面将尝试调用两个参与者

  // 创建订阅者
    var ob1 = new Observer('tom');
    var ob2 = new Observer('jack');
    var ob3 = new Observer('alice');
    // 创建发布者
    var p = new Publisher();
    // 添加订阅者
    p.addObserver(ob1);
    p.addObserver(ob2);
    p.addObserver(ob3);

    // 设置一条消息并发布
    p.setInfo('这是第一条消息，发布者开张啦！！！').publish();
    // 设置一条消息，但未发布
    p.setInfo('第二条消息：大家以后想要看独家报道请冲会员啦！！！');