用享元模式写一个文件上传控件

享元（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对象，在大部分不必要使用享元模式的环境下，这些开销是可以避免的。

享元模式带来的好处很大程度上取决于如何使用以及何时使用，一般来说，以下情况发生时便可以使用享元模式。

• 一个程序中使用了大量的相似对象。
• 由于使用了大量对象，造成很大的内存开销。
• 对象的大多数状态都可以变为外部状态。
• 剥离出对象的外部状态之后，可以用相对较少的共享对象取代大量对象。

可以看到，文件上传的例子完全符合这四点。