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 }
]);