JavaScript设计模式（9）—— 享元模式

╰+攻爆jí腚メ 2021-09-03 05:35 327阅读 0赞

# 享元模式=节约资源模式 #

享元模式，顾名思义，就是分享“对象”的一个模式。  
例如学校里的图书馆，可能每种类型的书只有十几本，但是却能让一代又一代的学生都能看上这些书，这里就用到了享元模式。  
通过借阅书籍并归还的例子我们可以得出结论：享元模式是一种节约资源的模式。

# 最最简单的例子 #

在前端代码层面，我们通常会创建一些相似的对象来解决相似的问题。  
下面我们把图书馆的例子翻译成代码来介绍享元模式。  
如：A同学借阅《设计模式》,B同学借阅《设计模式》,C同学借阅《设计模式》，A同学借阅《模式设计》…

class Library{ 
       constructor(who,book){ 
            this.who = who
            this.book = book
        }
        borrowBook(){ 
            console.log(this.who + '借' + this.book)
        }
        returnBook(){ 
            console.log(this.who + '还' + this.book)
        }
    }
    
    const A = new Library('小明','《设计模式》')
    A.borrowBook()
    A.returnBook()
    const B = new Library('大明','《设计模式》')
    B.borrowBook()
    B.returnBook()
    const C = new Library('忠明','《设计模式》')
    C.borrowBook()
    C.returnBook()
    const D = new Library('黄晓明','《设计模式》')
    D.borrowBook()
    D.returnBook()
    // .......

从上面的代码中我们可以看到，这个图书馆非常穷，只有一本设计模式，其他人借来借去也只有这“一本”书，因此我们可以通过享元模式把书这个状态抽离出来。

class Book{ 
       constructor(book){ 
            this.book = book
        }
        borrowBook(){ 
            console.log(this.who + '借' + this.book)
        }
        returnBook(){ 
            console.log(this.who + '还' + this.book)
        }
    }
    
    const A = new Book('《设计模式》')
    A.who = '黄晓明'
    A.borrowBook()
    A.returnBook()
    A.who = '小明'
    A.borrowBook()
    A.returnBook()
    // .......

从上面这个最最简单的例子里可以得出如下结论：

1.  享元模式是根据实际情况的一种优化方案，如果把上例中改成，小明借阅《A》,《B》,《C》…我们可以得出，这个学校非常穷，只有一个学生，因此我们需要抽离的状态是学生，而不是书本。
2.  享元模式需要根据实际情况抽离外部状态，保留内部状态（可共享）。
3.  享元模式根本没什么软用

# 为什么我认为享元模式没什么软用 #

什么样的人可以认为享元模式没什么软用。

1.  把迭代器用的非常熟练的人
2.  把1条件里的迭代器改成享元模式同样成立的人

其实我们很容易从最简单的例子里看出来，享元模式根本没什么实际内容，他只是对内存占用的一种优化而已，所谓优化，就是想得到的人永远想得到，他认为剥离外部状态是一件理所应当的事情，当他发现某个状态会导致大量相似对象被创建的时候，他自然而然都想把这个状态剥离出来了。所以说，这个模式也就是所谓的：给你写的代码取个好名字模式。

# 真正的享元模式 #

我认为真正的享元模式应当是“没有内部状态的享元”（原著中也有提及）。  
依旧以现实中的例子为例，在初学Vue时我们用v-for循环模板的时候，经常会遇到警告，当然现在我们知道了，v-for循环的dom节点必须要有key值，且key尽量保持唯一。那么Vue为什么需要一个唯一key值呐？自己去百度原因，我**凭空猜测**原因大概如下。

由于Vue是一套以数据驱动模板更新的框架，当数据更新的时候，Vue需要通过一系列计算重新得到大量模板的字符串，**这个现象在数组循环渲染的时候表现得尤为严重**（Vue3.x细化了这部分的工作，具体可参考Vue3.x说明文档）。因此Vue对这部分循环渲染的数据做了优化工作，关键就在于key值更新，极简版代码如下。

class Dom { 
       static commonDom = []
        constructor(){ }
        cmpDom(key){ 
            if(Dom.commonDom.indexOf(key)!==-1){ 
                console.log('key已经存在')
                // return 一个旧的dom
            }else{ 
                Dom.commonDom.push(key)
                // 存储一个新的dom
            }
        }
    }
    let dom = new Dom()
    dom.cmpDom(1)
    dom.cmpDom(2)
    dom.cmpDom(1)

当一个dom元素的key值已经被保存后，就可以继续拿出来用，如果一个dom元素的key值和之前的key重复，就return一个重复的dom给他，当然Vue实际不是这么操作的，我这里只是单纯为了重复利用key值相同的dom。

细心（仔细看了上面垃圾代码）的小伙伴已经发现了，这里并没有所谓的对象复用啊，只是减少了commonDom数组的长度，复用了里面的元素而已，为什么也叫享元模式呐？

那说明你的理解还没到胃，享元模式的核心是节约资源！  
敲重点！是分享and节约资源！