* 一个对象池的简单应用 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. Qt Model/View（模型/视图）结构（无师自通）

    Model/View(模型/视图)结构是 Qt 中用界面组件显示与编辑数据的一种结构,视图(View)是显示和编辑数据的界面组件,模型(Model)是视图与原始数据之间的接口. GUI 应用程序的一个 ...

  2. C# ThreadLocal源码追踪

    ThreadLocal 字段成员: private Func<T>? _valueFactory; 一个获取默认值的委托 不同线程共享此成员. [ThreadStatic] private ...

  3. 这样设计 Java 异常更优雅

    转自:lrwinx.github.io/2016/04/28/如何优雅的设计java异常/ 导语 异常处理是程序开发中必不可少操作之一,但如何正确优雅的对异常进行处理确是一门学问,笔者根据自己的开发经 ...

  4. Java第一阶段项目实训

    时间:2016-3-27 17:09 银行综合业务平台业务需求 1.首页  ---------------银行综合业务平台------------------- 1开户     2登录    3.退出 ...

  5. 12-SpringCloud GateWay

    GateWay和Zuul说明 Zuul开发人员窝里斗,实属明日黄花 重点关注Gate Way GateWay是什么 上一代zuul 1.x官网 Gateway官网 概述 Cloud全家桶中有个很重要的 ...

  6. Linkerd 2.10(Step by Step)—配置超时

    Linkerd 2.10 系列 快速上手 Linkerd v2 Service Mesh(服务网格) 腾讯云 K8S 集群实战 Service Mesh-Linkerd2 & Traefik2 ...

  7. C++小坑汇总

    std::vector::end, 是构想的下一个push_back位置,并不实际指向vector中任何元素. Returns an iterator referring to the past-th ...

  8. k8s笔记0528-基于KUBERNETES构建企业容器云手动部署集群记录-6

    1.创建一个测试用的deployment [root@linux-node1 ~]# kubectl run net-test --image=alpine --replicas=2 sleep 36 ...

  9. 性能测试工具JMeter 基础（八）—— 测试元件： 逻辑控制器之事物控制器

    事物控制器是将控制器下的所有取样器作为一个事物统计.分析 事物控制器(Transaction Controller) 事务控制器一共有两个选项: Generate parent sample:默认不勾 ...

  10. 你的 JVM 基础“大厦”稳健吗？

    [从 1 开始学 JVM 系列] JVM 对于每位 Java 语言编程者来说无疑是"重中之重",尽管我们每天都在与它打交道,却很少来审视它.了解它,慢慢地,它成为了我们" ...