js设计模式-享元模式
享元模式实际上是一种优化模式，目的在于提高系统的性能和代码的效率。
使用享元模式的条件：最重要的条件是网页中必须使用了大量资源密集型对象，如果只会用到了少许这类对象，那么这种优化并不划算。第二个条件是这些对象中所保存的数据至少有一部分能被转换为外在的数据。最后一个条件是，将外在的数据分离出去以后，独一无二的对象的数目相对减少。
使用享元模式的步骤：1、将所有外在的数据从目标类剥离。2、创建一个用来控制该类的实例化工厂。3、创建一个用来保存外在数据的管理器。
实例：工具提示对象。（Tooltip）
先看一个没有用到享元模式的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>工具提示对象</title>
<style type="text/css">
.test-div{
width:100px; heiht:30px;text-align:center; line-height: 30px; cursor: pointer;border:1px solid #101010; margin-top:20px;
}
.tooltip{
height:20px; line-height: 20px; border: 1px solid #ccc; border-radius: 2px; font-family: monospace; font-size: 12px;
background: #ddd; padding:2px 5px;
}
</style>
</head>
<body>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
</body>
</html>
<script type="text/javascript"> window.onload = function(){
var aDiv = document.getElementsByTagName("div");
for(var i = 0 , len = aDiv.length;i<len;i++){
new Tooltip(aDiv[i],"this is a div, the index is:" + i);
}
} var Tooltip = function(targetElement,text){
this.target = targetElement;
this.text = text; this.delayTimeout = null; // show tooltip timer
this.delay = 500; // 延时时长 //create the html this.element = document.createElement("div");
this.element.style.display = "none";
this.element.style.position = "absolute";
this.element.className = "tooltip";
document.getElementsByTagName("body")[0].appendChild(this.element);
this.element.innerHTML = this.text; //attach the events var that = this;
this.target.addEventListener("mouseover",function(e){
that.startDelay(e);
}); this.target.addEventListener("mouseout",function(){
that.hide();
})
}; Tooltip.prototype = {
startDelay:function(e){
if(this.delayTimeout == null){
var that = this;
var x = e.clientX;
var y = e.clientY;
this.delayTimeout = setTimeout(function(){
that.show(x,y);
},this.delay);
}
},
show:function(x,y){
clearTimeout(this.delayTimeout);
this.element.style.left = x + "px";
this.element.style.top = y + "px";
this.element.style.display = "block";
},
hide:function(){
clearTimeout(this.delayTimeout);
this.delayTimeout = null;
this.element.style.display = "none";
}
} </script>
结果：把鼠标放到每个div上以后，用debug查看element元素，会发现生成很多tooltip的div。
使用享元模式以后：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>工具提示对象</title>
<style type="text/css">
.test-div{
width:100px; heiht:30px;text-align:center; line-height: 30px; cursor: pointer;border:1px solid #101010; margin-top:20px;
}
.tooltip{
height:20px; line-height: 20px; border: 1px solid #ccc; border-radius: 2px; font-family: monospace; font-size: 12px;
background: #ddd; padding:2px 5px;
}
</style>
</head>
<body>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
<div class="test-div">test div</div>
</body>
</html>
<script type="text/javascript" src="ToolTip.js"></script>
<script type="text/javascript">
window.onload = function(){
var aDiv = document.getElementsByTagName("div");
for(var i = 0 , len = aDiv.length;i<len;i++){
TooltipManager.addTooltip(aDiv[i],"this is a div, the index is:" + i);
}
}
</script>
对应的js:
var TooltipManager = (function(){
var storedInstance = null;
/*Tooltip class*/
var Tooltip = function(){
this.delayTimeout = null; // show tooltip timer
this.delay = 500; // 延时时长
//create the html
this.element = document.createElement("div");
this.element.style.display = "none";
this.element.style.position = "absolute";
this.element.className = "tooltip";
document.getElementsByTagName("body")[0].appendChild(this.element);
};
Tooltip.prototype = {
startDelay:function(e,text){
if(this.delayTimeout == null){
var that = this;
var x = e.clientX;
var y = e.clientY;
this.delayTimeout = setTimeout(function(){
that.show(x,y,text);
},this.delay);
}
},
show:function(x,y,text){
clearTimeout(this.delayTimeout);
this.element.style.left = x + "px";
this.element.style.top = y + "px";
this.element.style.display = "block";
this.element.innerHTML = text;
},
hide:function(){
clearTimeout(this.delayTimeout);
this.delayTimeout = null;
this.element.style.display = "none";
}
};
return {
addTooltip:function(targetElement,text){
var tt = this.getToolTip();
targetElement.addEventListener("mouseover",function(e){tt.startDelay(e,text)});
targetElement.addEventListener("mouseout",function(e){tt.hide()});
},
getToolTip:function(){
if(null == storedInstance){
storedInstance = new Tooltip();
}
return storedInstance;
}
}
})();
结果：
结论：享元模式好处不言而喻。
js设计模式-享元模式的更多相关文章
- 浅谈js设计模式 — 享元模式
享元(flyweight)模式是一种用于性能优化的模式,“fly”在这里是苍蝇的意思,意为蝇量级.享元模式的核心是运用共享技术来有效支持大量细粒度的对象. 假设有个内衣工厂,目前的产品有 50种男式内 ...
- 8. 星际争霸之php设计模式--享元模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- C++设计模式——享元模式
本文版权归果冻说所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利.如果这篇文章对你有帮助,你可以请我喝杯咖啡. » 本文链接:http:// ...
- java设计模式——享元模式
一. 定义与类型 定义:提供了减少对象数量从而改善应用所需的对象结构的方式,运用共享技术有效地支持大量细粒度的对象 类型:结构性 二. 使用场景 (1) 常常应用于系统底层的开发,以便解决系统的性能 ...
- 【设计模式】Java设计模式 - 享元模式
Java设计模式 - 享元模式 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 原创作品,更多关注我CSDN: 一个有梦有戏的人 准备将博客园.CSDN一起记录分享自己 ...
- JAVA 设计模式 享元模式
用途 享元模式 (Flyweight) 运用共享技术有效地支持大量细粒度的对象. 享元模式是一种结构型模式. 结构
- [工作中的设计模式]享元模式模式FlyWeight
一.模式解析 Flyweight在拳击比赛中指最轻量级,即“蝇量级”或“雨量级”,这里选择使用“享元模式”的意译,是因为这样更能反映模式的用意.享元模式是对象的结构模式.享元模式以共享的方式高效地支持 ...
- javascript 设计模式-----享元模式
四个轮子,一个方向盘,有刹车,油门,车窗,这些词首先让人联想到的就是一辆汽车.的确,这些都是是一辆车的最基本特征,或者是属性,我们把词语抽象出来,而听到这些词语的人把他们想象陈一辆汽车.在代码里面也是 ...
- 深入浅出设计模式——享元模式（Flyweight Pattern）
模式动机 面向对象技术可以很好地解决一些灵活性或可扩展性问题,但在很多情况下需要在系统中增加类和对象的个数.当对象数量太多时,将导致运行代价过高,带来性能下降等问题.享元模式正是为解决这一类问题而诞生 ...
随机推荐
- RunLoop相关知识
RunLoop,翻译过来是运行环路.我们在创建命令行项目和创建ios项目时,发现命令行项目当最后一行代码执行完后项目就自动退出了,而ios项目确可以一直运行,知道用户手动点击退出按钮.这就是因为ios ...
- CXF-JAX-RS开发（二）spring整合CXF-JAX-RS
一.创建maven工程[Packaging:war] 1.目录结构 2.坐标书写 二.导入依赖和tomcat服务器插件 <dependencies> <!-- CXF --> ...
- 【sqli-labs】 less4 GET - Error based - Double Quotes - String (基于错误的GET双引号字符型注入)
提交id参数 加' http://localhost/sqli/Less-4/?id=1' 页面正常,添加" http://localhost/sqli/Less-4/?id=1" ...
- [Jxoi2012]奇怪的道路 题解(From luoguBlog)
题面 状压好题 1<= n <= 30, 0 <= m <= 30, 1 <= K <= 8 这美妙的范围非状压莫属 理所当然地,0和1代表度的奇偶 dp[i][j ...
- Redis 之list链表结构及命令详解
1.lpush key value 从左放一个值 2.rpush key value 从右放一个值 3.lrange key start stop 获取链表数据(start ...
- python排序sorted与sort比较 (转)
Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列. sorted(iterable,key=None,revers ...
- 一个完整的jmeter APP登录接口测试实例
最终效果: 知识点: 通过HTTP信息头管理器, 正则表达式提取器 提取登录要用的token,memcard,Debug Sampler,CSV Data set config参数化登录,循环控制器 ...
- day007 列表类型、元祖类型、 字典类型、 集合类型的内置方法
目录 列表数据类型的内置方法 作用 定义方式 优先掌握的方法 需要掌握的方法 元祖类型的内置方法 作用 定义方式 优先掌握的方法(参考列表方法) 字典类型的内置方法 作用 定义方式 优先掌握的方法 需 ...
- select和epoll最大的区别
先说说阻塞,因为一个线程只能处理一个套接字的I/O事件,如果想同时处理多个,可以利用非阻塞忙轮询的方式,伪代码如下: while true { for i in stream[] { if i has ...
- shell脚本操作mysql数据库，使用mysql的-e参数可以执行各种sql的(创建，删除，增，删，改、查)等各种操作
mysql -hhostname -Pport -uusername -ppassword -e 相关mysql的sql语句,不用在mysql的提示符下运行mysql,即可以在shell中操作m ...