* 一个对象池的简单应用 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. .NET Core 新特性：发布单文件可执行程序

    一.前言 .NET Core 3.0中新增加了一个特性:Publishing Single EXEs,可以通过dotnet publish 命令将整个.net core应用发布为一个可执行文件. 二. ...

  2. SpringBoot中的静态资源访问

    一.说在前面的话 我们之间介绍过SpringBoot自动配置的原理,基本上是如下: xxxxAutoConfiguration:帮我们给容器中自动配置组件: xxxxProperties:配置类来封装 ...

  3. 【springcloud】springcloud Greenwich SR4版本笔记

    springcloud Greenwich SR4版本笔记 本文只记录实际版本,配置,pom,代码以及注意事项.别的在其他springcloud 的F版本中已有详述. 示例代码地址:https://g ...

  4. 编译ffmpeg（第一次），实现JPG转MP4

    ffpmeg网址:http://ffmpeg.org/ ffmpegapi文档:http://ffmpeg.org/doxygen/trunk/index.html 因为这是JPG转MP4,所以不涉及 ...

  5. Consul 入门-运行

    HashiCorp Consul 是由 HashiCorp 公司开发的,它是一家专注于 DevOps 工具链的公司,旗下的明星级产品包括 Vagrant.Terraform.Vault.Nomad 以 ...

  6. springcloud<seata配置文件解释及其说明>

    出现如下错误时: Could not found property service.disableGlobalTransaction, try to use default value instead ...

  7. python matplotlib 绘图+显示数值

    参考:https://www.jb51.net/article/152685.htm 用plt.text函数 import numpy as np import matplotlib.mlab as ...

  8. Seq2Seq sequence-to-sequence模型 简介

    Sequence-to-sequence (seq2seq) 模型. 突破了传统的固定大小输入问题框架 开创了将DNN运用于翻译.聊天(问答)这类序列型任务的先河 并且在各主流语言之间的相互翻译,和语 ...

  9. 老司机带你体验SYS库多种新玩法

    导读 如何更加愉快地利用sys库做一些监控? 快来,跟上老司机,体验sys库的多种新玩法~ MySQL5.7的新特性中,非常突出的特性之一就是sys库,不仅可以通过sys库完成MySQL信息的收集,还 ...

  10. 2021年哪个低代码平台更值得关注？T媒体盘点国内主流低代码厂商

    2020年圣诞前夜,国内知名创投科技媒体T媒体旗下的T研究发布了2020中国低代码平台指数测评报告.报告除了对国内低代码行业现状进行总结外,还对主流低代码厂商的市场渗透和曝光进行测评. 报告认为,低代 ...