* 一个对象池的简单应用 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. 003 PCI Express体系结构（三）

    一.PCI总线的存储器读写总线事务 总线的基本任务是实现数据传送,将一组数据从一个设备传送到另一个设备,当然总线也可以将一个设备的数据广播到多个设备.在处理器系统中,这些数据传送都要依赖一定的规则,P ...

  2. 微信小程序开发——后端Java（一）

    一.前言 最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的,然后 ...

  3. 记录一次java项目上线部署

    环境 操作系统:CentOS Linux release 8.0.1905 数据库:mariadb10.3.17 安装数据库 yum install -y mariadb mariadb-server ...

  4. taro小程序展示富文本

    在微信小程序下会用到wxParse这个东西来达到html转换wxml的效果, taro小程序官方也给出了示例,地址 这里封装成自己的组件: import Taro, { Component } fro ...

  5. com 组件的本知识

    (今日看到网络上关于"COM中GUID......"文章,写的好,故记录之.)当初微软设计com规范的时候,有两种选择来保证用户的设计的com组件可以全球唯一:第一种是采用和Int ...

  6. .Net Framwork /.Net Core 发布为NuGet包

    一.使用NuGet发布包 下载NuGet命令行工具: https://dist.nuget.org/win-x86-commandline/v5.8.0/nuget.exe 下载NuGet Packa ...

  7. 【mysql】关联查询_子查询_排序分组优化

    1. 关联查询优化 1.1 left join 结论: ①在优化关联查询时,只有在被驱动表上建立索引才有效! ②left join 时,左侧的为驱动表,右侧为被驱动表! 1.2 inner join ...

  8. 【java web】过滤器filter

    一.过滤器简介 过滤器filter依赖于servlet容器 所谓过滤器顾名思义是用来过滤的,Java的过滤器能够为我们提供系统级别的过滤,也就是说,能过滤所有的web请求, 这一点,是拦截器无法做到的 ...

  9. java 日期格式化-- SimpleDateFormat 的使用。字符串转日期，日期转字符串

    日期和时间格式由 日期和时间模式字符串 指定.在 日期和时间模式字符串 中,未加引号的字母 'A' 到 'Z' 和 'a' 到 'z' 被解释为模式字母,用来表示日期或时间字符串元素.文本可以使用单引 ...

  10. Visual Studio 2022 预览版3 最新功能解说

    我们很高兴地宣布Visual Studio 2022 的第三个预览版问世啦!预览版3 提供了更多关于个人和团队生产力.现代开发和持续创新等主题的新功能.在本文中,我们将重点介绍Visual Studi ...