javascript设计模式14享元模式

享元(flyweight)模式 是一种用户性能优化的模式。核心是运用共享技术来有效支持大量细粒度的对象。

享元模式的关键是区分对象的内部状态和外部状态，并把它们分离开来。

一般来说，发生以下情况时使用享元模式，才能为我们带来最大好处

1.程序中使用了大量相似的对象

2.由于使用了大量对象，造成了很大的内存开销

3.对象的大多数状态可以变为外部状态

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

 

//使用享元模式重构文件上传
var upload = function(uploadType){
	this.uploadType = uploadType;
}

upload.prototype.delFile = function(id){
	if(this.fileSize <　3000){
		return this.dom.parentNode.removeChild(this.dom)
	}

	if(window.confirm('确定要删除该文件？'+this.filename)){
		return this.dom.parentNode.removeChild(this.dom)
	}
}

// 创建享元对象
var uploadFactory = (function(){
	var createFlyweightObjs = {}
	return {
		create:function(uploadType){
			if( createFlyweightObjs[uploadType]){
				return createFlyweightObjs[uploadType]
			}else{
				return createFlyweightObjs[uploadType] = new upload(uploadType)
			}
		}
	}
})()

// 管理外部状态
var uploadManager = （function(){
	var uploadDatabase = {}
	return {
		add: function(id, uplaodType, 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 = funciton(){
				flyWeightObj.delFile(id)
			}
			document.body.appendChild(dom)

			uploadDatabase[id] ={
				fileName : fileName,
				fileSize: fileSize,
				dom: dom
			}

			return flyWeightObj;
		},
		setExternalState:function(id, flyWeightObj){
			var uploadData = uploadDatabase[id]
			for(var i in uploadData){
				flyWeightObj[i] = uploadData[i]
			}
		}
	}
}()

var id = 0 ;
window.startUpload = function(uploadType, files){
	for(var i = 0 , file; file = files[i++];){
		var uploadObj = uploadManager.add(++id,uploadType, file.fileName,file.fileSize)
	}
}

// 对象池技术 toolTipFactory
var toolTipFactory = (function(){
	var toolTips = []
	return {
		create :function(){
			if(tooltips.length == 0){
				var div = document.createElement('div')
				document.body.appendChild(div)
				return div
			}else{
				return toolTips.shift()
			}
		},
		recover:function(tooltipDom){
			return tooltips.push(tooltipDom)
		}
	}
})()

// 通用对象池技术实现
var objectPoolFactory = function(createObjFn){
	var objPool = [];
	return {
		create:function(){
			var obj = objPool.length === 0 ? createObjFn.apply(this, arguments) : objPool.shift()
			return obj ;
		},
		recover: function(obj){
			objPool.push(obj)
		}

	}
}

var iframeFactory = objectPoolFactory(function(){
	var iframe = document.createElement('iframe')
	document.body.appendChild(iframe)
	iframe.onload = function(){
		iframe.onload = null
		iframeFactory.recover(iframe)
	}

	return iframe
})

var iframe1 = iframeFactory.create();
iframe1.src = "baidu.com"

var iframe2 = iframeFactory.create()
iframe2.src = "qq.com"