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）
模式动机 面向对象技术可以很好地解决一些灵活性或可扩展性问题,但在很多情况下需要在系统中增加类和对象的个数.当对象数量太多时,将导致运行代价过高,带来性能下降等问题.享元模式正是为解决这一类问题而诞生 ...
随机推荐
- 【Oracle】闪回表
语法: FLASHBACK TABLE [ schema. ] table [, [ schema. ] table ]... TO { { { SCN | TIMESTAMP } expr| RES ...
- 4星|《OKR实践指南》：老司机经验谈
OKR 实践指南:知乎任向晖.雷明灿作品 (知乎「一小时」系列) 作者所在的公司已经实施了OKR十个季度了.算是目前少有的OKR老司机.书中介绍的是作者的实践经验,在目前的OKR中文书中这本算是比较少 ...
- 使用OpenCV画折线图
使用OpenCV画直方图是一件轻松的事情,画折线图就没有那么Easy了,还是使用一个库吧: GraphUtils 源代码添加入工程 原文链接:http://www.360doc.com/content ...
- 【sqli-labs】 less8 GET - Blind - Boolian Based - Single Quotes (基于布尔的单引号GET盲注)
加单引号 没有任何信息输出 加and 页面变化,不正常是没有任何回显 http://localhost/sqli/Less-8/?id=1' and '1'='1 http://localhost/s ...
- CorelDRAW2019版本下载,CorelDRAW最新版新增功能（全）
使用CorelDRAW 2019,随时随地进行设计创作.无论您使用的是 Windows 或 Mac,都能在为您的平台量身设计的直观界面中,随心所欲地自由创作.无论您是热衷于像素,执迷于无缝输出或沉浸于 ...
- python tips:迭代器与可迭代对象
for循环 for i in s: print(i) 在上述for循环中,不断地将s中的值赋值给i,然后打印出来.这种只针对s中元素的循环称为对s的迭代,能够迭代的s称为可迭代的. python为了实 ...
- 在Android 上运行 openCV ,并做灰度变化的一个例子
OpenCVImageProcessing1. 导入Opencv的 androrid SDK灰度算法 OpenCVImageProcessing 导入opencv Jar包,配置OpenCVLibra ...
- SBC37x交叉编译平台QT+OPENCV【2】虚拟机Vbox下Ubuntu的磁盘扩容
虚拟机Vbox下Ubuntu,当初为了学习,仅仅分配了8g,结果qt,opencv等一上,就说room空间不够了.于是开始折腾磁盘扩容. 网上一大堆,也不知道有多少是自己动手走过,正是不但浪费别人时间 ...
- 炒了8年的概念，到底该如何理解DevOps这个词？
什么是DevOps及误区 DevOps概念从2009年提出已有8个年头.可是在8年前的那个时候,为什么DevOps没有迅速走红呢?即便是在2006年Amazon发布了ECS,微软在2008年和2010 ...
- Co-prime
Co-prime Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem ...