JavaScript设计模式：享元模式

享元模式

• 共享内存，节约内存空间
• 相同的数据共享使用
• 将数据的方法分为内部数据、内部方法和外部数据、外部方法
• 内部状态保存在对象内部，通常不会改变，可以共享
• 外部状态保存在对象外部，可以随场景改变，不可以共享

使用场景

• 一个系统有大量相同或者相似的对象，造成内存的大量耗费
• 对象的大部分状态可以外部化，可以将这些外部状态传入对象中
• 在使用享元模式时需要维护一个存储享元对象的享元池，而这需要耗费一定的系统资源，因此，应当在需要多次重复使用享元对象时才值得使用享元模式

享元模式的实现

使用享元模式实现分页加载数据，只创建5个div，一次显示5条数据，当切换pageIndex时，根据数据的索引获取对应的数据即可，相比于每条数据使用一个元素的显示方式，享元模式显示方式减少元素的渲染，更加高效。

let flyWeight = (function () {
  let created = [];
  function create() {
    let dom = document.createElement('div');
    document.getElementById('container').appendChild(dom);
    created.push(dom);
    return dom;
  }
  return {
    getDiv() {
      if (created.length < 5) {
        return create();
      } else {
        let div = created.shift();
        created.push(div);
        return div;
      }
    }
  }
})();

// 初始化
function init(){
  for(let i = 0; i < 5; i++){
    FlyWeight.getDiv().innerHTML = i;
  }
}

// 点击下一页创建对应的数据
function getPage(){
  let page = 0,
  num = 5,
  len = 10,
  n = ++page * num % len;
  for(let i = 0; i < num; i++){
    FlyWeight.getDiv().innerHTML = i;
  }
}

优缺点

优点

• 极大减少内存张相似或相同对象数量，节约系统资源，提高系统性能
• 享元模式中的外部状态相对独立，且不影响内部状态

缺点

为了是对象可以共享，需要将享元模式的部分状态外部化，分离内部状态和外部状态，是程序逻辑复杂