Javascript设计模式之享元模式

前言：菜鸡也有梦想，而我的梦想就是进一个真正的互联网大厂。以前学习的时候没有系统的整理，从今天开始要保持每周写博客的习惯，希望自己可以有所成长。为了培养编程思维，决定从设计模式开始写起。我是通过读《Javascript设计模式与开发实践》来学习设计模式，并且将知识点和收获记录在博客中。

此文仅记录本人阅读《JavaScript设计模式与开发实践》的知识点与想法，感谢作者曾探大大写出这么好的一本书。如有冒犯，请联系本人：markcoder@outlook.com处理，请大家购买正版书籍。

1.享元模式介绍

享元模式：运用共享技术来减少创建对象的数量，从而减少内存占用、提高性能。

享元模式提醒我们将一个对象的属性划分为内部和外部状态。

内部状态独立于具体的场景，通常不会改变。

外部状态取决于具体的场景，并根据场景而变化，外部状态不能被共享。

2.代码实现

场景，地图搜索后会出现一个气泡，两个地点符合出现两个气泡，六个地点符合出现六个气泡，我们可以把前两个气泡回收起来，下次搜索的时候继续拿出来用。

class ToolTip {
    constructor () {
        this.toolTipPool = []
    }
    
    create () {
        if (this.toolTipPool.length === 0) {
            let div = document.createElement( 'div' ); // 创建一个 dom 
            document.body.appendChild( div ); 
            return div;
        } else{ // 如果对象池里不为空
            return this.toolTipPool.shift(); // 则从对象池中取出一个 dom 
        }
    }
    
    recover (tooltipDom) { // 回收小球
        return this.toolTipPool.push( tooltipDom ); // 对象池回收 dom
    } 
    
}

let toolTip = new ToolTip();
let list = []; // 记录现在有几个球
let arr = ['A', 'B']; // 此时有A,B两个小球
for (let i = 0; i < arr.length; i++) {
    let div = toolTip.create();
    div.innerHTML = arr[i];
    list.push(div);
}

// 然后重新绘制地图，回收A和B
for (let i = 0; i < list.length; i++){ 
    toolTip.recover(list[i]); 
};

let arr2 = ['A', 'B', 'C', 'D', 'E', 'F'];
for (let i = 0; i < arr2.length; i++) {
    let div = toolTip.create();
    div.innerHTML = arr2[i];
    list.push(div);
}
复制代码

转载于:https://juejin.im/post/5ccff1dde51d453ae03507e5