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


Posted in Javascript onAugust 07, 2018

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
js模拟实现烟花特效
Mar 10 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 #Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 #Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 #Javascript
深入浅析var,let,const的异同点
Aug 07 #Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 #Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 #Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 #Javascript
You might like
php遍历目录viewDir函数
2009/12/15 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
浅谈Python中的闭包
2015/07/08 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
行政主管职责范本
2014/03/07 职场文书
库房保管员岗位职责
2014/04/07 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
Python的这些库,你知道多少?
2021/06/09 Python
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android