创立型模式

• 工厂模式
• 建造者模式

行为模式

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

工厂模式

形容： 通过不同的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.btnClicksubmitBtn.onclick = eventManager.submitClickinput.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)