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

相关推荐
兆子龙10 小时前
ahooks useRequest 深度解析:一个 Hook 搞定所有请求
java·javascript
兆子龙10 小时前
React Suspense 从入门到实战:让异步加载更优雅
java·javascript
KKKK11 小时前
SSE(Server-Sent Events)流式传输原理和XStream实践
前端·javascript
子兮曰11 小时前
Humanizer-zh 实战:把 AI 初稿改成“能发布”的技术文章
前端·javascript·后端
Din12 小时前
主动取消的防抖
前端·javascript·typescript
H5开发新纪元12 小时前
Nginx 部署 Vue3 项目完整指南
前端·javascript·面试
决斗小饼干12 小时前
跨语言移植手记:把 TypeScript 的 Codex SDK 请进 .NET 世界
前端·javascript·typescript
刀法如飞12 小时前
AI时代,程序员都应该是算法思想工程师
人工智能·设计模式·程序员
进击的尘埃12 小时前
Vitest 浏览器模式:别再用 jsdom 骗自己了
javascript