Typescript 享元模式（Flyweight）

标签： 前端 设计模式 享元模式 typescript flyweight

---

请仔细阅读下面代码，理解其中的设计理念。

享元模式

享元模式: 运用共享物件来尽可能减少不变量的内存消耗。

实际场景

如果一个应用程序用到了大量的对象，且占用内存比较高，我们就可以考虑用享元模式来减少内存消耗。
例：统计一篇文章中所有文字的字体类型，内容，字号大小，颜色等（每一个文字都用对象存储）。
我们可以看出来字体类型，大小，颜色等都会是大量的重复资源，可以利用享元模式减少内存的消耗。

享元模式的结构

内部变量: 不会随环境的改变而有所不同，是可以共享的。
外部变量: 它随环境的改变而改变的。

享元模式的例子

储存一篇文章中所有文字的信息（十万字级别）。
语言固定是中文，字体类型有两种（宋体和幼圆）。
字体类型如下：

/* character-interface */
import IFontFamily from './font-family-interface';
import ILanguage from './language-interface';

export default interface ICharacterInterface {
    index: number;
    language: ILanguage;
    fontFamily: IFontFamily;
}

/* language-interface */
export default interface ILanguage {
    type: string;
    name: string;
}

/* font-family-interface */
import { FontFamilyEnum } from './font-family-enum';

export default interface IFontFamily {
    fontFamily: FontFamilyEnum;
}

/* font-family-enum */
export enum FontFamilyEnum {
    Song = '宋体',
    You = '幼圆',
}

默认的构建方法

/* language-class.ts */
import ILanguage from './models/language-interface';

export default class LanguageClass implements ILanguage{
    public type: string;
    public name: string;

    constructor(type: string, name: string) {
        this.type = type;
        this.name = name;
    }
}

/* font-family-class.ts */
import { FontFamilyEnum } from './models/font-family-enum';
import IFontFamily from './models/font-family-interface';

export default class FontFamilyClass implements IFontFamily{
    public fontFamily: FontFamilyEnum;

    constructor(type: FontFamilyEnum) {
        this.fontFamily = type;
    }
}

• 普通方法

我们用普通的方法存储所有的文字

/* normal-character-class.ts */
import ICharacterInterface from '../models/character-interface';
import FontFamilyClass from '../font-family-class';
import { FontFamilyEnum } from '../models/font-family-enum';
import IFontFamily from '../models/font-family-interface';
import LanguageClass from '../language-class';
import ILanguage from '../models/language-interface';

export default class NormalCharacterClass implements ICharacterInterface {
    // 文字固定是中文
    public language: ILanguage = new LanguageClass('Chinese', '中文');
    public index: number;
    public fontFamily: IFontFamily;

    constructor(index: number, type: FontFamilyEnum) {
        this.index = index;
        this.fontFamily = new FontFamilyClass(type);
    }
}

测试创建方法如下

import ICharacterInterface from './models/character-interface';
import { FontFamilyEnum } from './models/font-family-enum';
import NormalCharacterClass from './normal-way/normal-character-class';

export default class SaveCharacters {
    public static normalWay() {
        const charactersList: ICharacterInterface[] = [];
        for (let i = 0; i < 200000; i++) {
            // 模拟随机生成类型
            const type = Math.random() > 0.5 ? FontFamilyEnum.Song : FontFamilyEnum.You;
            charactersList.push(new NormalCharacterClass(i, type));
        }
        return charactersList;
    }
}
const normalWayCharacters = SaveCharacters.normalWay();
console.log(normalWayCharacters)

在浏览器上运行结果如下
可以看出来普通模式创建时
20万个字符对象占用了23M左右的内存。

• 享元模式

运用享元模式，我们发现language对象是恒定不变的，fontFamily对象也只会有两种情况。
所以我们将共享内容存储起来。

import FontFamilyClass from '../font-family-class';
import LanguageClass from '../language-class';
import { FontFamilyEnum } from '../models/font-family-enum';
import IFontFamily from '../models/font-family-interface';

export default class CharacterRegistry {
    private static _instance: CharacterRegistry;
    private _language: LanguageClass;
    private _fontFamilyMap: Map<FontFamilyEnum, IFontFamily> = new Map();

    public static get instance() {
        if (!this._instance) {
            this._instance = new CharacterRegistry();
        }
        return this._instance;
    }

    public get language() {
        if (!this._language) {
            // 懒汉策略，延时创建对象
            this._language = new LanguageClass('Chinese', '中文');
        }
        return this._language;
    }

    public getFontFamilyByType(type: FontFamilyEnum) {
        // 懒汉策略，延时创建对象
        if (!this._fontFamilyMap.has(type)) {
            this._fontFamilyMap.set(type, new FontFamilyClass(type));
        }
        return this._fontFamilyMap.get(type);
    }
}

所以在创建文字对象的方法改变成

import ICharacterInterface from '../models/character-interface';
import { FontFamilyEnum } from '../models/font-family-enum';
import IFontFamily from '../models/font-family-interface';
import ILanguage from '../models/language-interface';
import CharacterRegistry from './character-registry';

export default class FlyweightCharacterClass implements ICharacterInterface {
    public language: ILanguage = CharacterRegistry.instance.language;
    public index: number;
    public fontFamily: IFontFamily;

    constructor(index: number, type: FontFamilyEnum) {
        this.index = index;
        this.fontFamily = CharacterRegistry.instance.getFontFamilyByType(type);
    }
}

测试创建方法

import FlyweightCharacterClass from './flyweight-way/flyweight-character-class';
import ICharacterInterface from './models/character-interface';
import { FontFamilyEnum } from './models/font-family-enum';

export default class SaveCharacters {
    public static flyweightWay() {
        const charactersList: ICharacterInterface[] = [];
        for (let i = 0; i < 200000; i++) {
            // 模拟随机生成类型
            const type = Math.random() > 0.5 ? FontFamilyEnum.Song : FontFamilyEnum.You;
            charactersList.push(new FlyweightCharacterClass(i, type));
        }
        return charactersList;
    }
}
const flyweightWayCharacters = SaveCharacters.flyweightWay();
console.log(flyweightWayCharacters)

在浏览器上运行结果如下
可以看出来享元模式创建时
20万个字符对象占用了9M左右的内存。

其中fontFamily对象和Langage对象占用的内存明显减少，在字体对象继续增多的时候，fontFamily对象和Langage对象在享元模式中占用的内存不会变化，但在普通模式中，他们会成倍的增长。享元模式的优势也会更加显示出来。

享元模式的利弊

利：

• 减少了对象的创建，有效的减少大量类似对象的内存占用。
• 对一些公有的内部对象修改起来更加方便。

弊：

• 将一个对象里面的内容分开存储，增加了系统的复杂度，增加调试和维护的成本。