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 相关文章推荐
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
jquery replace方法去空格
May 08 jQuery
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
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
?繁体转换的class
2006/10/09 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
如何基于Python实现自动扫雷
2020/01/06 Python
学python最电脑配置有要求么
2020/07/05 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
医学生自我评价
2014/01/27 职场文书
索桥的故事教学反思
2014/02/06 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书