js设计者模式

• 观察者模式

class Event {
  constructor () {
    this.callbacks = {}
  }
  $off (name) {
    this.callbacks[name] = null
  }
  $emit (name, args) {
    let cbs = this.callbacks[name]
    if (cbs) {
      cbs.forEach(c => {
        c.call(this, args)
      })
    }
  }
  $on (name, fn) {
    (this.callbacks[name] || (this.callbacks[name] = [])).push(fn)
  }
}

var event = new Event()
event.$on('event1', function (arg) {
  console.log(arg)
})
event.$emit('event1', { name: 'web全栈工程师' })

• 单例模式（全局只有一个实例）

document.getElementById('btn').addEventListener('click',function () {
    let layer = single(createModal)();
    layer.style.display='block';
})
function createModal () {
    var div = document.createElement('div');
    div.className='box';
    div.innerHTML='我是单例模式';
    div.style.display='none';
    document.getElementById('app').appendChild(layer)
    return div;
}
function single (fn) {
  let instance;
  return function () {
    return instance || (instance = fn.apply(this,arguments))
  }
}

• 策略模式（策略模式是指定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换）

var calculateBonus = function( performanceLevel, salary ){
    if ( performanceLevel === 'S' ){
        return salary * 4;
    }
    if ( performanceLevel === 'A' ){
        return salary * 3;
    }
    if ( performanceLevel === 'B' ){
        return salary * 2;
    }
};
calculateBonus( 'B', 20000 ); // 输出：40000
calculateBonus( 'S', 6000 ); // 输出：24000

• 中介者模式（通过一个中介者对象，其他相关对象都通过该中介者进行通信，而不是相互引用）
  vuex，redux都是中介者模式，都通过store操作
• 装饰器模式
  不改变对象本身，只是在程序运行时动态添加一些方法