[JS设计模式]Flyweight Pattern

Flyweight pattern

享元模式是一种结构化的设计模式,主要用于产生大量类似对象而内存又有限的场景。享元模式能节省内存。

假设一个国际化特大城市SZ;它有5个区,分别为nanshan、futian、luohu、baoan、longgang;每个区都有多个图书馆,每个图书馆都有大量的图书,每种书都会有多本,那么该城市要建一个图书管理系统显然需要非常大的内存资源。通常同一本书会有多本,本文中叫做多个副本,以便表述;例如,《遥远的救世主》这本书总共有100本,我们就说有100个副本。

一本书通常有多个属性,例如,书名、作者、ISBN、图例、所属图书馆、总数量、在馆数量等等。如果每一本书的每一个副本,我们都创建一个对象来进行管理,有些共有的属性所占用的内存是一种显而易见的浪费。那么,在这种场景下,使用享元模式就能极大的优化图书管理系统的内存。所有类似场景使用享元模式都能奏效,如、游戏等。

通过通俗的场景描述了享元模式的作用,接下来,在技术层面来看看要怎样实现。需要说明的是,该模式也可以用于其他设计语言,不限于JS。

首先,创建一个图书类Book

javascript 复制代码
class Book {
    constructor(title, author, isbn) {
        this.title = title;
        this.author = author;
        this.isbn = isbn;
    }
}

如果不用享元模式,我们创建多个副本,简单粗暴可能会这么实现:

javascript 复制代码
const book1 = new Book("遥远的救世主", "豆豆", "abc123");
const book2 = new Book("遥远的救世主", "豆豆", "abc123");
const book3 = new Book("遥远的救世主", "豆豆", "abc123");
const book4 = new Book("遥远的救世主", "豆豆", "abc123");

如果使用享元模式,一种实现方式如下:

javascript 复制代码
const books = new Map();
const createBook = (title, author, isbn) => {
    const existingBook = books.has(isbn);

    if (existingBook) {
        return books.get(isbn);
    }
  
    const book = new Book(title, author, isbn);
    books.set(isbn, book);

    return book;
};

可以通过ISBN来判断某种图书的唯一性,通过createBook来创建某一种图书。其他的副本我们可以通过addBook来实现:

javascript 复制代码
const bookList = [];

const addBook = (title, author, isbn, region) => {
  const book = {
    ...createBook(title, author, isbn),
    region
  };

  bookList.push(book);
  return book;
};

addBook("遥远的救世主", "豆豆", "AB123", "nanshan");
addBook("遥远的救世主", "豆豆", "AB123", "longgang");
addBook("埃隆·马斯克传", "沃尔特·艾萨克森", "CD123", "nanshan");
addBook("埃隆·马斯克传", "沃尔特·艾萨克森", "CD123", "futian");
addBook("长安的荔枝", "马伯庸", "EF123", "bao'an");

console.log("图书总数:", bookList.length);
console.log("图书种类数:", books.size);

运行结果:

本文通过通俗的自然语言和实际的代码示例,描述了flyweight pattern的原理和使用场景。可在示例的基础上结合实际场景进行扩展,来完成更复杂的程序设计。

相关推荐
资深web全栈开发4 小时前
CQS - 命令查询分离:驯服副作用
设计模式
IT枫斗者7 小时前
IntelliJ IDEA 2025.3史诗级更新:统一发行版+Spring Boot 4支持,这更新太香了!
java·开发语言·前端·javascript·spring boot·后端·intellij-idea
NGC_66118 小时前
二分查找算法
java·javascript·算法
享誉霸王8 小时前
15、告别混乱!Vue3复杂项目的规范搭建与基础库封装实战
前端·javascript·vue.js·前端框架·json·firefox·html5
滕青山10 小时前
URL编码/解码 核心JS实现
前端·javascript·vue.js
有马贵将10 小时前
【3】前端手撕-深浅拷贝
javascript
柳杉12 小时前
使用AI从零打造炫酷的智慧城市大屏(开源):React + Recharts 实战分享
前端·javascript·数据可视化
Highcharts.js12 小时前
玩转Highcharts气泡图|从散点图到气泡图:增加一个维度,数据可视化瞬间立体起来
javascript·信息可视化·散点图·highcharts·图表开发·气泡图·图表创建
颜酱13 小时前
差分数组:高效处理数组区间批量更新的核心技巧
javascript·后端·算法
Joker Zxc13 小时前
【前端基础(Javascript部分)】2、JavaScript的变量和数据类型
开发语言·前端·javascript