摘要
享元模式是用于性能优化的设计模式之一，在前端编程中有重要的应用，尤其是在大量渲染DOM的时候，使用享元模式及对象池技术能获得极大优化。本文介绍了享元模式的概念，并将其用于渲染大量列表数据的优化上。
初识享元模式
在面向对象编程中，有时会重复创建大量相似的对象，当这些对象不能被垃圾回收的时候(比如被闭包在一个回调函数中)就会造成内存的高消耗，在循环体里创建对象时尤其会出现这种情况。享元模式提出了一种对象复用的技术，即我们不需要创建那么多对象，只需要创建若干个能够被复用的对象(享元对象)，然后在实际使用中给享元对象注入差异，从而使对象有不同的表现。
为了要创建享元对象，首先要把对象的数据划分为内部状态和外部状态，具体何为内部状态，何为外部状态取决于你想要创建什么样的享元对象。
举个例子：
书这个类，我想创建的享元对象是“技术类书籍”，让所有技术类的书都共享这个对象，那么书的类别就是内部状态；而书的书名，作者可能是每本书都不一样的，那么书的书名和作者就是外部状态。或者换一种方式，我想创建“村上春树写的书”这种享元对象，然后让所有村上春树写的书都共享这个享元对象，此时书的作者就为内部状态。当然也可以让作者、分类同时为内部状态创建一个享元对象。
享元对象可以按照内部状态的不同创建若干个，比如技术类书，文学类书，鸡汤类书三个。在实践的时候会发现，抽象程度越高，所创建的享元对象就越少，但是外部状态就越多；相反抽象程度越低，所需创建的享元对象就越多，外部状态就越少。特别地，当对象的所有状态都归为内部状态时，此时每个对象都可以看作一个享元对象，但是没有被共享，相当于没用享元模式。
享元模式的应用
还是以书为例子，实现一个功能：每本书都要打印出自己的书名。
先来看看没用享元模式之前代码的样子
const books = [
{name: "计算机网络", category: "技术类"},
{name: "算法导论", category: "技术类"},
{name: "计算机组成原理", category: "技术类"},
{name: "傲慢与偏见", category: "文学类"},
{name: "红与黑", category: "文学类"},
{name: "围城", category: "文学类"}
]
class Book {
constructor(name, category) {
this.name = name;
this.category = category
}
print() {
console.log(this.name, this.category)
}
}
books.forEach((bookData) => {
const book = new Book(bookData.name, bookData.category)
const div = document.createElement("div")
div.innerText = bookData.name
div.addEventListener("click", () => {
book.print()
})
document.body.appendChild(div)
})
上面代码先创建了书这个对象，然后把这个对象闭包在了点击事件的回调中，可以想象，如果有一万本书的话，这段代码的内存开销还是很可观的。现在我们使用享元模式重构这段代码
// 先定义享元对象
class FlyweightBook {
constructor(category) {
this.category = category
}
// 用于享元对象获取外部状态
getExternalState(state) {
for(const p in state) {
this[p] = state[p]
}
}
print() {
console.log(this.name, this.category)
}
}
// 然后定义一个工厂，来为我们生产享元对象
// 注意，这段代码实际上用了单例模式,每个享元对象都为单例， 因为我们没必要创建多个相同的享元对象
const flyweightBookFactory = (function() {
const flyweightBookStore = {}
return function (category) {
if (flyweightBookStore[category]) {
return flyweightBookStore[category]
}
const flyweightBook = new FlyweightBook(category)
flyweightBookStore[category] = flyweightBook
return flyweightBook
}
})()
// 然后我们要使用享元对象, 在享元对象被调用的时候，能够得到它的外部状态
books.forEach((bookData) => {
// 先生产出享元对象
const flyweightBook = flyweightBookFactory(bookData.category)
const div = document.createElement("div")
div.innerText = bookData.name
div.addEventListener("click", () => {
// 给享元对象设置外部状态
flyweightBook.getExternalState({name: bookData.name}) // 外部状态为书名
flyweightBook.print()
})
document.body.appendChild(div)
})
可以看到以上代码仅仅闭包了两个享元对象，因为书仅有两种类别。两个享元对象是在使用的时候才获取到了外部状态，从而在使用时表现出对象本来应有的样子。
思考：如果书的类别有40种，而作者只有10个，那么挑选哪个属性作为内部状态呢？
当然是作者，因为这样只需要创建10个享元对象就行了。
思考：为何不干脆定义一个没有内部状态的享元对象得了，那样只有一个享元对象用于共享？
这样当然是可以的，实际上变得跟单例模式很像，唯一的区别就是多了对外部状态的注入。
实际上内部状态越少，要注入的外部状态自然越多，而且为了代码的复用性，会让内部状态尽可能多。
在一些代码中会有一个专门用来管理外部状态的一个实例，这个实例保存了所有对象的外部状态，同时提供了一个接口给享元对象来获取这些外部状态(通过id或其它唯一索引)。
对象池技术与享元模式
在上面例子中会发现，每增加一本书就会多一个DOM，哪怕享元对象只有两个，而DOM上万个的话，页面的性能也是很差的。我们发现，每实例化一个DOM，只有它的innerText是不同的，那么我们把DOM的innerText当做外部状态，其它当做内部状态，构造出享元对象DOM:
class Div {
constructor() {
this.dom = document.createElement("div")
}
getExternalState(extState) {
// 获取外部状态
this.dom.innerText = extState.innerText
}
mount(container) {
container.appendChild(this.dom)
}
}
那么什么东西能作为内部状态呢？在这里其实不需要内部状态的，因为我们关注的是享元对象的个数，比如页面上最多显示20个DOM的话，那么我们就创建20个DOM用来给真正的实例去共享:
const divFactory = (function() {
const divPool = []; // 对象池
return function() {
if (divPool.length <= 20) {
const div = new Div()
divPool.push(div)
return div
} else {
// 滚动行为，在超过20个时，复用池中的第一个实例，返回给调用者
const div = divPool.shift()
divPool.push(div)
return div
}
}
})()
这个工厂就像奸商一样，在20个之前还是好好的，每次创建一个div都是新的，到了20个之后，就拿一些老的div返回给调用者，调用者会发现这个老的div会包含一些老的数据(像翻新机一样)，但是调用者不关心，因为他会用新的数据覆盖掉老的数据。
接下来看调用者如何使用
// 先创建一个容器，因为不把DOM直接挂在document.body里了
const container = document.createElement("div")
books.forEach((bookData) => {
// 先生产出享元对象
const flyweightBook = flyweightBookFactory(bookData.category)
// const div = document.createElement("div")
// div.innerText = bookData.name
const div = divFactory()
div.getExternalState({innerText: bookData.name})
// 如果要添加事件的话，在Div里面提供接口添加，在这里会造成重复添加
// div.dom.addEventListener("click", () => {
// 给享元对象设置外部状态
// flyweightBook.getExternalState({name: bookData.name}) // 外部状态为书名
// flyweightBook.print()
// })
div.mount(container)
// document.body.appendChild(div)
})
document.body.appendChild(container)
以上代码会发现，DOM确实被复用了，但是总是显示最后的二十个，这是自然的，可以通过监听滚动事件，实现在滚动的时候加载相应的数据，同时DOM被复用，B站的弹幕列表就是用了相似的技术实现的，以下是全部代码:
const books = new Array(10000).fill(0).map((v, index) => {
return Math.random() > 0.5 ? {
name: `计算机科学${index}`,
category: '技术类'
} : {
name: `傲慢与偏见${index}`,
category: '文学类类'
}
})
class FlyweightBook {
constructor(category) {
this.category = category
}
// 用于享元对象获取外部状态
getExternalState(state) {
for(const p in state) {
this[p] = state[p]
}
}
print() {
console.log(this.name, this.category)
}
}
// 然后定义一个工厂，来为我们生产享元对象
// 注意，这段代码实际上用了单例模式,每个享元对象都为单例， 因为我们没必要创建多个相同的享元对象
const flyweightBookFactory = (function() {
const flyweightBookStore = {}
return function (category) {
if (flyweightBookStore[category]) {
return flyweightBookStore[category]
}
const flyweightBook = new FlyweightBook(category)
flyweightBookStore[category] = flyweightBook
return flyweightBook
}
})()
// DOM的享元对象
class Div {
constructor() {
this.dom = document.createElement("div")
}
getExternalState(extState, onClick) {
// 获取外部状态
this.dom.innerText = extState.innerText
// 设置DOM位置
this.dom.style.top = `${extState.seq * 22}px`
this.dom.style.position = `absolute`
this.dom.onclick = onClick
}
mount(container) {
container.appendChild(this.dom)
}
}
const divFactory = (function() {
const divPool = []; // 对象池
return function(innerContainer) {
let div
if (divPool.length <= 20) {
div = new Div()
divPool.push(div)
} else {
// 滚动行为，在超过20个时，复用池中的第一个实例，返回给调用者
div = divPool.shift()
divPool.push(div)
}
div.mount(innerContainer)
return div
}
})()
// 外层container，用户可视区域
const container = document.createElement("div")
// 内层container, 包含了所有DOM的总高度
const innerContainer = document.createElement("div")
container.style.maxHeight = '400px'
container.style.width = '200px'
container.style.border = '1px solid'
container.style.overflow = 'auto'
innerContainer.style.height = `${22 * books.length}px` // 由每个DOM的总高度算出内层container的高度
innerContainer.style.position = `relative`
container.appendChild(innerContainer)
document.body.appendChild(container)
function load(start, end) {
// 装载需要显示的数据
books.slice(start, end).forEach((bookData, index) => {
// 先生产出享元对象
const flyweightBook = flyweightBookFactory(bookData.category)
const div = divFactory(innerContainer)
// DOM的高度需要由它的序号计算出来
div.getExternalState({innerText: bookData.name, seq: start + index}, () => {
flyweightBook.getExternalState({name: bookData.name})
flyweightBook.print()
})
})
}
load(0, 20)
let cur = 0 // 记录当前加载的首个数据
container.addEventListener('scroll', (e) => {
const start = container.scrollTop / 22 | 0
if (start !== cur) {
load(start, start + 20)
cur = start
}
})
以上代码仅仅使用了2个享元对象，21个DOM对象，就完成了10000条数据的渲染，相比起建立10000个book对象和10000个DOM，性能优化是非常明显的。
以上，水平有限，如有纰漏，欢迎斧正。