Javascript的设计模式之从设计到模式（其他设计模式）_从设计模式切换到运行模式可通过什么来实现-CSDN博客

本文链接：https://blog.csdn.net/qq_25436827/article/details/123800853

（五）原型模式

根据已有对象，clone一个新对象
object.create()

（十）桥接模式

用于把抽象化与实现化解耦
使得二者可以独立变化
业务中使用较多

设计原则：
抽象和实现分离，解耦
开放封闭原则

（十一）组合模式

生成树形结构，表示“整体-部分”关系
让整体和部分都具有一致的操作方式

场景：文件夹、vnode、菜单

设计原则：
整体和单个节点的操作抽象出来
开放封闭原则

（十二）享元模式

共享内存（主要考虑内存，而非效率）
相同的数据，共享使用

设计原则：
将相同的部分抽象出来
开放封闭原则

（十三）策略模式

不同策略分开处理
避免出现大量 if…else 或者 swich…case

设计原则：
不同策略，分开处理，而不是混合在一起
开放封闭原则

（十四）模板方法模式

一个方法里将不相关的逻辑代码分别处理，在组合到一起
降低代码耦合度

（十七）职责连模式

一步操作可能分为多个职责角色来完成
把这些角色都分开，然后用一个链串起来
将发起者和各个处理者进行隔离

场景：链式操作

// 职责链模式（请假审批，需要组长审批、经理审批，最后总监审批）
class Action {
  constructor(leader) {
    this.leader = leader
    this.nextAction = null
  }
  setNextAction(action) {
    this.nextAction = action
  }
  handle() {
    console.log(this.leader, '审批')
    if (this.nextAction) {
      this.nextAction.handle()
    }
  }
}
const a1 = new Action('组长')
const a2 = new Action('经理')
const a3 = new Action('总监')
a1.setNextAction(a2)
a2.setNextAction(a3)
a1.handle()

设计原则：
发起者于各个处理者进行隔离
开放封闭原则

（十八）命令模式

执行命令时，发布者和执行者分开
中间加入命令对象，作为中转站

场景：网页富文本编辑器操作（document.execCommand(‘bold’)）

// 命令模式
class Receiver {
  exec() {
    console.log('执行')
  }
}
class Command {
  constructor(receiver) {
    this.receiver = receiver
  }
  cmd() {
    console.log('触发命令')
    this.receiver.exec()
  }
}
class Invoker {
  constructor(command) {
    this.command = command
  }
  invoke() {
    console.log('发布命令')
    this.command.cmd()
  }
}
const solider = new Receiver()
const trumpeter = new Command(solider)
const general = new Invoker(trumpeter)
general.invoke()

设计原则：
命令对象将发布者与执行者分开，解耦
开放封闭原则

（十九）备忘录模式

随时记录一个对象的状态变化
随时可以恢复之前的某个状态（如撤销功能）
未找到js中的经典应用，除了一些工具（如编辑器）

// 备忘录模式
// 编辑器
class Editor {
  constructor() {
    this.content = null
  }
  setContent(content) {
    this.content = content
  }
  getContent() {
    return this.content
  }
  saveContentToMemento() {
    return new Memento(this.content)
  }
  getContentFromMemento(memento) {
    this.content = memento.getContent()
  }
}

// 单个备忘内容
class Memento {
  constructor(content) {
    this.content = content
  }
  getContent() {
    return this.content
  }
}

// 备忘列表
class CareTaker {
  constructor() {
    this.list = []
  }
  add(content) {
    this.list.push(content)
  }
  get(index) {
    return this.list[index]
  }
  getLength() {
    return this.list.length
  }
}

const editor = new Editor()
const careTaker = new CareTaker()
// 下标初始化
let getIndex = function () { return 0 }
$('#save').on('click', function () {
  const val = $('#input').val()
  if (val) {
    // 将信息保存到备忘录
    editor.setContent(val)
    careTaker.add(editor.saveContentToMemento())
    $('#input').val('')
    // 获取最新下标
    getIndex = fn()
  }
})
// 撤销
$('#revoke').on('click', function () {
  setInputVal('reduce')
})
// 还原
$('#cancelRevoke').on('click', function () {
  setInputVal('add')
})

// 设置内容
function setInputVal(type) {
  const index = getIndex(type)
  const memento = careTaker.get(index)
  editor.getContentFromMemento(memento)
  $('#input').val(editor.getContent())
}

// 获取index
function fn() {
  let index = careTaker.getLength()
  return function (type) {
    const len = careTaker.getLength()
    type === 'add' ? ++index : --index
    if (index <= 0) {
      return index = 0
    } else if (index >= len) {
      return index = len - 1
    }
    return index
  }
}

设计原则：
状态对象于使用者分开，解耦
开放封闭原则

（二十一）访问者模式

将数据操作和数据结构进行分离
使用场景不多

（二十二）中介者模式

对象和对象之间的访问都是通过中介者去访问，某个对象改变，只需要修改中介者即可

// 中介者模式
class Mediator {
  constructor(a, b) {
    this.a = a
    this.b = b
  }
  setA() {
    const num = this.b.num
    this.a.setNumber(num)
  }
  setB() {
    const num = this.a.num
    this.b.setNumber(num)
  }
}
class A {
  constructor() {
    this.num = 0
  }
  setNumber(num, m) {
    this.num = num
    if (m) m.setB()
  }
}
class B {
  constructor() {
    this.num = 0
  }
  setNumber(num, m) {
    this.num = num
    if (m) m.setA()
  }
}

// 卖家
const a = new A()
// 买家
const b = new B()
const m = new Mediator(a, b)
// 卖家设置价格
a.setNumber(1000000, m)
console.log('a', a.num)
console.log('b', b.num)
// 买家砍价
b.setNumber(900000, m)
console.log('a', a.num)
console.log('b', b.num)