<!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. 初始化httpclient的几种方式

    1.CloseableHttpClient httpclient = HttpClients.createDefault(); 2.DefaultHttpClient client = new Def ...

  2. 首个攻击该Mac OS系统的恶意软件——KeRanger

    首个攻击该Mac OS系统的恶意软件——KeRanger 曾几何时,苹果操作系统一度被人认为是最安全的操作系统.然而近几年,针对苹果系统的攻击日益增多,影响范围也越来越大.无独有偶,近日,苹果Mac  ...

  3. 关于JavaScipt对象的基本知识

    关于JavaScipt对象的基本知识 JavaScript是运用“对象化编程”的,又叫“面向对象编程”的.所谓“对象化编程”,意义是把JavaScript能涉及的领域划分成各种对象,对象后面还连续划分 ...

  4. js/jquery判断浏览器的方法总结

    JS获取浏览器信息浏览器代码名称:navigator.appCodeName浏览器名称:navigator.appName浏览器版本号:navigator.appVersion对Java的支持:nav ...

  5. HDU 4419 Colourful Rectangle --离散化+线段树扫描线

    题意: 有三种颜色的矩形n个,不同颜色的矩形重叠会生成不同的颜色,总共有R,G,B,RG,RB,GB,RGB 7种颜色,问7种颜色每种颜色的面积. 解法: 很容易想到线段树扫描线求矩形面积并,但是如何 ...

  6. Spring 一二事（3） - 别名

    别名就是可以通过另外一个名字来访问如下,已有bean:helloWorld3,那么定义别名(alias )后,就能使用“abc”来访问 <bean id="helloWorld3&qu ...

  7. [3D跑酷] AudioManager

    Unity音频管理 游戏中的声音管理最常用的组件莫过于AudioSource和AudioClip,我的做法是建立是一个AudioManager类(单例类)管理各个音频,谈一下我的经验: 函数列表 St ...

  8. ExtJS要利用观察者模式 去实现自定义的事件

    // 要利用观察者模式 去实现自定义的事件 //1:由于浏览器他自己能定义内置的事件(click/blur...) // 我们也应该有一个类似于浏览器这样的类,这个类 自己去内部定义一些事件(自定义事 ...

  9. crontab任务取消发送邮件

    1. 方式一,每一个计划任务后加上 >/dev/null 2>&1 */5 * * * * sh /web/adm/Shell/checkin_user_count_everyda ...

  10. Linux 网络编程二（Socket创建）

    TCP通信 一个程序使用套接字需要执行4个步骤. --分配套接口和初始化 --连接 --发送或接收数据 --关闭套接字 涉及到的调用包括socket.bind.listen.connect(阻塞线程) ...