享元（flyweight）模式是一种用于性能优化的模式，“fly”在这里是苍蝇的意思，意为蝇量级。享元模式的核心是运用共享技术来有效支持大量细粒度的对象。
如果系统中因为创建了大量类似的对象而导致内存占用过高，享元模式就非常有用了。在JavaScript中，浏览器特别是移动端的浏览器分配的内存并不算多，如何节省内存就成了一件非常有意义的事情。
网盘文件上传功能
通常情况下文件上传可以这样写，每个待上传的文件可以生成一个upload实例，然后实现自己的上传操作。
let id=0
window.startUpload=function(uploadType,files){
for(let i=0,file;file=files[i++];){
let uploadObj=new Upload(uploadType,file.fileName,file.fileSize)
uploadObj.init(id++)
}
}
const Upload=function(uploadType,fileName,fileSize){
this.uploadType=uploadType
this.fileName=fileName
this.fileSize=fileSize
this.dom=null
}
Upload.prototype.init=function(id){
let 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)
}
}
startUpload( 'plugin', [
{
fileName: '1.txt',
fileSize: 1000
},
{
fileName: '2.html',
fileSize: 3000
},
{
fileName: '3.txt',
fileSize: 5000
}
]);
startUpload( 'flash', [
{
fileName: '4.txt',
fileSize: 1000
},
{
fileName: '5.html',
fileSize: 3000
},
{
fileName: '6.txt',
fileSize: 5000
}
]);
但这样问题也很明显，待上传文件列队如果有2000个文件，那么就要生成2000个upload实例，这无疑是很小号内存的。
享元模式重构文件上传
在文件上传的例子里，upload对象必须依赖uploadType属性才能工作，这是因为插件上传、Flash上传、表单上传的实际工作原理有很大的区别，它们各自调用的接口也是完全不一样的，必须在对象创建之初就明确它是什么类型的插件，才可以在程序的运行过程中，让它们分别调用各自的start、pause、cancel、del等方法。
let Upload = function (uploadType) {
this.uploadType = uploadType
}
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)
}
}
const UploadFactory = (function () {
let createdFlyWeightObjs = {}
return {
create: function (uploadType) {
if (createdFlyWeightObjs[uploadType]) {
return createdFlyWeightObjs[uploadType]
}
return createdFlyWeightObjs[uploadType] = new Upload(uploadType)
}
}
})()
const uploadManager = (function () {
let uploadDatabase = {}
return {
add: function (id, uploadType, fileName, fileSize) {
let flyWeightObj = UploadFactory.create(uploadType)
let 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,
fileSize,
dom
}
return flyWeightObj
},
setExternalState:function(id,flyWeightObj){
let uploadData=uploadDatabase[id]
for(let i in uploadData){
flyWeightObj[i]=uploadData[i]
}
}
}
})()
let id=0
window.startUpload=function(uploadType,files){
for(let i=0,file;file=files[i++];){
let uploadObj=uploadManager.add(++id,uploadType,file.fileName,file.fileSize)
}
}
startUpload( 'plugin', [
{
fileName: '1.txt',
fileSize: 1000
},
{
fileName: '2.html',
fileSize: 3000
},
{
fileName: '3.txt',
fileSize: 5000
}
]);
startUpload( 'flash', [
{
fileName: '4.txt',
fileSize: 1000
},
{
fileName: '5.html',
fileSize: 3000
},
{
fileName: '6.txt',
fileSize: 5000
}
]);
使用享元模式后，无论有多少待上传文件，也只会生成两个upload对象。
享元模式的实用性
享元模式是一种很好的性能优化方案，但它也会带来一些复杂性的问题，从前面两组代码的比较可以看到，使用了享元模式之后，我们需要分别多维护一个factory对象和一个manager对象，在大部分不必要使用享元模式的环境下，这些开销是可以避免的。
享元模式带来的好处很大程度上取决于如何使用以及何时使用，一般来说，以下情况发生时便可以使用享元模式。
- 一个程序中使用了大量的相似对象。
- 由于使用了大量对象，造成很大的内存开销。
- 对象的大多数状态都可以变为外部状态。
- 剥离出对象的外部状态之后，可以用相对较少的共享对象取代大量对象。
可以看到，文件上传的例子完全符合这四点。
网友评论