Javascript 设计模式

创建型模式

• 工厂模式
• 建造者模式

行为模式

• 中介者模式
• 职责链模式
• 观察者模式

工厂模式

描述： 通过不同的type new不同的类, 只需要和工厂打交道
应用场景： 封装

// 抽象工厂模式 通过不同的type new不同的类
class Button {
    constructor(color,text) {
        this.color = color;
        this.text = text;
    }
    click(fn) {
        console.log('click')
        fn && fn()
    }
}
class PrimaryBtn extends Button { // 按钮对象
    constructor(text) {
        super('blue',text)
    }
}
class WarningBtn extends Button { // 按钮对象
    constructor(text) {
        super('yellow',text)
    }
}
class ButtonFactory {
    static types = {}
    static getButton(type,text) {
        let cls = this.types[type];
        if (cls) {
            return new cls(text)
        } else {
            return null
        }
    }
    static registerButton(type,Button) {
        this.types[type] = Button;
    }
}
 // 注册才能使用
ButtonFactory.registerButton('primary',PrimaryBtn)
ButtonFactory.registerButton('warning',WarningBtn)

// 演示
let primary = ButtonFactory.getButton('primary','搜索')
console.log(primary);

建造者模式

描述： 通过一个中介者对象控制其他的对象
应用场景： 封装DOM事件绑定

// Builder 建造者模式。根据需要创建对象的属性
class BuildHouse {
    constructor(name) {
        this.name = name
    }
    buildWindow() {
        this.window = true;
        return this;
    }
    buildBalcony() {
        this.balcony= true
        return this;
    }
}

new BuildHouse('Mike').buildWindow().buildBalcony() // 有窗户有阳台
new BuildHouse('Amy').buildWindow() // 只有窗户

中介者模式

描述： 根据需要创建对象的属性
应用场景： 创建自定义对象

let btn = document.querySelector('#btn')
let submitBtn = document.querySelector('#btnSubmit')
let input = document.querySelector('input')
let eventManager = { // 通过这个控制事件
    btnClick() { },
    inputChange() {},
    submitClick() {}
}

btn.onclick = eventManager.btnClick
submitBtn.onclick = eventManager.submitClick
input.onchange = eventManager.inputChange

职责链模式

描述： 当这个事件执行完毕接着执行下一个事件
应用场景： 改善回调地狱

// 职责链
class Chain {
    constructor() {
        this._chainItem = [];
        this._index = -1;
    }
    setNext(fn) {
        this._chainItem.push(fn);
        return this;
    }
    toNext(...args) {
      this._index++;
      if (this._index !== this._chainItem.length) {
        return this._chainItem[this._index](...args);
      }
    }
    start(...args) {
        return this.toNext(...args)
    }
  }
  // 事件-------
  // 打8折
  function discount8(array) {
    let result = array.map(item=>Math.floor(item*0.8));
    return queryChain.toNext(result);
  }
  // 加单位
  function addUnit(array) {
    let result = array.map(item=>item+'元')
    return result;
  }
  
  // 演示
  let queryChain = new Chain();
  queryChain.setNext(discount8).setNext(addUnit);  // 打完8折加价格单位
  queryChain.start([199,499,758,50]) // ["159元", "399元", "606元", "40元"]

观察者模式

描述： 每个对象都可以向观察者订阅一个事件，观察者发布一个事件把订阅该事件的所有事件运行
应用场景： 下拉框change时触发函数。可以改这个些函数订阅change事件，下拉框change时发布change事件。

// 观察者模式
class Observer {
    constructor(name='') {
      this.name = name 
      this._subscribes = {} // 保存订阅的事件
    }
    // 订阅事件
    // @param{String} event 事件名称
    // @param{Function} fn 执行的函数
    subscribe(event,fn) { 
      let subscribes = this._subscribes[event];
      if (subscribes) {
        subscribes.push(fn)
      } else {
        this._subscribes[event] = [fn]
      }
    }
    // 发布订阅事件
    // @param{String} event 事件名称
    // @param{*} args 传递给执行事件的参数
    publish(event,...args) { 
      let subscribes = this._subscribes[event] || [];
      subscribes.forEach(fn=>{
        fn(...args);
      })
    }
    // 删除订阅事件
    // @param{String}event 事件名称
    // @param{Function} fn 有名称的函数
    // @return{Function} 返回被删除的函数
    remove(event,fn) {
      let subscribes = this._subscribes[event] || []; 
      let result = null;
      subscribes.forEach((item,itemI)=>{
        if (Object.is(fn,item)) {
          result = subscribes.splice(itemI,1)
        }
      })
      return result;
    }
  }
  
// 演示
let fn1 = (param) => { console.log(param + 1)}
let fn2 = (param) => { console.log(param + 2)}
let selectObserver = new Observer('select');
selectObserver.subscribe('change', fn1)
selectObserver.subscribe('change', fn2)
selectObserver.publish('change','change')
selectObserver.remove('change',fn1)