欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript使用享元模式实现文件上传优化操作示例

程序员文章站 2022-06-30 18:19:20
本文实例讲述了javascript使用享元模式实现文件上传优化操作。分享给大家供大家参考,具体如下: 一、享元模式是一种用于性能优化的模式,主要优化方式为,若系统中因为创...

本文实例讲述了javascript使用享元模式实现文件上传优化操作。分享给大家供大家参考,具体如下:

一、享元模式是一种用于性能优化的模式,主要优化方式为,若系统中因为创建了大量类似的对象而导致内存占用过高,则可以考虑使用享元模式实现。

二、实例说明:

如果在浏览器中上传文件,若使用常规写法, 每上传一个文件,就会创建一个实例对象;如果上传2000个文件,那就有2000个对象,浏览器很可能出现假死状态。这种情况下,我们考虑适应享元模式。

三、实例:

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 ];
        }
     }
  }
})();

然后需要写一个触发上传动作的startupload函数:

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 );
  }
};

最后调用,如下:

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
   }
]);

四、解释:

调用时,有六个对象,但只有两个类型(plugin和flash),我们通过享元模式,在创建对象时,只有两个,如果上面提到的上传2000个文件,利用上面的代码,同样只创建两个对象,那么这就很好的解决了浏览器崩溃假死的问题。

更多关于javascript相关内容可查看本站专题:《javascript面向对象入门教程》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。