javascript 享元模式 flyweight
* 适应条件
** 一个程序中使用了大量的相似对象 造成大的内存开销
** 对象的大多数状态都可以变为外部状态
** 剥离出对象的外部状态之后, 可以使用相对较少的共享对象取代大量对象
* 上传文件的例子:
index.html
<html>
<head>
<meta charset="UTF-8">
<title>一个上传多个文件的例子</title>
</head>
<body>
<script src="js/upload.js"></script>
</body>
</html>
js/upload.js
function Upload(uploadType) {
this.uploadTpye = uploadType;
}
var UploadFactory = (function() {
var c = {}; // cache
return {
// @param t: uploadType
create: function(t) {
if (c[ t ]) {
return c[ t ];
}
return c[ t ] = new Upload( t );
}
}
})();
var uploadManager = (function() {
// uploadDatabase
var db = {}, autoInc = 1;
return {
add: function(uploadType, file) {
var o = UploadFactory.create(uploadType),
id = autoInc++;
var dom = document.createElement('div');
dom.setAttribute("data-id", id); // debug
dom.innerHTML =
"<span>文件名称: " + file.fileName + ", 文件大小: " + file.fileSize + "</span>" +
"<button class='delFile'>删除</button>";
dom.querySelector(".delFile").onclick = function() {
o.delFile(id);
};
document.body.appendChild(dom);
db[ id ] = {
fileName: file.fileName,
fileSize: file.fileSize,
dom: dom
};
return o;
},
setExternalState: function(id, o) {
var uploadData = db[id];
Object.keys(uploadData).forEach(function(prop) {
o[ prop ] = uploadData[ prop ];
});
}
}
})();
Upload.prototype.delFile = function(id) {
uploadManager.setExternalState(id, this);
if (this.fileSize < 3000) {
return this.dom.parentNode.removeChild(this.dom);
}
if (window.confirm('确定要删除该文件吗?' + this.fileName)) {
return this.dom.parentNode.removeChild(this.dom);
}
}
window.startUpload = function(uploadType, files) {
files.forEach(function(file) {
var uploadObj = uploadManager.add(uploadType, file);
});
};
startUpload('plugin', [
{ fileName: '1.txt', fileSize: 1000 },
{ fileName: '2.html', fileSize: 3000 },
{ fileName: '3.txt', fileSize: 5000 }
]);
startUpload('flash', [
{ fileName: '1.txt', fileSize: 1000 },
{ fileName: '2.html', fileSize: 3000 },
{ fileName: '3.txt', fileSize: 5000 }
]);
javascript 享元模式 flyweight的更多相关文章
- 享元模式-Flyweight(Java实现)
享元模式-Flyweight 享元模式的主要目的是实现对象的共享,即共享池,当系统中对象多的时候可以减少内存的开销,通常与工厂模式一起使用. 本文中的例子如下: 使用享元模式: 小明想看编程技术的书, ...
- 二十四种设计模式：享元模式(Flyweight Pattern)
享元模式(Flyweight Pattern) 介绍运用共享技术有效地支持大量细粒度的对象. 示例有一个Message实体类,某些对象对它的操作有Insert()和Get()方法,现在要运用共享技术支 ...
- 设计模式（十）享元模式Flyweight（结构型）
设计模式(十)享元模式Flyweight(结构型) 说明: 相对于其它模式,Flyweight模式在PHP实现似乎没有太大的意义,因为PHP的生命周期就在一个请求,请求执行完了,php占用的资源都被释 ...
- 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern)
原文:乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) 作者:weba ...
- 享元模式 FlyWeight 结构型 设计模式（十五）
享元模式(FlyWeight) “享”取“共享”之意,“元”取“单元”之意. 意图 运用共享技术,有效的支持大量细粒度的对象. 意图解析 面向对象的程序设计中,一切皆是对象,这也就意味着系统的运行将 ...
- Java享元模式(Flyweight Pattern)
享元模式(Flyweight Pattern)主要用于减少创建的对象数量,并减少内存占用并提高性能. 这种类型的设计模式属于结构模式,因为该模式提供了减少对象计数的方法,从而改善应用的对象结构. 享元 ...
- 设计模式-11享元模式(Flyweight Pattern)
1.模式动机 在面向对象程序设计过程中,有时会面临要创建大量相同或相似对象实例的问题.创建那么多的对象将会耗费很多的系统资源,它是系统性能提高的一个瓶颈. 享元模式就是把相同或相似对象的公共部分提取出 ...
- 设计模式系列之享元模式(Flyweight Pattern)——实现对象的复用
说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...
- 轻松掌握：JavaScript享元模式
享元模式 在JavaScript中,浏览器特别是移动端的浏览器分配的内存很有限,如何节省内存就成了一件非常有意义的事情.节省内存的一个有效方法是减少对象的数量. 享元模式(Flyweight),运行共 ...
随机推荐
- Linux搭建VNC servere服务
此安装方法只适用于centos7以上的版本 一,安装 以root用户运行以下命令来安装vncserver; yum install tigervnc-server 同样运行以下命令来安装vncvie ...
- CMD下编译运行Java程序
准备1:JDK下好了 准备2:环境变量配置好了 准备3:本次测试用的是JDK8,用JDK10的在Eclipse里面好像用不了 满足上面三个条件,那可以继续看下去了 Test_1:带包编译运行 代码: ...
- 如何快速排查发现redis的bigkey？4种方案一次性给到你！
本篇文章将以redis的bigkey为主题进行技术展开,通过从认识redis的高性能,bigkey的危害.存在原因.4种解决方案,到模拟实战演练的介绍方式,来跟大家一起认识.探讨和学习redis. 先 ...
- 菜鸟的springboot常用注解总结
菜鸟的springboot常用注解总结 0.前言 可以毫不夸张地说,这篇文章介绍的 Spring/SpringBoot 常用注解基本已经涵盖你工作中遇到的大部分常用的场景.对于每一个注解我都说了具体用 ...
- C++智能指针的原理和实现
一.智能指针起因 在C++中,动态内存的管理是由程序员自己申请和释放的,用一对运算符完成:new和delete. new:在动态内存中为对象分配一块空间并返回一个指向该对象的指针: delete:指向 ...
- 解决log4net多进程日志文件被占用
<log4net debug="true"> <appender name="RollingLogFileAppender" type=&qu ...
- 【转】Linux命令：ps -ef |grep java
转自:https://www.cnblogs.com/feizifeiyu/p/8492550.html 一.ps -ef |grep java 查看包含"java"的所有进程 二 ...
- Java编码的问题
<转> 由于JDK是国际版的,在编译的时候,如果我们没有用-encoding参数指定我们的Java源程序的编码格式,则javac.exe首先获得我们操作系统默认采用的编码格式,也即在编译j ...
- nios eclipse提示LED_PIO_BASE没有声明，怎么回事？
这是因为名字不一致引起的比如,在生成SOPC系统时,双击PIO(Parallel I/O)(在Avalon Modules -> Other 下),为系统添加输出接口,你没有把该组件改名成LED ...
- vue 引入 tcplayer，并且实现视频点播，腾讯点播
这篇文章仅用于上传到 腾讯的视频点播,上传到腾讯视频请看上一篇文章,话不多说,直接上代码 <template> <div> <video :id="tcPlay ...