/** * Flyweight Pattern 享元是一种结构型设计模式, 它允许你在消耗少量内存的情况下支持大量对象。 * https://refactoringguru.cn/design-patterns/flyweight/typescript/example#lang-features * The Flyweight stores a common portion of the state (also called intrinsic * state) that belongs to multiple real business entities. The Flyweight accepts * the rest of the state (extrinsic state, unique for each entity) via its * method parameters. */ class Flyweight { /** * */ private sharedState: any; /** * * @param sharedState */ constructor(sharedState: any) { this.sharedState = sharedState; } /** * * @param uniqueState */ public operation(uniqueState):string { //void let str=""; const s = JSON.stringify(this.sharedState); const u = JSON.stringify(uniqueState); console.log(`Flyweight: Displaying shared (${s}) and unique (${u}) state.`); str=str+s+","+u; return str; } } /** * The Flyweight Factory creates and manages the Flyweight objects. It ensures * that flyweights are shared correctly. When the client requests a flyweight, * the factory either returns an existing instance or creates a new one, if it * doesn't exist yet. */ class FlyweightFactory { /** * */ private flyweights: {[key: string]: Flyweight} = <any>{}; /** * * @param initialFlyweights */ constructor(initialFlyweights: string[][]) { for (const state of initialFlyweights) { this.flyweights[this.getKey(state)] = new Flyweight(state); } } /** * Returns a Flyweight's string hash for a given state. */ private getKey(state: string[]): string { return state.join('_'); } /** * Returns an existing Flyweight with a given state or creates a new one. */ public getFlyweight(sharedState: string[]): Flyweight { const key = this.getKey(sharedState); if (!(key in this.flyweights)) { console.log('FlyweightFactory: Can\'t find a flyweight, creating new one.'); this.flyweights[key] = new Flyweight(sharedState); } else { console.log('FlyweightFactory: Reusing existing flyweight.'); } return this.flyweights[key]; } /** * */ public listFlyweights():string { //void let str=""; const count = Object.keys(this.flyweights).length; console.log(`\nFlyweightFactory: I have ${count} flyweights:`); for (const key in this.flyweights) { console.log(key); str=str+","+key; } return str; } } /** * The client code usually creates a bunch of pre-populated flyweights in the * initialization stage of the application. */ const factory = new FlyweightFactory([ ['Chevrolet', 'Camaro2018', 'pink'], ['Mercedes Benz', 'C300', 'black'], ['Mercedes Benz', 'C500', 'red'], ['BMW', 'M5', 'red'], ['BMW', 'X6', 'white'], // ... ]); let pubf1=""; let pubf2=""; let pubf3=""; let pubf4=""; pubf3=factory.listFlyweights(); // ... /** * * @param ff * @param plates * @param owner * @param brand * @param model * @param color */ function addCarToPoliceDatabase( ff: FlyweightFactory, plates: string, owner: string, brand: string, model: string, color: string, ) { console.log('\nClient: Adding a car to database.'); const flyweight = ff.getFlyweight([brand, model, color]); // The client code either stores or calculates extrinsic state and passes it // to the flyweight's methods. return flyweight.operation([plates, owner]); } pubf1=addCarToPoliceDatabase(factory, 'CL234IR', 'James Doe', 'BMW', 'M5', 'red'); pubf2=addCarToPoliceDatabase(factory, 'CL234IR', 'James Doe', 'BMW', 'X1', 'red'); pubf4=factory.listFlyweights(); let messageflyweight: string = 'Hello World,This is a typescript!,涂聚文 Geovin Du.Web'; document.body.innerHTML = messageflyweight+",<br/>one="+pubf1+",<br/>two="+pubf2+",<br/>thee="+pubf3+",<br/>four="+pubf4+",<br/>TypeScript Flyweight Pattern 享元模式";
调用:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <head><title>TypeScript Hello Flyweight Pattern 享元模式</title> <meta name="Description" content="geovindu,涂聚文,Geovin Du"/> <meta name="Keywords" content="geovindu,涂聚文,Geovin Du"/> <meta name="author" content="geovindu,涂聚文,Geovin Du"/> </head> <body> <script src="dist/Flyweightts.js"></script> </body> </html>
输出:
- typescript Flyweight Patterntypescript flyweight pattern flyweight pattern 12 creational flyweight pattern class flyweight pattern cpp typescript strategy pattern typescript iterator pattern typescript prototype pattern typescript template pattern method typescript mediator pattern typescript pattern state