示例：工具提示对象---享元模式应用
生活随笔
收集整理的這篇文章主要介紹了
示例：工具提示对象---享元模式应用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!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>
/**
* 示例：工具提示對(duì)象
*
* 在HS對(duì)象需要?jiǎng)?chuàng)建HTML內(nèi)容這種情況下，享元模式特別有用。那種會(huì)生成DOM元素的對(duì)象如果數(shù)目眾多的話，會(huì)占用過多內(nèi)存，使網(wǎng)頁陷入泥沼。采用享元模式后，只需創(chuàng)建少許這種對(duì)象即可，所有需要這種對(duì)象的地方都可以共享它們。工具提示就是一個(gè)典型的例子。
*/// 未經(jīng)優(yōu)化的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類轉(zhuǎn)化為享元需要做三件事：把外在數(shù)據(jù)從Tooltip對(duì)象中刪除；創(chuàng)建一個(gè)用來實(shí)例化Tooltip的工廠；創(chuàng)建一個(gè)用來保存外在數(shù)據(jù)的管理器。在這個(gè)例子，我們可以用一個(gè)單體同時(shí)扮演工廠和管理器的角色。此外，由于外在數(shù)據(jù)可以作為事件偵聽器一部分保存，因此沒有必要使用一個(gè)中心數(shù)據(jù)庫。
*/// 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 = new Tooltip();
}
return storedInstance;
}
};
})();// Tooltip usage
TooltipManager.addTooltip($('link-id2'),'fuck your ass');
/*
上面的Tooltip類刪除了原來的構(gòu)造函數(shù)的所有參數(shù)以及注冊(cè)事件處理器的代碼。而startDelay和show方法則各增加了一個(gè)新的參數(shù)，這樣一來，要顯示的文字就可以作為外在數(shù)據(jù)傳給他們。這個(gè)單體有兩個(gè)方法，分別體現(xiàn)了他的兩種角色，getTooltip是工廠方法，它與你之前見到過的其他享元的生成方法差不多。addTooltip則是管理器方法，它先獲取一個(gè)Tooltip對(duì)象，然后后分別把兩個(gè)匿名函數(shù)注冊(cè)為目標(biāo)元素的mouseover和mouseout事件偵聽器。這個(gè)例子用不著創(chuàng)建中心數(shù)據(jù)庫，因?yàn)槟莾蓚€(gè)匿名函數(shù)中生成的閉包已經(jīng)保存了外在數(shù)據(jù)。
*//*
現(xiàn)在生成的DOM元素已減至一個(gè)。這很重要，假如你想為工具提示添加陰影或iframe墊片等特性，那么每個(gè)Tooltip對(duì)象需要生成5-10個(gè)DOM元素。要是不把它實(shí)現(xiàn)為享元的話，網(wǎng)頁將被成百上千個(gè)工具提示壓垮。此外，享元模式的應(yīng)用還減少了對(duì)箱內(nèi)部保存的數(shù)據(jù)。
*/
</script>
</body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/webFrontDev/archive/2013/03/24/2978523.html
總結(jié)
以上是生活随笔為你收集整理的示例：工具提示对象---享元模式应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ActionBarSherlock V
- 下一篇： 27 款经典的CSS 框架