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 19 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 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
escape unescape的php下的实现方法
2007/04/27 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python 实现倒排索引的方法
2018/12/25 Python
python中比较两个列表的实例方法
2019/07/04 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
天网工程实施方案
2014/03/26 职场文书
星级党支部申报材料
2014/05/31 职场文书
社会学专业求职信
2014/07/17 职场文书
党员个人整改措施
2014/10/24 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技