[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的原理和使用场景。可在示例的基础上结合实际场景进行扩展,来完成更复杂的程序设计。

相关推荐
烛衔溟27 分钟前
TypeScript 接口的基本使用 —— 定义对象形状
前端·javascript·typescript
IT乐手2 小时前
Claude Code + Qwen 的配置方法
javascript·claude
子兮曰3 小时前
DeepSeek TUI:原生 Rust 打造的终端 AI 编码 Agent
前端·javascript·后端
暗不需求3 小时前
# 深入 React Todos:从零实现一个状态提升与本地持久化的待办应用
javascript·react.js·全栈
子兮曰4 小时前
深入 Superpowers:180k Stars 的开源 AI 编程方法论是如何工作的
前端·javascript·后端
隔壁的大叔4 小时前
Markdown 渲染如何穿插自定义组件
前端·javascript·vue.js
薯老板4 小时前
JavaScript原型,原型链
javascript
愚者Pro5 小时前
Flutter基础学习
前端·javascript·vue.js
时光足迹5 小时前
Tiptap 简单编辑器模版
前端·javascript·react.js
吴声子夜歌5 小时前
Vue3——使用Mock.js
javascript·vue·mock.js