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 相关文章推荐
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
使用js实现数据格式化
Dec 03 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
基于jquery编写分页插件
Mar 07 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
PHP EOT定界符的使用详解
2008/09/30 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
php-fpm中max_children的配置
2019/03/15 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
js中document.write的那点事
2014/12/12 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
深入理解Python爬虫代理池服务
2018/02/28 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
this关键字的含义
2015/04/08 面试题
Servlet面试题库
2015/07/18 面试题
应届毕业生求职信
2013/11/30 职场文书
《王二小》教学反思
2014/02/27 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
大学新学期计划书
2014/04/28 职场文书
本科毕业生自荐信
2014/06/02 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
文体活动总结
2015/02/04 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
Python Pandas解析读写 CSV 文件
2022/04/11 Python