前端开发设计模式——享元模式

前端拾光者

已于 2024-10-10 17:27:29 修改

阅读量2k

点赞数 54

分类专栏： JavaScript设计模式文章标签：设计模式享元模式前端 javascript

于 2024-10-02 10:00:00 首次发布

本文链接：https://blog.csdn.net/jxnd123456/article/details/142661021

版权

JavaScript设计模式专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、享元模式的定义和特点

1.定义

享元模式是一种结构型设计模式，旨在通过共享对象来减少内存使用并提高性能。在前端开发中，它用于处理大量细粒度对象的情况，将对象的状态划分为内部状态（可共享）和外部状态（不可共享）。

2.特点

共享性：

核心是对象的共享，多个对象可以共享相同的内部状态，从而减少对象的创建数量。例如，在创建多个具有相同样式但不同内容的按钮时，可以共享按钮的样式这一内部状态。

内部状态与外部状态分离：

内部状态是对象的固有属性，不随环境改变而改变，并且是可以被共享的部分。外部状态是对象依赖的、根据具体情况变化的属性，每个对象实例的外部状态是独立的。例如，对于多个相同类型的图标，图标的颜色、形状等是内部状态可共享，而图标的位置则是外部状态。

二、享元模式的实现方式

1.创建享元类型

首先定义享元类，该类包含内部状态相关的属性和方法。

示例：创建一个简单的文本框享元类

class TextBoxFlyweight {
    constructor(fontFamily, fontSize) {
        this.fontFamily = fontFamily;
        this.fontSize = fontSize;
    }
    render() {
        const textBox = document.createElement('input');
        textBox.type = 'text';
        textBox.style.fontFamily = this.fontFamily;
        textBox.style.fontSize = this.fontSize;
        return textBox;
    }
}

这里fontFamily（字体）和fontSize（字号）是内部状态，render方法用于创建并返回一个具有特定字体和字号的文本框元素。

2.享元工厂类

用于创建和管理享元对象。

继续以上面的文本框为例，享元工厂类如下：

class TextBoxFlyweightFactory {
    constructor() {
        this.flyweights = {};
    }
    getFlyweight(fontFamily, fontSize) {
        const key = `${fontFamily}_${fontSize}`;
        if (!this.flyweights[key]) {
            this.flyweights[key] = new TextBoxFlyweight(fontFamily, fontSize);
        }
        return this.flyweights[key];
    }
}

工厂类内部使用一个对象flyweights来存储已经创建的享元对象。getFlyweight方法根据传入的字体和字号生成一个唯一的键，若不存在对应的享元对象则创建一个新的，否则返回已有的享元对象。

3.使用享元对象并处理外部状态

在实际应用中，获取享元对象并添加外部状态。

示例：

const textBoxFactory = new TextBoxFlyweightFactory();

// 获取共享的文本框享元对象
const textBox1 = textBoxFactory.getFlyweight('Arial', '12px');
const textBox2 = textBoxFactory.getFlyweight('Arial', '12px');

// 处理外部状态，如文本框的值和位置
textBox1.value = 'Text 1';
textBox1.style.left = '10px';
textBox2.value = 'Text 2';
textBox2.style.left = '50px';

// 将文本框添加到文档中
document.body.appendChild(textBox1.render());
document.body.appendChild(textBox2.render());

这里获取了两个共享相同字体和字号（内部状态）的文本框享元对象，然后分别为它们设置了不同的值（外部状态）和位置（外部状态），最后将它们添加到页面中。