<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<style>

    .tooltip {

        width:300px;

        height:300px;

        background:#f00;

    }

</style>

<script>

    var TooltipManager = (function(){

        var storedInstance = null;

        var Tooltip = function(){

            this.delayTimeout = null;

            this.delay = 1500;

            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.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.elements.style.display = 'none';

            }

        };

        return {

            addTooltip : function(targetElement,text){

                var tt = this.getTooltip();

                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;

            }

        }

    }())

</script>

</body>

</html>

直接上代码了

JS所谓的享元模式-->的更多相关文章

  1. Javascript设计模式理论与实战：享元模式

    享元模式不同于一般的设计模式,它主要用来优化程序的性能,它最适合解决大量类似的对象而产生的性能问题.享元模式通过分析应用程序的对象,将其解析为内在数据和外在数据,减少对象的数量,从而提高应用程序的性能 ...

  2. js设计模式-享元模式

    享元模式实际上是一种优化模式,目的在于提高系统的性能和代码的效率. 使用享元模式的条件:最重要的条件是网页中必须使用了大量资源密集型对象,如果只会用到了少许这类对象,那么这种优化并不划算.第二个条件是 ...

  3. JS常用的设计模式(16)—— 享元模式

    享元模式主要用来减少程序所需的对象个数. 有一个例子, 我们这边的前端同学几乎人手一本<JavaScript权威指南>. 从省钱的角度讲, 大约三本就够了. 放在部门的书柜里, 谁需要看的 ...

  4. js设计模式（8）---享元模式

    0.前言 今天总结了四种设计模式,到现在有点精疲力尽了,但是还是有不少收获,很开心自己有掌握了新的东西,今天变得有了价值. 1.使用条件 1.1.网页中使用了大量资源密集型的对象: 1.2.这些对象中 ...

  5. JS设计模式（9）享元模式

    什么是享元模式? 定义:享元模式是一种优化程序性能的模式,本质为减少对象创建的个数. 主要解决:在有大量对象时,有可能会造成内存溢出,我们把其中共同的部分抽象出来,如果有相同的业务请求,直接返回在内存 ...

  6. 浅谈js设计模式 — 享元模式

    享元(flyweight)模式是一种用于性能优化的模式,“fly”在这里是苍蝇的意思,意为蝇量级.享元模式的核心是运用共享技术来有效支持大量细粒度的对象. 假设有个内衣工厂,目前的产品有 50种男式内 ...

  7. js享元模式

    享元模式(Flyweight),运用共享技术有效地支持大量细粒度的对象. 内部状态与外部状态 内部状态存储于对象内部. 内部状态可以被一些对象共享 内部状态独立于具体的场景,通常不会改变 外部状态取决 ...

  8. javascript 设计模式-----享元模式

    四个轮子,一个方向盘,有刹车,油门,车窗,这些词首先让人联想到的就是一辆汽车.的确,这些都是是一辆车的最基本特征,或者是属性,我们把词语抽象出来,而听到这些词语的人把他们想象陈一辆汽车.在代码里面也是 ...

  9. JAVA 设计模式 享元模式

    用途 享元模式 (Flyweight) 运用共享技术有效地支持大量细粒度的对象. 享元模式是一种结构型模式. 结构

随机推荐

  1. smarty3缓存设置

  2. Window.open()方法参数详解

    Window.open()方法参数详解 1, 最基本的弹出窗口代码   window.open('page.html'); 2, 经过设置后的弹出窗口   window.open('page.html ...

  3. QT QString类

    字符串有如下几个操作符 QString提供了一个二元的"+"操作符用于组合两个字符串,并提供了一个"+="操作符用于将一个字符串追加到另一个字符串的末尾,例如: ...

  4. An Introduction to Interactive Programming in Python (Part 1) -- Week 2_3 练习

    Mini-project description - Rock-paper-scissors-lizard-Spock Rock-paper-scissors is a hand game that ...

  5. Android Studio Gradle编译项目报错

    Gradle project sync failed Android Studio每次更新版本都会更新Gradle这个插件,但由于长城的问题每次更新都是失败,又是停止在Refreshing Gradl ...

  6. Javascript系列： Google Chrome调试js代码(zz)

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

  7. windows7 64位安装mysql 5.7.11 zip压缩版

    现在,MySQL官网只提供zip的包了, 第一点:解压到自己的任意文件夹 注意:虽然我没有试,但尽量路径中不要有中文吧 第二点:添加环境变量 D:\web\mysql-5.7.11-winx64\bi ...

  8. [CareerCup] 10.2 Data Structures for Large Social Network 大型社交网站的数据结构

    10.2 How would you design the data structures for a very large social network like Facebook or Linke ...

  9. [MetaHook] R_RicochetSprite

    By hzqst void R_RicochetSprite(float *pos, model_t *pmodel, float duration, float scale) { TEMPENTIT ...

  10. 《图解tcp/ip》读书笔记（二）

    <图解tcp/ip>读书笔记(二) 本周主要阅读的是本书的第三章--数据链路. 当然了,从某些角度讲,我认为这一章就是计算机网络的最基本的内容之一.整章讲述了数据链路层的作用和相关技术,主 ...