* 一个对象池的简单应用 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:

javascript 对象池的更多相关文章

  1. javascript设计模式学习之四——单例模式，缓存与对象池

    单例模式的定义:确保一个实例,并提供全局访问. 惰性单例的定义:只在需要的时候才创建对象. 在开发中,有些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等. java中的单例 关 ...

  2. json与JavaScript对象互换

    1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...

  3. javaScript对象－基本包装类型的详解

    本人按书上的内容大致地把javaScript对象划分成“引用类型”.“基本包装类型”和“内置对象”三块内容. 我们这篇先了解下基本包装类型的详细用法吧! 一.我们先解下相关概念: 1.引用类型的值(对 ...

  4. 如何理解javaScript对象？

    在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...

  5. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

  6. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  7. Javascript对象的方法赋值

    Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method).今天在写代码过程中,又犯了一个低级错误. <!DOCTYPE html> < ...

  8. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

  9. 如何判断Javascript对象是否存在

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...

随机推荐

  1. Java调用阿里云短信接口发送手机验证码

    前五步可参考阿里云服务文档:https://help.aliyun.com/document_detail/59210.html?spm=a2c4g.11174283.4.1.2b152c42DoJ7 ...

  2. Kafka丢数据、重复消费、顺序消费的问题

    面试官:今天我想问下,你觉得Kafka会丢数据吗? 候选者:嗯,使用Kafka时,有可能会有以下场景会丢消息 候选者:比如说,我们用Producer发消息至Broker的时候,就有可能会丢消息 候选者 ...

  3. 深度学习框架如何自动选择最快的算法？Fast Run 让你收获最好的性能！

    作者:王博文 | 旷视 MegEngine 架构师 一.背景 对于深度学习框架来说,网络的训练/推理时间是用户非常看中的.在实际生产条件下,用户设计的 NN 网络是千差万别,即使是同一类数学计算,参数 ...

  4. JavaScript（Node.js）+ Selenium 实现淘宝抢单

    JavaScript(Node.js)+ Selenium 淘宝抢单 为了买买买我也是拼了,看了一点selenium的资料,随便写的. 程序写的比较烂,但是够我自己用了,望各路大牛指教. 使用说明: ...

  5. css内容渐入效果实现

    .fade-in-section { opacity: 0; transform: translateY(20vh); visibility: hidden; transition: opacity ...

  6. 狂神说SpringBoot02：运行原理初探

    狂神说SpringBoot系列连载课程,通俗易懂,基于SpringBoot2.2.5版本,欢迎各位狂粉转发关注学习. 微信公众号:狂神说(首发)    Bilibili:狂神说Java(视频) 未经作 ...

  7. C++ 矩形交集和并集的面积-离散化

    //离散化,x,y坐标分别按从小到大排序 //离散化 //1.首先分离出所有的横坐标和纵坐标分别按升序存入数组X[ ]和Y[ ]中. //2. 设数组XY[ ][ ].对于每个矩形(x1,y1)(x2 ...

  8. @ModelAttribute 与@InitBinder

    3.4.6 @ModelAttribute 注解 Mod lAttribut 通常作用在 Controller 的某个方法上,此方法会首先被调用, 井将方法 结果作为 Model 的属性 然后再调用对 ...

  9. Learning ROS: Using a C++ class in Python

    http://wiki.ros.org/ROS/Tutorials/Using%20a%20C%2B%2B%20class%20in%20Python This tutorial illustrate ...

  10. Linux下Oracle新建用户并且将已有的数据dmp文件导入到新建的用户下的操作流程

    Oracle新建用户并且将已有的数据dmp文件导入到新建的用户下的操作流程 1.切换到oracle用户下 su - oracle 2.登录sqlplus sqlplus /nolog 3.使用sysd ...