【10】其它模式

职责链模式

就是一步操作可能分 n 个职责角色来完成，把这些角色分开，用链串起来。这样就将请求者、处理者和多个处理者分离开。

链式操作【最常用的职责链场景】

$('div')
  .show()
  .css('color', 'red')
  .append(<div>hi</div>);

Promise 链式操作

策略模式

主要是解决多个 if...else 或者 switch...case 的问题

// 通常情况
class User {
  private type: string;
  constructor(type: string) {
    this.type = type;
  }
  buy() {
    const { type } = this;
    if (type === 'A') {
      console.log('A类会员购买');
    }
    if (type === 'B') {
      console.log('B类会员购买');
    }
    if (type === 'C') {
      console.log('C类会员购买');
    }
  }
}

const u1 = new User('A');
u1.buy();
const u2 = new User('B');
u2.buy();
const u3 = new User('C');
u3.buy();

// 使用策略模式
interface User {
  buy(): void;
}

class A implements User {
  buy() {
    console.log('A类会员购买');
  }
}

class B implements User {
  buy() {
    console.log('B类会员购买');
  }
}

class C implements User {
  buy() {
    console.log('C类会员购买');
  }
}

const u1 = new A();
u1.buy();
const u2 = new B();
u2.buy();
const u3 = new C();
u3.buy();

适配器模式

最常见的场景就是，接口不符合前端的规范，需要写个适配方法。

react uesmemo

zh-hans.reactjs.org/docs/hooks-…

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

MVC 和 MVVM

MVC 原理

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

MVVM - 直接拿 vue 举例

• View 即 vue template
• Model 即 vue data
• VM 即 vue 的其他核心功能，负责 View 和 Model 通讯