* 适应条件

** 一个程序中使用了大量的相似对象 造成大的内存开销

** 对象的大多数状态都可以变为外部状态

** 剥离出对象的外部状态之后, 可以使用相对较少的共享对象取代大量对象

* 上传文件的例子:

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的更多相关文章

  1. 享元模式-Flyweight(Java实现)

    享元模式-Flyweight 享元模式的主要目的是实现对象的共享,即共享池,当系统中对象多的时候可以减少内存的开销,通常与工厂模式一起使用. 本文中的例子如下: 使用享元模式: 小明想看编程技术的书, ...

  2. 二十四种设计模式：享元模式(Flyweight Pattern)

    享元模式(Flyweight Pattern) 介绍运用共享技术有效地支持大量细粒度的对象. 示例有一个Message实体类,某些对象对它的操作有Insert()和Get()方法,现在要运用共享技术支 ...

  3. 设计模式（十）享元模式Flyweight（结构型）

    设计模式(十)享元模式Flyweight(结构型) 说明: 相对于其它模式,Flyweight模式在PHP实现似乎没有太大的意义,因为PHP的生命周期就在一个请求,请求执行完了,php占用的资源都被释 ...

  4. 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern)

    原文:乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 享元模式(Flyweight Pattern) 作者:weba ...

  5. 享元模式 FlyWeight 结构型 设计模式（十五）

    享元模式(FlyWeight)  “享”取“共享”之意,“元”取“单元”之意. 意图 运用共享技术,有效的支持大量细粒度的对象. 意图解析 面向对象的程序设计中,一切皆是对象,这也就意味着系统的运行将 ...

  6. Java享元模式(Flyweight Pattern)

    享元模式(Flyweight Pattern)主要用于减少创建的对象数量,并减少内存占用并提高性能. 这种类型的设计模式属于结构模式,因为该模式提供了减少对象计数的方法,从而改善应用的对象结构. 享元 ...

  7. 设计模式-11享元模式(Flyweight Pattern)

    1.模式动机 在面向对象程序设计过程中,有时会面临要创建大量相同或相似对象实例的问题.创建那么多的对象将会耗费很多的系统资源,它是系统性能提高的一个瓶颈. 享元模式就是把相同或相似对象的公共部分提取出 ...

  8. 设计模式系列之享元模式(Flyweight Pattern)——实现对象的复用

    说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...

  9. 轻松掌握：JavaScript享元模式

    享元模式 在JavaScript中,浏览器特别是移动端的浏览器分配的内存很有限,如何节省内存就成了一件非常有意义的事情.节省内存的一个有效方法是减少对象的数量. 享元模式(Flyweight),运行共 ...

随机推荐

  1. STM32—ADC详解

    文章目录 一.ADC简介 二.ADC功能框图讲解 1.电压输入范围 2.输入通道 3.转换顺序 4.触发源 5.转换时间 6.数据寄存器 7.中断 8.电压转换 三.初始化结构体 四.单通道电压采集 ...

  2. Spring全家桶--单数据源的配置

    前言 spring数据源的配置网络上有很多例子,这里我也来介绍一下单数据源配置的例子,基于SpringBoot的方式和原生的Spring的方式. 一.生成项目骨架(SpringBoot),运行一个简单 ...

  3. WPF下获取文件运行路径、运行文件名等

    在客户端开发过程中,经常需要获取相对路径的一些资源,而相对路径的就与客户端运行文件的路径息息相关了.在以前的winform开发中,我们可以使用 System.Windows.Forms.Applica ...

  4. Django ORM多表查询

    基于双下划线查询 根据存的时候,字段的数据格式衍生的查询方法 1.年龄大于35岁 res = models.AuthorDetails.objects.filter(age__lt=80) print ...

  5. 多线程之旅(9)_如何安全的取消正在执行的线程——附C#源码

    参考网址: https://blog.csdn.net/yangwohenmai1/article/details/90404497 当线程能流畅安全的自动运行后,我们就要考虑一些更风骚的操作,就是如 ...

  6. TCP三次握手中SYN，ACK，Seq含义

    TCP(Transmission Control Protocol)传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标示 ...

  7. CentOS7 yum方式安装MySQL5.7 + 远程连接

    1 下载并安装MySQL官方的 Yum Repository [root@localhost ~]# wget -i -c http://dev.mysql.com/get/mysql57-commu ...

  8. Spring详解（九）------事务管理

    1.事务介绍 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元(unit). 这里我们以取钱的例子来讲解:比如你去ATM ...

  9. 虚拟机--第二章java内存区域与内存溢出异常--（抄书）

    这是本人阅读周志明老师的<深入理解Java虚拟机>第二版抄写的,有很多省略,不适合直接阅读,需要阅读请出门左转淘宝,右转京东,支持周老师(侵权请联系删除) 第二章java内存区域与内存溢出 ...

  10. YOLO V3 原理

    基本思想V1: 将输入图像分成S*S个格子,每隔格子负责预测中心在此格子中的物体. 每个格子预测B个bounding box及其置信度(confidence score),以及C个类别概率. bbox ...