标签： 前端 设计模式 享元模式 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左右的内存。
normal-way-characters.jpg
-
享元模式
运用享元模式，我们发现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左右的内存。
flyweightWayCharacters.jpg
其中fontFamily对象和Langage对象占用的内存明显减少，在字体对象继续增多的时候，fontFamily对象和Langage对象在享元模式中占用的内存不会变化，但在普通模式中，他们会成倍的增长。享元模式的优势也会更加显示出来。
享元模式的利弊
利：
- 减少了对象的创建，有效的减少大量类似对象的内存占用。
- 对一些公有的内部对象修改起来更加方便。
弊：
- 将一个对象里面的内容分开存储，增加了系统的复杂度，增加调试和维护的成本。
