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