Bootstrap

前端设计模式

1 工厂模式

class Axios {}
class A {
  create() {
    return new Axios()
  }
}

const axios = new A();
export default axios

通过axios.create()创建实例

const httpRequest1 = axios.create();
const httpRequest2 = axios.create();
const httpRequest3 = axios.create();
const httpRequest4 = axios.create();

2 单例模式

封装一个类(里面有属性、方法;将实例暴露出去)
其他文件只用这一个类;
这就是单例模式

3 策略模式

根据不同策略做不同的事(对修改关闭)

const doSomethingMap = {
  20: () => { },// doSomething,
  30: () => { },// doSomething,
  40: () => { },// doSomething,
}

const doSomething = (age) => {
  doSomething[age]?.()
}

4 适配器模式

将一种格式适配成需要的格式

const data1 = [{ age1: 20, name1: 'Jayson1' }];
const data2 = [{ age2: 20, name2: 'Jayson2' }];
const data3 = [{ age3: 20, name3: 'Jayson3' }];

const transformData1 = (data) => {
  return data.map(({ age1, name1 }) => {
    return {
      age: age1,
      name: name1,
    };
  })
};

console.log('=====>transformData1', transformData1(data1))

5 装饰器模式

将普通人变成超级人

class Man {
  say() {
    console.log('我是普通人')
  }
}

class SuperMan {
  constructor(man) {
    this.man = man;
  }

  say() {
    console.log('我是超人')
  }
}

const man = new Man();
const superMan = new SuperMan(man);

man.say(); // 我是普通人
superMan.say(); // 我是超人

6 代理模式

微前端qiankun框架有proxy代理

const handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : 7;
  }
}

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
console.log('===>p', p) // { a: 1, b: undefined }
console.log('===p里面是否有c属性', 'c' in p, p.c); // false 7

7 观察者模式

on、emmit、off;
subscribe

;