* 一个对象池的简单应用 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. SQL 练习30

    查询所有学生的课程及分数情况(存在学生没成绩,没选课的情况) SELECT Student.*,CId,score from Student LEFT JOIN SC ON Student.SId = ...

  2. C# 获取计算机的硬件、操作系统信息

    C# 获取计算机的硬件.操作系统信息   获得信息的命名空间是:System.Management 创建ManagementObjectSearcher对象获取相关信息 eg: using Syste ...

  3. C#与.NET、CLR、CLI是什么关系？什么是.NET框架

    1.C#与.NET.CLR.CLI是什么关系?什么是.NET框架?      这个问题好专业啊!一句话两句话还真不好说清.您听说过C++中有个COM的概念吧?您听说过JAVA里的虚拟机吧?CLR(公共 ...

  4. Java File常见用法

    一.构造方法 File(File parent, String child) 从父抽象路径名和子路径名字符串创建新的 File实例. File(String pathname) 通过将给定的路径名字符 ...

  5. Linux命令：ps -ef |grep java

    一.ps -ef |grep java 查看包含"java"的所有进程 二.涉及命令详解 ps命令将某个进程显示出来(是LINUX下最常用的也是非常强大的进程查看命令) grep命 ...

  6. CentOS 6.x 系统中安装原生 Hadoop 2

    2020年整理博客发现原文地址已经失效,推荐学习地址厦门大学数据库实验室 本教程适合于在 CentOS 6.x 系统中安装原生 Hadoop 2,适用于Hadoop 2.7.1, Hadoop 2.6 ...

  7. 关于MYSQL5.7：Access denied for user 'root'@'localhost' (using password:YES)解决

    这一类解决要提供远程服务,需要进入mysql的my.ini文件中进行修改,但是在win10系统中,my.ini不再放在MYSQL安装目录的根目录中了,需要到一类应用缓存目录中寻找MYSQL的详细配置文 ...

  8. 关于在mysql和oracle中编码对varchar等类型的影响

    今天在测试oracle的时候发现,我用varchar2(10),的字段,居然存不下"凯尔特人"四个字符:和我在学习mysql中显然是不一样的,查阅资料发现: mysql 5.0 之 ...

  9. Go: 复合数据类型struct

    结构体 结构体是将零个或多个任意类型的命名变量组合在一起的聚合数据类型.每个变量都叫做结构体的成员. type Employee struct { ID int Name string age int ...

  10. TDSQL MySQL版基本原理-水平分表 读写分离 弹性扩展 强同步

    TDSQL MySQL版(TDSQL for MySQL)是部署在腾讯云上的一种支持自动水平拆分.Shared Nothing 架构的分布式数据库.TDSQL MySQL版 即业务获取的是完整的逻辑库 ...