js常用设计模式7-享元模式
js常用设计模式1-单例模式
js常用设计模式2-策略模式
js常用设计模式3-代理模式
js常用设计模式4-发布-订阅模式
js常用设计模式5-命令模式
js常用设计模式6-组合模式
js常用设计模式7-享元模式
js常用设计模式8-职责链模式
js常用设计模式9-中介者模式
js常用设计模式10-装饰者模式
js常用设计模式11-状态模式
享元模式是一种用于性能优化的模式，核心是运用共享技术来有效支持大量细粒度的对象。
如果系统中创建了大量类似的对象，导致内存占用过高，这时候享元模式就很有用了。
1，假发工厂
假设有一个假发工厂，生产50种男士假发和50种女士假发，这时候我们需要50个男模和50个女模，分别套上假发，然后拍照：
var Model = function (sex, underware) {
this.sex = sex
this.underware = underware
}
Model.prototype.takePhoto = function () {
console.log('sex:' + this.sex + 'underware:' + this.underware)
}
for (var i = 0; i < 50; i++) {
var maleModel = new Model('男', 'underware' + i)
maleModel.takePhoto()
}
for (var i = 0; i < 50; i++) {
var femaleModel = new Model('女', 'underware' + i)
femaleModel.takePhoto()
}
很明显，这种做法略显沙雕。
2，享元模式优化
实际上，我们只需要两个模特就够了，假发换着套就行。
//效果一样，感觉好多了
var Model = function (sex) {
this.sex = sex
}
Model.prototype.takePhoto = function () {
console.log('sex:' + this.sex + 'underware:' + this.underware)
}
var maleModel = new Model('男')
var femaleModel = new Model('女')
for (var i = 0; i < 50; i++) {
maleModel.underware = 'underware' + i
maleModel.takePhoto()
}
for (var i = 0; i < 50; i++) {
femaleModel.underware = 'underware' + i
femaleModel.takePhoto()
}
3，内部状态与外部状态
享元模式的目标是尽量减少共享对象的数量：
（1）内部状态存储于对象内部
（2）内部状态可以被一些对象共享
（3）内部状态独立于具体的场景
（4）外部状态取决于具体的场景，并根据场景而变化，外部状态不能被共享
享元模式是一种时间换空间的优化模式
4，普通版本上传文件的例子
现在我们要实现一个功能：往服务器上传文件。假设目前只有两种上传方式：插件上传和flash上传。这俩实现是一样的，选择文件之后，都会调用window下的startUpload方法，用户选择的文件列表被组合成一个数组files放到该函数的参数列表中。
代码如下:
var id = 0;
//uploadType区分是插件上传还是flash
window.startUpload = function (uploadType, files) {
for (var i = 0, file; file = files[i++];) {
var upload = new Upload(uploadType, file.fileName, file.fileSize)
upload.init(id++)
}
}
用户选择完文件后，startUpload函数会遍历files数组，挨个创建对应的upload对象。现在我们要定义Upload构造函数，除了初始化init函数之外，我们还需要一个删除函数delFile。代码如下：
// uploadType：上传类型, fileName：文件名, fileSize：文件大小
var Upload = function (uploadType, fileName, fileSize) {
this.uploadType = uploadType
this.fileName = fileName
this.fileSize = fileSize
this.dom = null
}
Upload.prototype.init = function (id) {
var that = this
this.id = id
this.dom = document.createElement('div')
this.dom.innerHTML = `<span>文件名称：${this.fileName},文件大小：${this.fileSize}</span><button class="delFile">删除</button>`
this.dom.querySelector('.delFile').onclick = function () {
that.delFile()
}
document.body.appendChild(this.dom)
}
Upload.prototype.delFile = function () {
if (this.fileSize < 3000) {
return this.dom.parentNode.removeChild(this.dom)
}
if (window.confirm('确定删除该文件吗？' + this.fileName)) {
return this.dom.parentNode.removeChild(this.dom)
}
}
现在，让我们来try一try：
startUpload('plugin', [
{
fileName: '1.txt',
fileSize: 1000
},
{
fileName: '2.txt',
fileSize: 3000
},
{
fileName: '3.txt',
fileSize: 5000
}
])
startUpload('flash', [
{
fileName: '4.txt',
fileSize: 1000
},
{
fileName: '5.txt',
fileSize: 3000
},
{
fileName: '6.txt',
fileSize: 5000
}
])
5，享元模式优化文件上传
上面这个上传功能，有多少个需要上传的对象，就创建了多少个upload对象，非常的浪费。下面，我们用享元模式来重构它。
（1）首先，要明确内部状态
upload对象依赖于upLoadType属性，由于我们现在是简化版的上传，因此只要明确了upLoadType，这个upload对象是可以被其他文件共享的。而fileName、fileSize都不一样，因此这俩是外部状态。
（2）剥离外部状态
现在，我们的Upload构造函数中，只需要upLoadType这一个参数就可以：
var Upload = function (uploadType) {
this.uploadType = uploadType
}
Upload.prototype.init函数也不需要了，现在upload对象的初始化被放在了uploadManager.add这个函数中。
接下来我们只需要定义Upload.prototype.delFile函数就ok：
Upload.prototype.delFile = function (id) {
// 删除之前，读取文件实际大小
uploadManager.setExternalState(id, this)
if (this.fileSize < 3000) {
return this.dom.parentNode.removeChild(this.dom)
}
if (window.confirm('确定删除该文件吗？' + this.fileName)) {
return this.dom.parentNode.removeChild(this.dom)
}
}
（3）工厂函数进行对象实例化
定义一个工厂，用来创建upload对象，如果某种内部状态（upLoadType）的对象已经被创建过，那么直接返回这个对象，否则创建新的对象：
var UploadFactory = (function () {
var createdFlyWeightObjs = {}
return {
create: function (uploadType) {
if (createdFlyWeightObjs[uploadType]) {
return createdFlyWeightObjs[uploadType]
}
return createdFlyWeightObjs[uploadType] = new Upload(uploadType)
}
}
})()
（4）管理器封装外部状态
在（2）中我们提到了uploadManager对象，这个对象负责向UploadFactory提交创建对象的请求，并用一个uploadDatabase对象保存所有的upload对象的外部状态，以便在程序运行中给upload共享对象设置外部状态：
var uploadManager = (function () {
var uploadDatabase = {}
return {
add: function (id, uploadType, fileName, fileSize) {
var flyWeightObj = UploadFactory.create(uploadType)
var dom = document.createElement('div')
dom.innerHTML = `<span>文件名称：${fileName},文件大小：${fileSize}</span><button class="delFile">删除</button>`
dom.querySelector('.delFile').onclick = function () {
flyWeightObj.delFile(id)
}
document.body.appendChild(dom)
uploadDatabase[id] = {
fileName: fileName,
fileSize: fileSize,
dom: dom
}
return flyWeightObj
},
setExternalState: function (id, flyWeightObj) {
var uploadData = uploadDatabase[id]
for (var i in uploadData) {
flyWeightObj[i] = uploadData[i]
}
}
}
})()
现在，我们要触发startUpload 操作了：
var id = 0;
window.startUpload = function (uploadType, files) {
for (var i = 0, file; file = files[i++];) {
var uploadObj = uploadManager.add(++id, uploadType, file.fileName, file.fileSize)
}
}
让我们try一try最后的效果：
startUpload('plugin', [
{
fileName: '1.txt',
fileSize: 1000
},
{
fileName: '2.txt',
fileSize: 3000
},
{
fileName: '3.txt',
fileSize: 5000
}
])
startUpload('flash', [
{
fileName: '4.txt',
fileSize: 1000
},
{
fileName: '5.txt',
fileSize: 3000
},
{
fileName: '6.txt',
fileSize: 5000
}
])
6，小结
享元模式是一个很好的性能优化方案，但是因为多了uploadManager和UploadFactory 对象，也会带来维护问题。
享元模式适用场景：
- 一个程序中大量使用相似对象
- 对于使用大量对象，造成了很大的内存开销
- 对象的大多数状态可以变为外部状态
- 剥离对象的外部状态后，可以用较少的共享对象取代大量对象
