设计模式

44 阅读1分钟

1.单例模式

保证一个类仅有一个实例,并提供一个访问它的全局访问点。

class CreatedPerson {
  constructor(name) {
    this.name = name
  }
}

let singltInstance = (function() {
  let instance = null
  return function(name) {
    if (!instance) {
      instance = new CreatedPerson(name)
    }
    return instance
  }
})()

let p1 = singltInstance('小明1')
let p2 = singltInstance('小明2')
console.log(p1, p2); // CreatedPerson { name: '小明' } CreatedPerson { name: '小明' }
console.log(p1 === p2); // true

var getSingle = function( fn ){
  var result;
  return function(){
    return result || (result = fn.apply(this, arguments));
  }
}; 
 
var createLoginLayer = function(){
  var div = '我是登录浮窗'
  return div;
}; 
 
 var createSingleLoginLayer = getSingle( createLoginLayer );
 var createSingleLoginLayer2 = getSingle( createLoginLayer );
 console.log(createSingleLoginLayer() === createSingleLoginLayer2()); // true

2. 发布订阅模式

我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信 号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执 行。这就叫做"发布/订阅模式"(publish-subscribe pattern)

image.png
class EventEmitter {
  constructor () {
    this.subs = {}
  }
  // 订阅通知
  $on (eventType, handler) {
    this.subs[eventType] = this.subs[eventType] || []
    this.subs[eventType].push(handler)
  }
  // 发布通知
  $emit (eventType) {
    if (this.subs[eventType]) {
      this.subs[eventType].forEach(handler => {
        handler()
      });
    }
  }
}
const em = new EventEmitter()
em.$on('click', () => {
  console.log('click1');
})
em.$on('click', () => {
  console.log('click2');
})
em.$emit('click')