享元模式

享元模式（flyweight pattern）是一种共享同类对象，减少创建对象数量的一种手段，其目的是减少内存占用。

举个例子：

地图撒点时创建点位对象，当需要更新点位时，可以复用现有点位对象，更改其显示以及点位参数即可。不需要的点位，可以暂存以备后续使用。
页面渲染列表创建的列表行对象，可以从行缓存中获取对象渲染到页面，如果没有则创建新的页面对象，有则复用旧的对象。

示例

假如页面需要渲染用户节点，对于已经删除的节点可以进行混存等待下次复用

实现代码

// 用户节点
const userNodes = (function () {
  const cache = [];

  // 创建节点
  function create(user) {
    console.log(`创建用户组件 ${user.name}`);

    let elem = cache.shift();
    if (!elem) {
      elem = document.createElement('div');

      elem.innerHTML =
        '<div>用户信息: <span class="userinfo"></span><button class="del">删除</button></div>';
    }

    elem.querySelector('.userinfo').innerText = user.name;

    elem.querySelector('.del').onclick = function () {
      remove(elem);
    };

    document.body.appendChild(elem);

    return { elem, user };
  }
  // 移除节点并缓存等待复用
  function remove(elem) {
    cache.push(elem);
    elem.parentNode.removeChild(elem);
  }

  return {
    create,
    remove,
  };
})();

const userRender = (function () {
  function register(lists = []) {
    lists.forEach(item => {
      userNodes.create(item);
    });
  }

  return { register };
})();

userRender.register([
  { name: 'zunkun1' },
  { name: 'zunkun2' },
  { name: 'zunkun3' },
  { name: 'zunkun4' },
  { name: 'zunkun5' },
  { name: 'zunkun6' },
]);

setTimeout(() => {
  userRender.register([
    { name: 'zunkun11' },
    { name: 'zunkun12' },
    { name: 'zunkun13' },
    { name: 'zunkun14' },
    { name: 'zunkun15' },
    { name: 'zunkun16' },
  ]);
}, 5000);

参考

JavaScript 设计模式与开发实践

享元模式 ​

示例 ​

实现代码 ​

参考 ​

享元模式

示例

实现代码

参考