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

相关推荐
1-1=013 小时前
Vue 3 模板语
前端·javascript·vue.js
风卿13 小时前
看着AI写代码太孤独了,来欣赏星云吧:一个DSH 装饰插件
前端·javascript
牧艺13 小时前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
愚坤14 小时前
前端真有意思,JS还能独立做项目?
前端·javascript·github
李纲明16 小时前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐?getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy
FungLeo17 小时前
成为全栈·Vue 管理后台篇·用 fetch 建一层可控的请求内核
前端·javascript·vue.js·http·fetch·formdata·接口封装
用户842981424181017 小时前
ByteJS,让重要的 JavaScript 以字节码运行。
javascript
FungLeo19 小时前
成为全栈·Vue 管理后台篇·Vue Router如何守住多角色后台边界
前端·javascript·vue.js·rbac·vue router·路由守卫·前端权限
FungLeo20 小时前
成为全栈·Vue管理后台篇·仪表盘不是几张卡片:组合统计接口与角色视图
前端·javascript·vue.js·rbac·仪表盘·管理后台·tanstack query
程序员大阳20 小时前
HTML+CSS+JS对话式实战(7)-学生端活动报名功能开发
javascript·css·html·活动报名