常见的六种设计模式

// 创建事件总线 EventBus
class EventBus {
	private events = new Map<string, Function[]>();
	// 订阅
	on(eventName: string, callback: Function) {
		if (!this.events.has(eventName)) this.events.set(eventName, []);
		this.events.get(eventName)!.push(callback);
	}
	// 触发
	emit(eventName: string, ...args: any[]) {
		if (this.events.has(eventName)) {
			this.events.get(eventName)?.forEach(cb => cb(...args));
		} else {
			message.error(`事件${eventName}不存在`);
		}
	}
	// 销毁
	off(eventName: string, callback?: Function) {
		if (!callback) {
			this.events.delete(eventName);
		} else {
			const result = this.events.get(eventName)!.filter(cb => cb !== callback);
			this.events.set(eventName, result);
		}
	}
}
const bus = new EventBus(); // 使用示例：全局事件总线
// 组件A订阅事件 on Event
bus.on("user-login", user => {
	console.log("用户登录，更新头部信息", user);
});
// 组件B触发事件 emit Event
bus.emit("user-login", { name: "Alice", id: 123 });

class CacheManager {
	private static instance: CacheManger;
	private cache = new Map<string, any>();
	// 禁止外部实例化 new
	private constructor() {}
	static getInstance(): CacheManager {
		if (!CacheManager.instance) {
			CacheManager.instance = new CacheManager();
		}
		return CacheManager.instance;
	}
	get(key: string): any {
		return this.cache.get(key);
	}
	set(key: string, value: any) {
		this.cache.set(key, value);
	}
}

// 使用示例：全局唯一缓存
const cache1 = CacheManager.getInstance();
const cache2 = CacheManager.getInstance();
console.log(cache1 === cache2); // true

// 定义typeScript接口
interface Animal {
	name: string;
	makeSound(): string;
}
class Dog implements Animal {
	name: string = "小狗🐶";
	makeSound(): string {
		return `我是${this.name}; 我会汪汪汪的叫`;
	}
}
class Cat implements Animal {
	name: string = "小猫🐱";
	makeSound(): string {
		return `我是${this.name}; 我会喵喵喵的叫`;
	}
}
// 抽象工厂模式
class AnimalFactory {
	static createAnimal(type: string): Animal {
		switch (type) {
			case "dog":
				return new Dog();
			case "cat":
				return new Cat();
			default:
				throw new Error("未知动物类型");
		}
	}
}

// test 测试
const dog = AnimalFactory.createAnimal("dog");
console.log(dog.makeSound()); // 我是小狗🐶; 我会汪汪汪的叫
const cat = AnimalFactory.createAnimal("cat");
console.log(cat.makeSound()); // 我是小猫🐱; 我会喵喵喵的叫

/*
const originalData = [5, 2, 8, 3, 9] // 原始数据
const context = new Context(动态策略, 原始数据); // 传入策略 && 原始数据
console.log(context.getResult()) // [2, 3, 5, 8, 9]
*/
const originalData = [5, 2, 8, 3, 9]; // 原始数据
type OriginalData = typeof originalData;
interface Strategy {
	sort(val: OriginalData): OriginalData;
}
// 目标类组件
class Context {
	private strategy: Strategy;
	private data: OriginalData;
	constructor(strategy: Strategy, data: OriginalData) {
		this.strategy = strategy;
		this.data = data;
	}
	getResult() {
		return this.strategy.sort(this.data);
	}
}
// 策略1 => 策略...
class Strategy1 implements Strategy {
	sort(data: OriginalData) {
		let result;
		// ... 策略逻辑
		result = data.sort((a, b) => a - b); // 策略1
		return result;
	}
}
const originalData = [5, 2, 8, 3, 9]; // 原始数据
const context = new Context(new Strategy1(), originalData);
console.log(context.getResult()); // [ 2, 3, 5, 8, 9 ]

// 基础请求类
class ApiService {
	async fetchData(url: string) {
		const response = await fetch(url);
		return response.json();
	}
}
// 装饰器：缓存功能
class CachedApiService {
	private cache = new Map<string, any>();
	private service: ApiService;
	constructor(service: ApiService) {
		this.service = service;
	}
	async fetchData(url: string) {
		console.log(this.cache, "data");
		if (this.cache.has(url)) {
			return this.cache.get(url);
		}
		const data = await this.service.fetchData(url);
		this.cache.set(url, data);
		return data;
	}
}

// 测试
const cacheService = new CachedApiService(new ApiService());
cacheService.fetchData("http://jsonplaceholder.typicode.com/posts/3");

class RealSubject {
	request() {
		console.log("RealSubject: Handling request");
	}
}

class Proxy {
	realSubject: RealSubject;
	constructor(realSubject: RealSubject) {
		this.realSubject = realSubject;
	}
	request() {
		console.log("Proxy: Delegating request to RealSubject");
		this.realSubject.request();
	}
}

// 测试
const realSubject = new RealSubject();
const proxy = new Proxy(realSubject);
proxy.request();