设计模式 ~ 职责链、策略、适配器、MVC、MVVM ~

职责链模式

• 一种行为型设计模式，它允许多个对象按照特定的顺序处理请求，直到其中一个对象能够处理该请求为止
• 一个流程，需要多个角色处理，通过 一个“链”串联起来，各个角色相互分离，互不干扰
• 如：promise.then、Jquery 的链式

---

策略模式

如果一项业务有太多的 if else 或 switch case，那么可以将每个分支单独处理，相互隔离

class User {
  constructor(type) {
    this.type = type
  }
  buy() {
    const { type } = this
    if (type === 'ordinary') {
      // ... do something
      console.log('普通用户')
    }
    if (type === 'member') {
      // ... do something
      console.log('会员用户')
    }
    if (type === 'vip') {
      // ... do something
      console.log('vip用户')
    }
  }
}

如果有太多的条件判断，而每个判断下有各自的处理方式，这样使得代码耦合性太高，将不同角色分开进行处理

interface IUser {
  buy: () => void
}

class OrdinaryUser implements IUser {
  buy() {
    console.log('普通用户')
  }
}

class MemberUser implements IUser {
  buy() {
    console.log('会员')
  }
}

class VipUser implements IUser {
  buy() {
    console.log('VIP')
  }
}

const u1 = new OrdinaryUser()
const u2 = new MemberUser()
const u3 = new VipUser()

---

适配器模式

• 我们需要一个对象，但是API返回格式不适合，我们需要通过适配器进行转换，如 vue 的计算属性

---

MVC

• View 传送指令到 Controller
• Controller 完成业务逻辑后，要求 Model 改变状态
• Model 将新的数据发送到 View，用户得到反馈

~

---

MVVM

• View 即 Vue template ~ DOM
• Model 即 Vue data
• VM 即 Vue 其他核心功能，负责 View 和 Model 通讯

View 通过事件监听等修改 Model，Model 通过指令修改 View