浅谈前端常用设计模式（单例模式）

单例模式

const SinglePerson = (function () {
  let instance = null;

  class Person {
    constructor({ name, age }) {
      this.name = name;
      this.age = age;

      // 设置默认回调函数
      this.callback = () => {};
      // 设置事件监听
      this.setEvent();
    }

    setEvent() {
      window.addEventListener("click", e => {
        this.callback(e);
      });
    }
  }

  return function (options, callback) {
    if (!instance) {
      instance = new Person(options);
    }

    instance.callback = callback;

    return instance;
  };
})();

const p1 = SinglePerson(
  {
    name: "张三",
    age: 25,
  },
  res => {
    console.log("p1", res);
  }
);
const p2 = SinglePerson({}, res => {
  console.log("p2", res);
});

console.log(p1);
// Person { name: '张三', age: 25 }
console.log(p2);
// Person { name: '张三', age: 25 }
console.log(p1 === p2);
// true

观察者模式

// 观察者构造函数
class Observer {
  constructor(name, fn = () => {}) {
    this.name = name;
    this.fn = fn;
  }
}

// 被观察者构造函数
class Observable {
  constructor(state) {
    // 设置默认状态
    this.state = state;
    // 观察者列表
    this.observerList = [];
  }

  // 改变自身状态
  setState(state) {
    this.state = state;
    this.observerList.forEach(item => {
      item.fn(state);
    });
  }

  // 添加观察者
  addObserver(observer) {
    // 观察者去重
    this.observerList = [...new Set([...this.observerList, observer])];
  }

  // 删除观察者
  deleteObserver(observer) {
    this.observerList = this.observerList.filter(item => item !== observer);
  }
}


// 创建观察者
const bzr = new Observer("班主任", state => {
  console.log(`又${state}, 不好好学习`);
});

const jz = new Observer("家长", state => {
  console.log(`又${state}, 你看看别人家的那XX学习多好`);
});

const njzr = new Observer("年级主任", state => {
  console.log(`又${state}, 你是哪个班的`);
});

// 创建被观察者
const xiaoming = new Observable("学习");

xiaoming.addObserver(bzr);
xiaoming.addObserver(jz);
xiaoming.addObserver(njzr);
xiaoming.setState("玩手机");