享元模式:是一种性能优化的设计模式,主要为了解决内存中创建了大量的相似对象而产生的性能问题。
我们通过向页面中插入元素的方式来模拟,假如我们的需求是:向页面中插入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中再拿出使用的过程里,改变的其实还是同一个标签,所以暂时没有找到更合适的例子,但是如果思路和这种模式的优缺点你已经明白的话,那就很好了。