Ejemplo de última optimización de archivo en modo Flyweight de JavaScript

1. El modo Flyweight es un modo para optimizar el rendimiento. El principal método de optimización es que si el sistema tiene un uso elevado de memoria debido a la creación de una gran cantidad de objetos similares, puede considerar utilizar el modo Flyweight.

2. Ejemplo de descripción:

Si carga un archivo en un navegador, si usa escritura convencional, cada vez que carga un archivo, se creará un objeto de instancia; si carga 2000 archivos, habrá 2000 objetos y es probable que el navegador aparezca en un estado de animación suspendida. En este caso, nos planteamos adaptarnos al modelo Flyweight.

3. Ejemplos:

var Upload = function( uploadType ){
    this.uploadType = uploadType;
};

Upload.prototype.delFile = function( id ){
   uploadManager.setExternalState( id, this );
   if( this.fileSize < 300 ){
      return this.dom.parentNode.removeChild( this.dom );
   }

   if( window.confirm('确定要删除该文件吗？' + this.fileName )){
         return this.dom.parentNode.removeChild( this.dom);
    }
};

var UploadFactory = (function(){
    var createdFlyWeightObjs = {};

    return {
        create: function( uploadType ){
            if(createFlyWeightObjs[uploadType]){
               return createdFlyWeightObjs[uploadType];
           }

           return createdFlyWeightObjs[uploadType] = new Upload(uploadType);
        }
    }
})();

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: functon( id, flyWeightObj ){
               var uploadData = uploadDatabase[ id ];
               for( var i in uploadData){
                     flyWeightObj[ i ] = uploadData[ i ];
                }
          }
    }
})();

Luego, debe escribir una función startUpload que active la acción de carga:

var id = o;
window.startUpload = function( uploadType, files ){
    for( var i=0,file; file = fules[ i ++ ];){
         var uploadObj = uploadManger.add( ++id, uploadType, file.fileName, file.fileSize );
    }
};

La última convocatoria es la siguiente:

startUpload( 'plugin', [
    {
       fileName: '1.txt',
       fileSize: 1000
     },
     {
         fileName: '2.html',
         fileSize: 1000
     },
     {
         fileName: '3.txt',
         fileSize: 5000
     }
]);

startUpload( 'flash', [
    {
       fileName: '4.txt',
       fileSize: 1000
     },
     {
         fileName: '5.html',
         fileSize: 1000
     },
     {
         fileName: '6.txt',
         fileSize: 5000
     }
]);

4. Explicación:

Al llamar, hay seis objetos, pero solo hay dos tipos (plugin y flash). Usamos el modo flyweight, al crear objetos, solo hay dos. Si lo mencionado anteriormente carga 2000 archivos, use el código anterior, el mismo Cree solo dos objetos, entonces esta es una buena solución al problema del bloqueo del navegador y la animación suspendida.