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 插件开发 extjs中的extend用法小结
Jan 04 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
Vue表单实例代码
Sep 05 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
基于打包工具Webpack进行项目开发实例
May 29 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
js实现计时器秒表功能
Dec 16 Javascript
js实现无缝轮播图
Mar 09 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中进行身份认证
2006/10/09 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP 断点续传实例详解
2017/11/11 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
Python Trie树实现字典排序
2014/03/28 Python
python字符串对其居中显示的方法
2015/07/11 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
HTML5标签小集
2011/08/02 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
《新型玻璃》教学反思
2014/04/13 职场文书
七一建党日演讲稿
2014/09/05 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python
教你部署vue项目到docker
2022/04/05 Vue.js