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

相关推荐
mCell6 小时前
Lua 编程入门:从基础语法到元表
javascript·算法·lua
伟大的兔神7 小时前
我做了一个本地优先的 AI 图片工作台:Loomora v1.0.0 正式发布
前端·javascript·vue.js
fangzhanpeng1689 小时前
(前端)2.js变量作用域样例
开发语言·前端·javascript
码艺-Alimjan11 小时前
Vue项目源码备份最佳实践:无视node_modules,打包体积仅2MB
前端·javascript·vue.js
xixiaoyunya13 小时前
JavaScript 异步编程全解析:从回调地狱到 async/await 的演进之路
开发语言·javascript·ecmascript
张元清13 小时前
React useScrollLock Hook:为弹窗锁住页面滚动 (2026)
javascript·react.js
Sayai13 小时前
【无标题】ECharts 实现日志量异常检测:基线 ±Kσ 基带 + 灵敏度切换(Vue2 实战)
前端·javascript·echarts
默_笙14 小时前
💌 为了把"主题色"传给孙子组件,我翻了五层楼——直到遇见了 useContext
前端·javascript
小KK_14 小时前
JS 事件循环从小白视角入门:宏任务、微任务与 async/await 一网打尽
前端·javascript
kisshyshy15 小时前
从 useRef 到 Web Worker:理解 React 可变对象与浏览器多线程
前端·javascript·react.js