js享元模式的简单总结

享元模式：是一种性能优化的设计模式，主要为了解决内存中创建了大量的相似对象而产生的性能问题。

我们通过向页面中插入元素的方式来模拟，假如我们的需求是：向页面中插入100个div，内容分别为1 - 100，再接着插入100个h3，内容分别为1 - 100。

下面来看一下没有使用享元模式的代码写法

for (let i = 1; i <= 100; i++) {
  let div = document.createElement( 'div' ); // 创建 div 元素
  div.innerHTML = i; // 将 i 的值作为内容插入到 div 中
  document.body.appendChild( div ); // 在页面中插入这个 div 标签
}

for (let i = 1; i <= 100; i++) {
  let h3 = document.createElement( 'h3' ); // 创建 h3 元素
  h3.innerHTML = i; // 将 i 的值作为内容插入到 h3 中
  document.body.appendChild( h3 ); // // 在页面中插入这个 h3 标签
}

当然大家可以很清楚的看出，我们的两个循环分别创建了100个div标签以及100个h3标签，那其实这是造成很大的性能浪费的，因为标签都是相同的，不同的只是值，所以我们可以这样认为，div标签，h3标签，他们是可以复用的，只需要在插入页面之前更换不同的值就行了，那么以这样的思路优化之后，实际上只需要两个标签就可以实现同样的功能。那么我们来试一下

/*
  首先写一下思路：
    1.需要一个存放标签的对象，根据不同的标签名称，存放对应的 element 元素
    2.需要一个创建 element 元素的方法
    3.需要一个向页面中插入元素的方法，接收两个参数：
      ①.标签名称
      ②.标签内容
*/
class InsertDOM {
  constructor() {
    this.pools = {};
  }

  createElement( tagName ) {
    if (this.pools[ tagName ]) {
      return this.pools[ tagName ]
    }
    return this.pools[ tagName ] = document.createElement( tagName );
  }

  startInsert( tagName, value ) {
    let tag = this.createElement( tagName );
    tag.innerHTML = value;
    document.body.appendChild( tag );
  }
}

let insertDom = new InsertDOM();
for (let i = 1; i <= 100; i++) {
  insertDom.startInsert( 'div', i );
}

for (let i = 1; i <= 100; i++) {
  insertDom.startInsert( 'h3', i );
}

这里只是整理下思路，这个案例其实不是很合适，因为你会发现插入页面中的只有两个标签而且都是100，因为把创建的div或者h3元素放到pools中再拿出使用的过程里，改变的其实还是同一个标签，所以暂时没有找到更合适的例子，但是如果思路和这种模式的优缺点你已经明白的话，那就很好了。