javascript 对象池

* 一个对象池的简单应用 tool tip

tootip.html

<html>
<head>
	<meta charset="UTF-8">
	<title>tool tip</title>
</head>
<body>
	<script type="text/javascript" src="js/toolTip.js"></script>
</body>
</html>

　　

js/toolTip.js

var toolTipFactory = (function() {
    var toolTipPool = [];

    return {
        create: function() {
            if (toolTipPool.length === 0) {
                var div = document.createElement("div");
                document.body.appendChild(div);
                console.log("div created");
                return div;
            } else {
                return toolTipPool.shift();
            }
        },
        recover: function(toolTipDom) {
            return toolTipPool.push(toolTipDom);
        }
    }
})();

var a = [];
for (var i = 0, str; str = ['A', 'B'][i]; i++) {
    var toolTip = toolTipFactory.create();
    toolTip.innerHTML = str;
    a.push(toolTip);
}
// 回收进对象池
a.forEach(function(toolTip) {
    toolTipFactory.recover(toolTip);
});

// 再创建6个小气泡
setTimeout(function() {
    ['A', 'B', 'C', 'D', 'E', 'F'].forEach(function(str) {
        var toolTip = toolTipFactory.create();
        toolTip.innerHTML = str;
    });
}, 500);

　　

Run:

php -S 0.0.0.0:9000

　　

A, B没有重复创建

* 通用对象池的实现

iframe.html

<html>
<head>
	<meta charset="UTF-8">
	<title>通用对象池 创建iframe测试</title>
</head>
<body>
	<script src="./js/iframe.js"></script>
</body>
</html>

　　

js/iframe.js

var objectPoolFactory = function(createObjFn) {
	var objectPool = [];

	return {
		create: function() {
			var obj = objectPool.length === 0 ?
				createObjFn.apply(this, arguments) : objectPool.shift();
			return obj;
		},
		recover: function(obj) {
			objectPool.push(obj);
		}
	}
};

// test
var iframeFactory = objectPoolFactory(function() {
	var iframe = document.createElement('iframe');
	document.body.appendChild(iframe);

	iframe.onload = function() {
		iframe.onload = null;   // 防止iframe重复加载
		iframeFactory.recover(iframe); // iframe加载完了回收节点
	}
	return iframe;
});

var iframe1 = iframeFactory.create();
iframe1.src = 'https://www.baidu.com';

var iframe2 = iframeFactory.create();
iframe2.src = 'http://www.qq.com/';

setTimeout(function() {
	var iframe3 = iframeFactory.create();
	iframe3.src = 'http://www.163.com';
}, 750);

　　

Run: