javascript 对象池
* 一个对象池的简单应用 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 对象池的更多相关文章
- javascript设计模式学习之四——单例模式,缓存与对象池
单例模式的定义:确保一个实例,并提供全局访问. 惰性单例的定义:只在需要的时候才创建对象. 在开发中,有些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等. java中的单例 关 ...
- json与JavaScript对象互换
1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...
- javaScript对象-基本包装类型的详解
本人按书上的内容大致地把javaScript对象划分成“引用类型”.“基本包装类型”和“内置对象”三块内容. 我们这篇先了解下基本包装类型的详细用法吧! 一.我们先解下相关概念: 1.引用类型的值(对 ...
- 如何理解javaScript对象?
在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- Javascript对象的方法赋值
Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method).今天在写代码过程中,又犯了一个低级错误. <!DOCTYPE html> < ...
- web前端学习(二) javascript对象和原型继承
目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...
- 如何判断Javascript对象是否存在
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
随机推荐
- Sqli-Labs less32-37
Less-32 前置基础知识:宽字节注入 参考链接: https://blog.csdn.net/helloc0de/article/details/76180190 https://blog.csd ...
- 分布式redis自增
redis+springboot RedisUtil.java package com.meeno.chemical.common.redis; import java.util.Date; impo ...
- WPF 绘图 和动画
wpf 的动画:https://www.cnblogs.com/TianFang/p/4050845.html
- 【权限管理】Spring Security 执行流程
转自:https://blog.csdn.net/weixin_37689658/article/details/92752890 1.基本配置使用 (1)创建配置类 创建一个配置类SecurityC ...
- 【maven】私服搭建
转自:https://www.cnblogs.com/likehua/p/4552620.html 一.软件安装 地址:http://www.sonatype.org/nexus/thank-you- ...
- Javascript - Vue - vuex
vuex 这是一个与vue配套的公共数据管理工具,可以将一些需要共享的数据保存到vuex中,以此方便项目中的任何组件都可以从vuex中得到共享数据.cnpm i vuex -S 装包 读取数据 //在 ...
- ES6 class——音乐播放器实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- centos7 查看端口占用情况
2021-08-02 1. 查看端口占用情况 # 查看 8088 端口占用情况 lsof -i tcp:8088 # 若提示没有 lsof 命令, yum 安装一下 yum -y install ls ...
- RabbitMQ从零到集群高可用(.NetCore5.0) -高可用集群构建落地
系列文章: RabbitMQ从零到集群高可用(.NetCore5.0) - RabbitMQ简介和六种工作模式详解 RabbitMQ从零到集群高可用(.NetCore5.0) - 死信队列,延时队列 ...
- Kafka内外网访问
本文介绍了Kafka内外网访问的设置. kafka的两个配置listeners和advertised.listeners listeners kafka监听的网卡的ip,假设你机器上有两张网卡,内网1 ...