如何使用JavaScript对象字面量作为享元模式的内部状态高速缓存池-js教程-PHP中文网

javascript对象字面量本身不是享元模式的实现，但它可作为享元中不可变内部状态的轻量级存储载体，配合工厂管理与map缓存池，通过json.stringify规范化键实现复用，外部状态则由调用方动态传入。

如何使用javascript对象字面量作为享元模式的内部状态高速缓存池

JavaScript对象字面量本身不是享元模式的实现，但它可以作为享元对象中**内部状态（intrinsic state）的轻量级存储载体**，配合工厂管理、对象复用，高效构建享元池。关键不在于“用字面量代替类”，而在于**把不可变的共享数据固化为字面量，把可变的外部状态剥离出去**。

享元池的核心结构：字面量存内态，函数管复用

享元模式要分离内在状态（共享、不可变）和外在状态（变化、不共享）。对象字面量天然适合表达前者——它轻量、无原型开销、可直接序列化、便于比对与缓存。

把字体样式、图标类型、按钮主题等配置项定义为只读字面量，例如：{ size: 'sm', variant: 'outline', icon: 'check' }
用一个工厂函数统一管理这些字面量实例，避免重复创建相同配置的对象
享元对象本身只保存引用（如 config: configRef），不拷贝字面量内容

用 Map 实现字面量键值化的享元缓存池

不能靠 === 比较两个字面量是否相等（它们总是不同引用），必须将字面量“规范化”后作为缓存键。推荐用 JSON.stringify 或更安全的浅序列化方式生成唯一键。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

对字面量做排序 + 序列化，确保 {a:1,b:2} 和 {b:2,a:1} 得到同一 key
缓存池用 Map 存储：pool.set(key, { config, render() { ... } })
每次请求时先查 key，命中则复用，未命中则新建并缓存

外部状态必须彻底解耦，由调用方传入

享元对象绝不持有 id、position、onClick 回调等会变的数据。这些必须作为参数在使用时动态注入。

渲染方法设计为 flyweight.render({ id, x, y, onClick })，而非绑定在实例上
避免在享元内部维护 DOM 引用或事件监听器；所有副作用交由使用者控制
这样同一个字面量配置的享元，可被成百上千个不同位置/行为的 UI 元素复用

实际小例子：图标享元池

假设渲染不同颜色尺寸的 SVG 图标，但 SVG 路径数据固定：

const iconConfigs = {
  'home-sm-blue': { size: 16, color: '#1e40af', path: 'M10 20v-6h4v6h5v-8h-3V4h-4v8h-3z' },
  'home-lg-red': { size: 24, color: '#dc2626', path: 'M10 20v-6h4v6h5v-8h-3V4h-4v8h-3z' }
};

const iconPool = new Map();
function getIconFlyweight(config) {
  const key = JSON.stringify(config);
  if (!iconPool.has(key)) {
    iconPool.set(key, {
      config,
      render({ id, x, y }) {
        return `<svg id="${id}" x="${x}" y="${y}" width="${config.size}" height="${config.size}"><path fill="${config.color}" d="${config.path}"></path></svg>`;
      }
    });
  }
  return iconPool.get(key);
}

调用时：getIconFlyweight(iconConfigs['home-sm-blue']).render({id:'i1', x:10, y:20}) —— 内部状态复用，外部状态按需注入。