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中的onerror事件概述及使用
Apr 01 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 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
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Python ORM编程基础示例
2020/02/02 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Python装饰器结合递归原理解析
2020/07/02 Python
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
医护人员英文求职信范文
2013/11/26 职场文书
岗位职责的构建方法
2014/02/01 职场文书
致共产党员倡议书
2014/04/16 职场文书
高中班主任评语大全
2014/04/25 职场文书
设备售后服务承诺书
2014/05/30 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python