示例：工具提示对象---享元模式应用

<!DOCTYPE html>
<html>
<head>
<title>工具提示(享元模式)</title>
<meta charset="utf-8">
<script src="Library.js"></script>
</head>
<body>
<a id="link-id1" href="">1111111</a><a id="link-id2" href="">222222</a>
<script>
/**
* 示例：工具提示对象
*
* 在HS对象需要创建HTML内容这种情况下，享元模式特别有用。那种会生成DOM元素的对象如果数目众多的话，会占用过多内存，使网页陷入泥沼。采用享元模式后，只需创建少许这种对象即可，所有需要这种对象的地方都可以共享它们。工具提示就是一个典型的例子。*///未经优化的Tooltip类//Tooltip class, un-optimized
var Tooltip = function(targetElement, text) {this.target =targetElement;this.text =text;this.delayTimeout = null;this.delay = 500;this.element = document.createElement('div');this.element.style.display = 'none';this.element.style.position = 'absolute';this.element.className = 'tooltip';
document.body.appendChild(this.element);this.element.innerHTML = this.text;var that = this;
addEvent(this.target, 'mouseover', function(e) {
that.startDelay(e);
});
addEvent(this.target, 'mouseout', function(e) {
that.hide();
});
};
Tooltip.prototype={
startDelay:function(e) {if (this.delayTimeout === null) {var that = this,
x=e.clientX,
y=e.clientY;this.delayTimeout = setTimeout(function() {
that.show(x, y);
},this.delay);
}
},
show:function(x, y) {
clearTimeout(this.delayTimeout);this.delayTimeout = null;this.element.style.left = x + 'px';this.element.style.top = (y + 20) + 'px';this.element.style.display = 'block';
},
hide:function() {
clearTimeout(this.delayTimeout);this.delayTimeout = null;this.element.style.display = 'none';
}
};var link1 = $('link-id1'),
link2= $('link-id2');var tt = new Tooltip(link1, 'Lorem ipsum....');//作为享元的Tooltip/*把Tooltip类转化为享元需要做三件事：把外在数据从Tooltip对象中删除；创建一个用来实例化Tooltip的工厂；创建一个用来保存外在数据的管理器。在这个例子，我们可以用一个单体同时扮演工厂和管理器的角色。此外，由于外在数据可以作为事件侦听器一部分保存，因此没有必要使用一个中心数据库。*///TooltipManager singleton, a flyweight factory and manager
var TooltipManager = (function() {var storedInstance = null;//Tooltip class, as aflyweight
var Tooltip = function() {this.delayTimeout = null;this.delay = 500;this.element = document.createElement('div');this.element.style.display = 'none';this.element.style.position = 'absolute';this.element.className = 'tooltip';
document.body.appendChild(this.element);
};
Tooltip.prototype={
startDelay:function(e, text) {if (this.delayTimeout === null) {var that = this,
x=e.clientX,
y=e.clientY;this.delayTimeout = setTimeout(function() {
that.show(x, y, text);
},this.delay);
}
},
show:function(x, y, text) {
clearTimeout(this.delayTimeout);this.delayTimeout = null;this.element.innerHTML =text;this.element.style.left = x + 'px';this.element.style.top = (y + 20) + 'px';this.element.style.display = 'block';
},
hide:function() {
clearTimeout(this.delayTimeout);this.delayTimeout = null;this.element.style.display = 'none';
}
};return{
addTooltip:function(targetElement, text) {//Get the tooltip object
var tt = this.getTooltip();//Attach the events
addEvent(targetElement, 'mouseover', function(e) {
tt.startDelay(e, text);
});
addEvent(targetElement,'mouseout', function(e) {
tt.hide();
});
},
getTooltip:function() {if (storedInstance === null) {
storedInstance= newTooltip();
}returnstoredInstance;
}
};
})();//Tooltip usage
TooltipManager.addTooltip($('link-id2'),'fuck your ass');/*上面的Tooltip类删除了原来的构造函数的所有参数以及注册事件处理器的代码。而startDelay和show方法则各增加了一个新的参数，这样一来，要显示的文字就可以作为外在数据传给他们。这个单体有两个方法，分别体现了他的两种角色，getTooltip是工厂方法，它与你之前见到过的其他享元的生成方法差不多。addTooltip则是管理器方法，它先获取一个Tooltip对象，然后后分别把两个匿名函数注册为目标元素的mouseover和mouseout事件侦听器。这个例子用不着创建中心数据库，因为那两个匿名函数中生成的闭包已经保存了外在数据。*//*现在生成的DOM元素已减至一个。这很重要，假如你想为工具提示添加阴影或iframe垫片等特性，那么每个Tooltip对象需要生成5-10个DOM元素。要是不把它实现为享元的话，网页将被成百上千个工具提示压垮。此外，享元模式的应用还减少了对箱内部保存的数据。*/
</script>
</body>
</html>

转载于:https://www.cnblogs.com/webFrontDev/archive/2013/03/24/2978523.html

示例：工具提示对象---享元模式应用相关推荐

设计模式-享元模式、享元模式示例
1.简介享元模式是运用共享技术有效地最大限度地复用细粒度对象的一种模式.该模式中,以对象的信息状态划分,可以分为内部数据和外部数据. 内部数据是对象可以共享出来的信息,这些信息不会随着系统的运行而改 ...
第 14 章享元模式
第 14 章享元模式 1.展示网站项目需求小型的外包项目,给客户A做一个产品展示网站, 客户A的朋友感觉效果不错,也希望做这样产品展示网站,但是要求都有些不同: 有客户要求以新闻的形式发布客户人 ...
设计模式之---享元模式（Flyweight Pattern）
场景让我们先来复习下java中String类型的特性: 1.String类型的对象一旦被创造就不可改变: 2.当两个String对象所包含的内容相同的时候,JVM只创建一个String对象对应这两个 ...
Java程序优化之享元模式
享元模式主要目的是为了提高系统性能.它的核心思想是:如果在一个系统中存在多个相同的对象,那么只需要共享一份对象的拷贝,而不必为每一次使用都创建新的对象.享元模式是为数不多的为提升系统性能而生的设计模式 ...
深入理解设计模式（22）：享元模式
一.引言大家都知道单例模式,通过一个全局变量来避免重复创建对象而产生的消耗,若系统存在大量的相似对象时,又该如何处理?参照单例模式,可通过对象池缓存可共享的对象,避免创建多对象,尽可能减少内存的使用 ...
北风设计模式课程---享元模式与单例模式区别
北风设计模式课程---享元模式与单例模式区别一.总结一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 1.享元模式与单例模式区别? 级别:单例模式是类级别的,一个类 ...
【设计模式】享元模式简介 ( 定义 | 对象池 | 内部状态 | 外部状态 | 适用场景 | 相关角色 )
文章目录 I . 享元模式简介 II . 享元模式内部状态和外部状态 III . 享元模式适用场景 IV . 享元模式优缺点 V . 享元模式相关模式 VI . 享元模式相关角色 I ...
享元模式——对象共享，避免创建多对象
1. 享元模式介绍享元模式是对象池的一种实现,它的英文名称叫做Flyweight,代表轻量级的意思.享元模式用来尽可能减少内存使用量,他适合用于可能存在大量重复对象的场景,来缓存可共享的对象,达到对 ...
享元模式（对象共享）
享元模式使用环境示例享元模式在Android中的应用如果在某个场景需要很多重复的对象,你会每次都创建一个对象吗?显然重复的创建大量对象是一种很差的体验.这是享元模式就可以帮到我们了,使用享元模 ...

示例：工具提示对象---享元模式应用

示例：工具提示对象---享元模式应用相关推荐

最新文章

热门文章